/* ============================================================
   VLYX – Application Styles
   ============================================================ */

/* ===== CSS Custom Properties ===== */
:root,
.theme-classic {
    --dva-primary: #2563eb;
    --dva-primary-dark: #1d4ed8;
    --dva-primary-light: #dbeafe;
    --dva-primary-rgb: 37, 99, 235;
    --dva-sidebar-bg: #1e293b;
    --dva-sidebar-hover: #334155;
    --dva-sidebar-text: #cbd5e1;
    --dva-sidebar-text-active: #ffffff;
    --dva-sidebar-width: 260px;
    --dva-sidebar-collapsed-width: 64px;
    --dva-sidebar-border: rgba(255, 255, 255, 0.1);
    --dva-sidebar-brand: #ffffff;
    --dva-topbar-height: 56px;
    --dva-topbar-bg: #ffffff;
    --dva-content-bg: #f1f5f9;
    --dva-card-bg: #ffffff;
    --dva-card-radius: 0.5rem;
    --dva-card-shadow: none;
    --dva-border: #e2e8f0;
    --dva-text: #1e293b;
    --dva-text-muted: #64748b;
    --dva-table-header-bg: #f8fafc;
    --dva-table-hover-bg: #f8fafc;
    --dva-input-bg: #ffffff;
    --dva-input-border: #dee2e6;
    --dva-input-text: #1e293b;
    --dva-autocomplete-bg: #ffffff;
    --dva-autocomplete-hover: #f8f9fa;
    --dva-mobile-nav-bg: #ffffff;
    --dva-overlay-bg: rgba(0, 0, 0, 0.5);
    --dva-success: #16a34a;
    --dva-warning: #d97706;
    --dva-danger: #dc2626;
    --dva-info: #0891b2;
    --dva-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dva-font-heading: var(--dva-font-family);
    --dva-heading-weight: 600;
    --dva-body-size: 0.9rem;
    --dva-badge-bg: #475569;
    --dva-badge-text: #ffffff;
    --dva-badge-outline-bg: transparent;
    --dva-badge-outline-text: #475569;
    --dva-badge-outline-border: #94a3b8;
    --dva-login-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --dva-login-card-bg: #ffffff;
    --dva-login-text: #1e293b;
}

/* ===== Reset / Base ===== */
body.app-body {
    font-family: var(--dva-font-family);
    background: var(--dva-content-bg);
    color: var(--dva-text);
    margin: 0;
    font-size: var(--dva-body-size);
}

/* ===== App Layout ===== */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.app-main {
    margin-left: var(--dva-sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-content {
    padding: 1.5rem;
    flex: 1;
}

/* ===== Menü ein/aus (Sidebar verbergen) ===== */
body.files-expanded .app-sidebar {
    transform: translateX(-100%);
}
body.files-expanded .app-main {
    margin-left: 0;
}
body.files-expanded .sidebar-overlay {
    display: none !important;
}

/* ===== Vergrößern (Drop-Zone + Verzeichnisse ausblenden) ===== */
body.files-compact .dva-dropzone,
body.files-compact #uploadCollapse,
body.files-compact #directoriesCollapse,
body.files-compact [data-bs-target="#uploadCollapse"],
body.files-compact [data-bs-target="#directoriesCollapse"] {
    display: none !important;
}

/* ===== Dateien Vollbild-Modus ===== */
body.files-fullscreen .app-sidebar,
body.files-fullscreen .sidebar-overlay,
body.files-fullscreen .app-topbar,
body.files-fullscreen .dva-mobile-nav {
    display: none !important;
}
body.files-fullscreen .app-main {
    margin-left: 0;
}
/* Projekt-Header und Suche ausblenden */
body.files-fullscreen .detail-header,
body.files-fullscreen .page-header,
body.files-fullscreen .project-search-bar {
    display: none !important;
}
/* Tab-Navigation ausblenden */
body.files-fullscreen .nav-tabs {
    display: none !important;
}
/* Dateibereich maximiert */
body.files-fullscreen .files-section-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--dva-bg);
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

/* Ansichtsmodus-Buttons aktiv */
#filesViewExpand.active,
#filesViewFullscreen.active,
#filesMenuToggle.active {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #fff;
}

/* ===== Sidebar ===== */
.app-sidebar {
    width: var(--dva-sidebar-width);
    background: var(--dva-sidebar-bg);
    color: var(--dva-sidebar-text);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dva-sidebar-border);
}

.sidebar-brand {
    color: var(--dva-sidebar-brand);
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-brand:hover {
    color: var(--dva-sidebar-brand);
}

.sidebar-brand i {
    font-size: 1.4rem;
}

.sidebar-close {
    background: none;
    border: none;
    color: var(--dva-sidebar-text);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
}

.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    color: var(--dva-sidebar-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.sidebar-nav-item:hover {
    background: var(--dva-sidebar-hover);
    color: var(--dva-sidebar-text-active);
}

.sidebar-nav-item.active {
    background: var(--dva-sidebar-hover);
    color: var(--dva-sidebar-text-active);
    border-left-color: var(--dva-primary);
    font-weight: 500;
}

.sidebar-nav-item i {
    font-size: 1.15rem;
    width: 1.25rem;
    text-align: center;
}

.sidebar-divider {
    border-top: 1px solid var(--dva-sidebar-border);
    margin: 0.5rem 1.25rem;
}

/* ===== Sidebar ein-/ausklappen (Desktop, Icon-Leiste) ===== */
.app-main { transition: margin-left 0.2s ease; }
.app-sidebar { transition: transform 0.3s ease, width 0.2s ease; }
.topbar-collapse {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--dva-text-muted, #6c757d);
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    margin-right: 0.4rem;
    border-radius: 6px;
    line-height: 1;
}
.topbar-collapse:hover { color: var(--dva-primary); background: rgba(0, 0, 0, 0.05); }

@media (min-width: 768px) {
    html.sidebar-collapsed .app-sidebar { width: var(--dva-sidebar-collapsed-width); }
    html.sidebar-collapsed .app-main { margin-left: var(--dva-sidebar-collapsed-width); }
    html.sidebar-collapsed .sidebar-brand span,
    html.sidebar-collapsed .sidebar-nav-item > span,
    html.sidebar-collapsed .sidebar-section-label,
    html.sidebar-collapsed .sidebar-nav-item .badge,
    html.sidebar-collapsed .sidebar-user span { display: none; }
    html.sidebar-collapsed .sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; }
    html.sidebar-collapsed .sidebar-brand { gap: 0; }
    html.sidebar-collapsed .sidebar-nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
    html.sidebar-collapsed .sidebar-divider { margin-left: 0.5rem; margin-right: 0.5rem; }
    html.sidebar-collapsed .sidebar-user { justify-content: center; }
}

.sidebar-section-label {
    padding: 0.4rem 1.25rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dva-sidebar-text);
    opacity: 0.5;
    user-select: none;
}

.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--dva-sidebar-border);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dva-sidebar-text);
    font-size: 0.85rem;
}

.sidebar-user i {
    font-size: 1.25rem;
}

/* ===== Topbar ===== */
.app-topbar {
    height: var(--dva-topbar-height);
    background: var(--dva-topbar-bg);
    border-bottom: 1px solid var(--dva-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--dva-text);
    cursor: pointer;
    padding: 0.25rem;
    margin-right: 0.75rem;
}

.topbar-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--dva-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.topbar-back {
    color: var(--dva-text);
    font-size: 1.25rem;
    padding: 0.25rem;
    margin-right: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

.topbar-back:hover {
    color: var(--dva-primary);
}

/* Desktop: Zurueck-Pfeil neben Breadcrumb */
.topbar-back-desktop {
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--dva-primary);
    font-size: 1.1rem;
    min-width: 32px;
    max-width: 240px;
    height: 32px;
    padding: 0 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 0.5rem;
    transition: background-color 0.15s, color 0.15s;
}

.topbar-back-desktop:hover {
    background-color: var(--dva-primary);
    color: #fff;
}

/* Zieltitel neben dem Pfeil.
   Der Benutzer soll VOR dem Klick sehen, wo er landet — dass man das dem
   alten Pfeil nicht ansah, war der Kern der Beschwerde. Auf schmalen
   Fenstern raeumt der Titel das Feld, dort hat der Breadcrumb Vorrang. */
.topbar-back-label {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 1199.98px) {
    .topbar-back-label {
        display: none;
    }
}

/* ===== Breadcrumb in Topbar ===== */
.topbar-breadcrumb {
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

.topbar-breadcrumb-link {
    color: var(--dva-primary);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.topbar-breadcrumb-link:hover {
    color: var(--dva-primary-dark);
    text-decoration: underline;
}

.topbar-breadcrumb-sep {
    color: var(--dva-text-muted);
    font-size: 0.7rem;
    margin: 0 0.4rem;
    flex-shrink: 0;
}

.topbar-breadcrumb-current {
    color: var(--dva-text);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.topbar-actions .btn-link {
    text-decoration: none;
    font-size: 0.9rem;
}

/* ===== Mobile Navigation ===== */
.app-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dva-mobile-nav-bg);
    border-top: 1px solid var(--dva-border);
    display: flex;
    justify-content: space-around;
    padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: var(--dva-text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    transition: color 0.15s;
}

.mobile-nav-item i {
    font-size: 1.25rem;
}

.mobile-nav-item.active {
    color: var(--dva-primary);
}

.mobile-nav-item:hover {
    color: var(--dva-primary);
}

/* ===== Sidebar Overlay (Mobile) ===== */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: var(--dva-overlay-bg);
    z-index: 1035;
    display: none;
}

.sidebar-overlay.show {
    display: block;
}

/* ===== Responsive ===== */
@media (max-width: 767.98px) {
    .app-sidebar {
        transform: translateX(-100%);
    }

    .app-sidebar.show {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }

    .app-content {
        padding: 1rem;
        padding-bottom: 5rem;
    }
}

@media (min-width: 768px) {
    .app-mobile-nav {
        display: none !important;
    }
}

/* ===== Mobile: Page-Header stacking ===== */
@media (max-width: 575.98px) {
    .page-header .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }
    .page-header .btn {
        width: 100%;
        text-align: center;
    }
    .page-header h1 {
        font-size: 1.4rem;
    }
}

/* ===== Mobile: Touch-Targets & iOS-Zoom-Fix ===== */
@media (max-width: 767.98px) {
    .form-control-sm,
    .form-select-sm {
        font-size: 16px;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
    }
}

/* ===== Mobile: Filter-Collapse ===== */
@media (max-width: 767.98px) {
    .filter-collapsible {
        display: none;
    }
    .filter-collapsible.show {
        display: block;
    }
}
.filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.filter-toggle-btn .filter-count {
    font-size: 0.7rem;
    min-width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ===== Card-Grid-Layout fuer Listen ===== */
.mobile-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.mobile-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--dva-border);
    border-left: 4px solid var(--card-accent, var(--dva-primary));
    border-radius: var(--dva-card-radius);
    background: var(--dva-card-bg);
    box-shadow: var(--dva-card-shadow);
    text-decoration: none;
    color: var(--dva-text);
    transition: box-shadow 0.2s ease;
}
.mobile-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.mobile-card:active {
    background: var(--dva-table-hover-bg);
}
.mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.mobile-card-header > *:first-child {
    min-width: 0;
}
.mobile-card-header > span:first-child,
.mobile-card-header > a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-card-header > div:first-child > a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-card-header .badge {
    flex-shrink: 0;
}
.mobile-card-title {
    font-size: 0.95rem;
    line-height: 1.3;
}
.mobile-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--dva-text-muted);
}
.mobile-card-meta i {
    margin-right: 0.2rem;
}
.mobile-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ===== View Toggle: List/Cards Switch ===== */
.dva-view-toggle {
    flex-shrink: 0;
}
.dva-view-toggle .btn.active {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #fff;
}
.dva-view-container.dva-view-list .view-table {
    display: block !important;
}
.dva-view-container.dva-view-list .view-cards {
    display: none !important;
}
.dva-view-container.dva-view-cards .view-table {
    display: none !important;
}
.dva-view-container.dva-view-cards .view-cards {
    display: block !important;
}
.dva-view-container.dva-view-cards .view-cards.mobile-cards {
    display: grid !important;
}
.dva-view-container.dva-view-cards .view-cards.file-preview-grid {
    display: grid !important;
}
/* Fokusansicht: weder Tabelle noch Kacheln, sondern die eigene Bauform. */
.dva-view-container.dva-view-fokus .view-table,
.dva-view-container.dva-view-fokus .view-cards {
    display: none !important;
}
.dva-view-container.dva-view-fokus .view-fokus {
    display: flex !important;
}
.view-fokus {
    display: none;
}

/* Default (kein expliziter Modus): Tabelle anzeigen, Kacheln ausblenden */
.dva-view-container:not(.dva-view-list):not(.dva-view-cards):not(.dva-view-fokus) .view-cards {
    display: none;
}

/* ===== Ausklappbare Formular-Abschnitte ("Weitere Angaben") ===== */
.project-form-advanced > summary {
    cursor: pointer;
    padding: 0.4rem 0;
    list-style: none;
}
.project-form-advanced > summary::-webkit-details-marker {
    display: none;
}
.project-form-advanced > summary::before {
    content: "\F285"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    margin-right: 0.4rem;
    font-size: 0.8rem;
    display: inline-block;
    transition: transform 0.15s;
}
.project-form-advanced[open] > summary::before {
    transform: rotate(90deg);
}

/* ===== Umschaltbare Kontexthilfe ===== */
.helpbtn {
    flex-shrink: 0;
    font-weight: 600;
}
.helpbtn.active {
    background: #f5a623;
    border-color: #f5a623;
    color: #241500;
    font-weight: 800;
}
.fieldhelp {
    display: none;
    margin: 0.35rem 0 0;
    padding: 0.55rem 0.78rem;
    background: #eef6f9;
    border-left: 3px solid #2b8a9e;
    border-radius: 6px;
    color: #35505c;
    font-size: 0.86rem;
    line-height: 1.45;
}
html.help-on .fieldhelp {
    display: block;
}
.helpbanner {
    display: none;
    margin-bottom: 1rem;
    padding: 0.6rem 0.95rem;
    border-radius: 6px;
    background: #fff7ec;
    border: 1px solid #f3d19a;
    color: #8a5a12;
    font-size: 0.9rem;
}
html.help-on.has-fieldhelp .helpbanner {
    display: block;
}
/* Seite ohne Feld-Hilfen: sagen, dass es nichts zu zeigen gibt, statt den
   Schalter wirkungslos aussehen zu lassen. */
.helpbanner-leer {
    display: none;
    margin-bottom: 1rem;
    padding: 0.6rem 0.95rem;
    border-radius: 6px;
    background: #f4f6f9;
    border: 1px solid #dbe1ea;
    color: #566574;
    font-size: 0.9rem;
}
html.help-on:not(.has-fieldhelp) .helpbanner-leer {
    display: block;
}
@media print {
    .helpbanner,
    .helpbanner-leer,
    .helpbtn {
        display: none !important;
    }
}

/* ===== Dichte-Umschalter: kompakte Zeilen ===== */
.dva-density-toggle {
    flex-shrink: 0;
}
.dva-density-toggle .btn.active {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #fff;
}
.dva-view-container.dva-density-compact .table > :not(caption) > * > * {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.dva-view-container.dva-density-compact .table {
    font-size: 0.875rem;
}
.dva-view-container.dva-density-compact .mobile-card {
    padding: 0.45rem 0.6rem;
}
.dva-view-container.dva-density-compact .mobile-card-meta {
    font-size: 0.75rem;
}

/* ===== Mobile: Tagesmappe Range-Tabs horizontal scroll ===== */
@media (max-width: 575.98px) {
    .reminder-range-tabs .btn-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .reminder-range-tabs .btn-group::-webkit-scrollbar {
        display: none;
    }
    .reminder-range-tabs .btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ===== Guest Layout (Login) ===== */
.app-content-guest {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--dva-login-bg);
}

.login-card {
    background: var(--dva-login-card-bg);
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}

.login-card .login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-card .login-header i {
    font-size: 2.5rem;
    color: var(--dva-primary);
}

.login-card .login-header h1 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 0.75rem;
    color: var(--dva-login-text);
}

.login-card .login-header p {
    color: var(--dva-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ===== Page Header ===== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: var(--dva-heading-weight);
    font-family: var(--dva-font-heading);
    margin: 0;
}

/* ===== KPI Cards ===== */
a.color-inherit { color: inherit; }
a.color-inherit:hover .kpi-card {
    border-color: var(--dva-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.kpi-card {
    background: var(--dva-card-bg);
    border-radius: var(--dva-card-radius);
    border: 1px solid var(--dva-border);
    box-shadow: var(--dva-card-shadow);
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.kpi-card .kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.kpi-card .kpi-icon.bg-primary-light {
    background: var(--dva-primary-light);
    color: var(--dva-primary);
}

.kpi-card .kpi-icon.bg-success-light {
    background: #dcfce7;
    color: var(--dva-success);
}

.kpi-card .kpi-icon.bg-warning-light {
    background: #fef3c7;
    color: var(--dva-warning);
}

.kpi-card .kpi-icon.bg-danger-light {
    background: #fee2e2;
    color: var(--dva-danger);
}

.kpi-card .kpi-icon.bg-info-light {
    background: #cffafe;
    color: var(--dva-info);
}

.kpi-card .kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--dva-text);
}

.kpi-card .kpi-label {
    font-size: 0.8rem;
    color: var(--dva-text-muted);
    margin-top: 0.25rem;
}

.kpi-card.kpi-card-danger {
    border-color: var(--dva-danger);
}
.kpi-card.kpi-card-danger .kpi-value {
    color: var(--dva-danger);
}

/* ===== Dashboard: Tagesmappe-Hinweisleiste ===== */
.dashboard-attention-bar {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--dva-card-radius);
    padding: 0.75rem 1.25rem;
    color: #664d03;
    font-weight: 500;
}
.dashboard-attention-bar i.bi-exclamation-triangle-fill {
    font-size: 1.1rem;
    color: #cc9a06;
}

/* ===== Nextcloud Directory File Listing ===== */
.nc-file-panel {
    max-height: 400px;
    overflow-y: auto;
}
.nc-file-panel .list-group-item {
    font-size: 0.85rem;
    border-left: none;
    border-right: none;
    color: var(--dva-text);
    background: transparent;
}
.nc-file-panel .list-group-item:first-child {
    border-top: none;
}
.nc-file-panel .list-group-item:hover {
    background-color: var(--dva-table-hover-bg, rgba(0,0,0,0.03));
}
.nc-dir-toggle {
    line-height: 1;
}

/* ===== Notizbuch ===== */
.notebook-sidebar {
    border-right: 1px solid var(--dva-border);
    min-height: 200px;
}
.notebook-page-item {
    border-radius: 0.25rem !important;
    border: none !important;
    padding: 0.5rem 0.75rem;
}
.notebook-page-item:hover:not(.active) {
    background-color: var(--dva-table-hover-bg, rgba(0,0,0,0.03));
}
.notebook-page-item.active {
    background-color: var(--dva-primary) !important;
    color: white !important;
}
@media (max-width: 767.98px) {
    .notebook-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--dva-border);
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
}

/* ===== Bootstrap Card Override (fuer Chronik etc.) ===== */
.card {
    background-color: var(--dva-card-bg);
    border-color: var(--dva-border);
    color: var(--dva-text);
}
.card-header {
    background-color: var(--dva-table-header-bg);
    border-color: var(--dva-border);
}

/* ===== Content Cards ===== */
.content-card {
    background: var(--dva-card-bg);
    border-radius: var(--dva-card-radius);
    border: 1px solid var(--dva-border);
    box-shadow: var(--dva-card-shadow);
    margin-bottom: 1.5rem;
}

.content-card .card-header-custom {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dva-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.95rem;
}

.content-card .card-body-custom {
    padding: 0;
}

/* ===== Tables ===== */
.table-container {
    background: var(--dva-card-bg);
    border-radius: var(--dva-card-radius);
    border: 1px solid var(--dva-border);
    box-shadow: var(--dva-card-shadow);
    overflow: hidden;
}

.table-container .table {
    margin-bottom: 0;
}

.table-container .table th {
    background: var(--dva-table-header-bg);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--dva-text-muted);
    border-bottom-width: 1px;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.table-container .table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.table-container .table tbody tr:hover {
    background: var(--dva-table-hover-bg);
}

/* ===== Status Badges ===== */
.badge.bg-secondary {
    background-color: var(--dva-badge-bg) !important;
    color: var(--dva-badge-text) !important;
}
.badge.bg-outline-secondary {
    background-color: var(--dva-badge-outline-bg) !important;
    color: var(--dva-badge-outline-text) !important;
    border: 1px solid var(--dva-badge-outline-border) !important;
}
.badge-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3em 0.65em;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .badge-status {
        font-size: 0.65rem;
        padding: 0.25em 0.5em;
    }
}

/* ===== Favorite Toggle Button ===== */
.favorite-toggle-btn {
    color: var(--dva-text-muted);
    background: transparent;
    border: 1px solid var(--dva-border);
    border-radius: 0.375rem;
    transition: color 0.2s, border-color 0.2s;
    line-height: 1;
}
.favorite-toggle-btn:hover {
    color: #f59e0b;
    border-color: #f59e0b;
}
.favorite-toggle-btn.is-favorite {
    color: #f59e0b;
    border-color: #f59e0b;
}
.favorite-toggle-btn.is-favorite:hover {
    color: #d97706;
    border-color: #d97706;
}
.favorite-toggle-btn:disabled {
    opacity: 0.5;
}

/* ===== Filter Bar ===== */
.filter-bar {
    background: var(--dva-card-bg);
    border-radius: var(--dva-card-radius);
    border: 1px solid var(--dva-border);
    box-shadow: var(--dva-card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.filter-bar .form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--dva-text-muted);
    margin-bottom: 0.25rem;
}

.filter-bar .form-select,
.filter-bar .form-control {
    font-size: 0.875rem;
}

/* ===== Detail Page ===== */
.detail-header {
    background: var(--dva-card-bg);
    border-radius: var(--dva-card-radius);
    border: 1px solid var(--dva-border);
    box-shadow: var(--dva-card-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-header h1 {
    font-size: 1.35rem;
    font-weight: var(--dva-heading-weight);
    font-family: var(--dva-font-heading);
    margin: 0 0 0.5rem;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: var(--dva-text-muted);
    font-size: 0.875rem;
}

.detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.detail-section {
    background: var(--dva-card-bg);
    border-radius: var(--dva-card-radius);
    border: 1px solid var(--dva-border);
    box-shadow: var(--dva-card-shadow);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.detail-section h3 {
    font-size: 1rem;
    font-weight: var(--dva-heading-weight);
    font-family: var(--dva-font-heading);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dva-border);
}

/* ===== Flash Messages ===== */
.flash-container {
    margin-bottom: 1rem;
}

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--dva-text-muted);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.empty-state p {
    font-size: 0.95rem;
    margin: 0;
}

/* ===== Email Body ===== */
.email-body-container {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: 0.375rem;
    padding: 1.25rem;
    max-height: 600px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}

.email-body-container img {
    max-width: 100%;
    height: auto;
}

/* ===== Progress Bars (Budget) ===== */
.budget-bar {
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    overflow: hidden;
}

.budget-bar .bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

/* ===== Utilities ===== */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

/* ===== Drag & Drop Aufgaben ===== */
.drag-handle {
    cursor: grab !important;
    user-select: none;
    -webkit-user-select: none;
}

.drag-handle:active {
    cursor: grabbing !important;
}

tr.dragging {
    opacity: 0.5;
    background-color: var(--dva-primary-light, #e8f0fe) !important;
}

/* ===== E-Mail Drag & Drop Panel ===== */
.email-drag-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    background: var(--dva-card-bg);
    border-left: 1px solid var(--dva-border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: 1060;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    overflow-y: auto;
}

.email-drag-panel.is-visible {
    transform: translateX(0);
}

.email-drag-panel-header {
    padding: 1rem;
    border-bottom: 1px solid var(--dva-border);
    background: var(--dva-table-header-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.email-drag-panel-body {
    padding: 0.5rem;
}

.email-drag-target {
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
    transition: border-color 0.15s, background-color 0.15s;
    cursor: default;
}

.email-drag-target.is-hover {
    border-color: var(--dva-primary);
    background-color: var(--dva-primary-light, #e8f0fe);
}

.email-drag-target.is-assigning {
    opacity: 0.6;
    pointer-events: none;
}

/* E-Mail Zeile: Drag-Cursor */
tr[draggable="true"] {
    cursor: grab;
}

tr[draggable="true"]:active {
    cursor: grabbing;
}

/* Modal: Vorschlaege + Favoriten */
#suggestionsSection .list-group-item,
#favoritesSection .list-group-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-left: none;
    border-right: none;
}

#suggestionsSection .list-group-item:hover,
#favoritesSection .list-group-item:hover {
    background-color: var(--dva-autocomplete-hover);
}

#suggestionsSection .list-group-item:disabled,
#favoritesSection .list-group-item:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ===== Print ===== */
@media print {
    .app-sidebar,
    .app-topbar,
    .app-mobile-nav,
    .sidebar-overlay,
    .filter-bar,
    .btn {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }

    .app-content {
        padding: 0 !important;
    }
}

/* ===== Quill Editor ===== */
.ql-snow .ql-editor {
    max-height: 400px;
}
.ql-snow .ql-tooltip {
    z-index: 10;
}

/* ===== Autocomplete Dropdown ===== */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 240px;
    overflow-y: auto;
    background: var(--dva-autocomplete-bg);
    border: 1px solid var(--dva-border);
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}
.autocomplete-item {
    padding: .5rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--dva-border);
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--dva-autocomplete-hover);
}
.autocomplete-item .item-name {
    font-weight: 500;
    font-size: .875rem;
}
.autocomplete-item .item-company {
    font-size: .775rem;
    color: var(--dva-text-muted);
}
.autocomplete-hint {
    padding: .4rem .75rem;
    font-size: .775rem;
    color: var(--dva-text-muted);
    text-align: center;
}

/* ===== Collapse-Chevron (Vorschlaege/Favoriten) ===== */
.toggle-collapse {
    cursor: pointer;
}
.toggle-collapse .collapse-chevron {
    transition: transform .2s ease;
}
.toggle-collapse[aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}

/* ===== Chronik / Timeline ===== */
.timeline {
    position: relative;
    padding-left: 1.75rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: var(--dva-border);
}
.timeline-item {
    position: relative;
    padding-bottom: 1rem;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--dva-card-bg);
    background: var(--dva-border);
    box-shadow: 0 0 0 1px var(--dva-border);
}
.timeline-dot.dot-primary   { background: var(--dva-primary); box-shadow: 0 0 0 1px var(--dva-primary); }
.timeline-dot.dot-success   { background: var(--dva-success); box-shadow: 0 0 0 1px var(--dva-success); }
.timeline-dot.dot-warning   { background: var(--dva-warning); box-shadow: 0 0 0 1px var(--dva-warning); }
.timeline-dot.dot-info      { background: var(--dva-info);    box-shadow: 0 0 0 1px var(--dva-info); }
.timeline-dot.dot-danger    { background: var(--dva-danger);  box-shadow: 0 0 0 1px var(--dva-danger); }
.timeline-dot.dot-secondary { background: #6c757d;           box-shadow: 0 0 0 1px #6c757d; }
.timeline-dot.dot-muted     { background: #adb5bd;           box-shadow: 0 0 0 1px #adb5bd; }
.timeline-title {
    font-weight: 500;
    font-size: 0.875rem;
}
.timeline-meta {
    font-size: 0.775rem;
    color: var(--dva-text-muted);
}

/* ----- Aufklappbare Chronik-Eintraege -----------------------------------
   Der Kopf einer Zeile ist die Schaltflaeche; die Details stehen darunter im
   Bootstrap-Collapse. Die Zeile muss als klickbar erkennbar sein, ohne wie
   ein Knopf auszusehen — daher nur Zeiger, dezenter Hintergrund beim
   Ueberfahren und ein Winkel, der sich beim Aufklappen dreht. */

.timeline-item-toggle .chronik-head {
    cursor: pointer;
    border-radius: 6px;
    margin: -0.25rem -0.5rem 0;
    padding: 0.25rem 0.5rem;
    transition: background-color 0.12s ease-in-out;
}

.timeline-item-toggle .chronik-head:hover,
.timeline-item-toggle .chronik-head:focus-visible {
    background: var(--dva-table-hover-bg, #f8fafc);
}

.timeline-item-toggle .chronik-head:focus-visible {
    outline: 2px solid var(--dva-primary, #2563eb);
    outline-offset: 1px;
}

.chronik-chevron {
    display: inline-block;
    font-size: 0.7rem;
    transition: transform 0.15s ease-in-out;
    opacity: 0.6;
}

.chronik-head[aria-expanded="true"] .chronik-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.chronik-detail {
    margin: 0.4rem 0 0.2rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--dva-border, #e2e8f0);
    background: var(--dva-table-hover-bg, #f8fafc);
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
}

.chronik-detail-text {
    white-space: pre-wrap;
    color: var(--dva-text, #1e293b);
    margin-bottom: 0.4rem;
}

.chronik-detail-meta {
    color: var(--dva-text-muted, #64748b);
}

.chronik-detail-meta div + div { margin-top: 0.15rem; }

.chronik-detail-actions { margin-top: 0.5rem; }

/* Aus der Chronik angesprungene Aktivitaet im Reiter hervorheben —
   sonst sucht man den Eintrag auf einer vollen Seite trotzdem. */
.activity-card-fokus {
    border-color: var(--dva-primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* ===== Projektstruktur / Project Tree ===== */
.project-tree,
.project-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.project-tree-children {
    padding-left: 1.5rem;
}

/* Jedes Baum-Element: vertikale Linie links */
.project-tree-item {
    position: relative;
    padding-left: 1.5rem;
}

/* Vertikale Verbindungslinie */
.project-tree-item::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--dva-border);
}

/* Letztes Kind: vertikale Linie nur bis zum Punkt */
.project-tree-item--last::before {
    bottom: calc(100% - 1.05rem);
}

/* Horizontale Abzweigung zum Punkt */
.project-tree-item::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 1rem;
    width: 0.75rem;
    height: 2px;
    background: var(--dva-border);
}

/* Root-Knoten: keine Verbindungslinien */
.project-tree > .project-tree-item::before,
.project-tree > .project-tree-item::after {
    display: none;
}
.project-tree > .project-tree-item {
    padding-left: 0;
}

/* Knoten-Inhalt */
.project-tree-node {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    margin-bottom: 0.15rem;
    transition: background-color 0.15s;
}
.project-tree-node:hover {
    background: var(--dva-table-hover-bg);
}

/* Hervorgehobener aktueller Vorgang */
.project-tree-node--current {
    background: var(--dva-primary-light);
    border: 1px solid rgba(var(--dva-primary-rgb), 0.3);
}
.project-tree-node--current:hover {
    background: var(--dva-primary-light);
}

/* Punkt-Indikator */
.project-tree-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dva-border);
    border: 2px solid var(--dva-card-bg);
    box-shadow: 0 0 0 1px var(--dva-border);
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.project-tree-node--current .project-tree-dot {
    background: var(--dva-primary);
    box-shadow: 0 0 0 1px var(--dva-primary);
}

/* Inhalt (Label + Badge) */
.project-tree-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
}
.project-tree-label {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.project-tree-label {
    color: var(--dva-primary);
}
a.project-tree-label:hover {
    color: var(--dva-primary-dark);
    text-decoration: underline !important;
}
.project-tree-node--current .project-tree-label {
    color: var(--dva-text);
}

/* ===== Sortierbare Spaltenueberschriften ===== */
th .sort-link {
    color: var(--dva-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
th .sort-link:hover {
    color: var(--dva-text);
}
th .sort-link .bi {
    font-size: 0.7rem;
    margin-left: 0.2rem;
}

/* ===== E-Mail-Liste: Zuordnen-Button ===== */
.email-assign-btn {
    white-space: nowrap;
    font-size: 0.8rem;
}

/* ===== Dashboard: KPI-Karten gross (Aufgaben-Fokus) ===== */
.kpi-card-lg {
    padding: 1.5rem 1.75rem;
}
.kpi-icon-lg {
    width: 56px;
    height: 56px;
    font-size: 1.75rem;
}
.kpi-value-lg {
    font-size: 2.25rem;
}
.kpi-card-alert {
    border-color: var(--dva-danger);
    border-width: 2px;
}

/* ===== Dashboard: Fortschrittsbalken (KPI-Layout) ===== */
.progress-stacked-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: #e2e8f0;
}
.progress-stacked-segment {
    height: 100%;
    transition: width 0.4s ease;
}
.status-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* ===== Einstellungen: Auswahl-Karten (Layouts / Themes) ===== */
.setting-option {
    display: block;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.setting-option .content-card {
    transition: border-color 0.15s, box-shadow 0.15s;
}
.setting-option:hover .content-card {
    border-color: var(--dva-primary);
    box-shadow: 0 2px 8px rgba(var(--dva-primary-rgb), 0.12);
}
.setting-option.active .content-card,
.setting-option:has(input:checked) .content-card {
    border-color: var(--dva-primary);
    border-width: 2px;
    box-shadow: 0 2px 12px rgba(var(--dva-primary-rgb), 0.18);
    background: var(--dva-primary-light);
}
/* Theme-Vorschau Karte */
.theme-preview-card {
    border-radius: 8px;
    overflow: hidden;
    height: 80px;
    margin-bottom: 0.75rem;
    position: relative;
}
.theme-preview-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
}
.theme-preview-sidebar span {
    display: block;
    height: 4px;
    border-radius: 2px;
    opacity: 0.6;
}
.theme-preview-main {
    position: absolute;
    left: 30%;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}
.theme-preview-topbar {
    height: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.theme-preview-content {
    flex: 1;
    padding: 6px;
    display: flex;
    gap: 4px;
}
.theme-preview-content span {
    flex: 1;
    border-radius: 3px;
    opacity: 0.5;
}

/* ===== E-Mail-Vorschau in Liste ===== */
.email-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* -webkit-line-clamp wird per inline-style gesetzt */
    margin-top: 0.2rem;
    line-height: 1.4;
    font-size: 0.8rem;
    color: var(--dva-text-muted);
    word-break: break-word;
}


/* ============================================================
   THEME 2: MITTERNACHT (Dark Mode)
   Dunkler Hintergrund, leuchtende Akzente, glasartige Oberflaechen
   ============================================================ */
.theme-dark {
    --dva-primary: #818cf8;
    --dva-primary-dark: #6366f1;
    --dva-primary-light: rgba(129, 140, 248, 0.15);
    --dva-primary-rgb: 129, 140, 248;
    --dva-sidebar-bg: #0f172a;
    --dva-sidebar-hover: #1e293b;
    --dva-sidebar-text: #94a3b8;
    --dva-sidebar-text-active: #e2e8f0;
    --dva-sidebar-width: 260px;
    --dva-sidebar-border: rgba(255, 255, 255, 0.06);
    --dva-sidebar-brand: #e2e8f0;
    --dva-topbar-height: 56px;
    --dva-topbar-bg: #1e293b;
    --dva-content-bg: #0f172a;
    --dva-card-bg: #1e293b;
    --dva-card-radius: 0.75rem;
    --dva-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --dva-border: #334155;
    --dva-text: #e2e8f0;
    --dva-text-muted: #94a3b8;
    --dva-table-header-bg: #1a2332;
    --dva-table-hover-bg: #263345;
    --dva-input-bg: #1e293b;
    --dva-input-border: #475569;
    --dva-input-text: #e2e8f0;
    --dva-autocomplete-bg: #1e293b;
    --dva-autocomplete-hover: #334155;
    --dva-mobile-nav-bg: #1e293b;
    --dva-overlay-bg: rgba(0, 0, 0, 0.7);
    --dva-success: #4ade80;
    --dva-warning: #fbbf24;
    --dva-danger: #f87171;
    --dva-info: #22d3ee;
    --dva-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dva-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dva-heading-weight: 700;
    --dva-body-size: 0.9rem;
    --dva-login-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    --dva-badge-bg: #64748b;
    --dva-badge-text: #ffffff;
    --dva-badge-outline-bg: transparent;
    --dva-badge-outline-text: #94a3b8;
    --dva-badge-outline-border: #475569;
    --dva-login-card-bg: #1e293b;
    --dva-login-text: #e2e8f0;
    color-scheme: dark;
}

/* Dark: Bootstrap-Overrides fuer Formulare, Buttons, Dropdowns */
.theme-dark .form-control,
.theme-dark .form-select {
    background-color: var(--dva-input-bg);
    border-color: var(--dva-input-border);
    color: var(--dva-input-text);
}
.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
    background-color: var(--dva-input-bg);
    border-color: var(--dva-primary);
    color: var(--dva-input-text);
    box-shadow: 0 0 0 0.2rem rgba(var(--dva-primary-rgb), 0.25);
}
.theme-dark .form-control::placeholder {
    color: #64748b;
}
.theme-dark .btn-outline-primary {
    color: var(--dva-primary);
    border-color: var(--dva-primary);
}
.theme-dark .btn-outline-primary:hover {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #0f172a;
}
.theme-dark .btn-outline-secondary {
    color: #94a3b8;
    border-color: #475569;
}
.theme-dark .btn-outline-secondary:hover {
    background-color: #475569;
    border-color: #475569;
    color: #e2e8f0;
}
.theme-dark .btn-primary {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #0f172a;
}
.theme-dark .btn-primary:hover {
    background-color: var(--dva-primary-dark);
    border-color: var(--dva-primary-dark);
}
.theme-dark .dropdown-menu {
    background-color: #1e293b;
    border-color: #334155;
}
.theme-dark .dropdown-item {
    color: #e2e8f0;
}
.theme-dark .dropdown-item:hover {
    background-color: #334155;
    color: #f1f5f9;
}
.theme-dark .dropdown-item-text {
    color: #94a3b8 !important;
}
.theme-dark .dropdown-divider {
    border-color: #334155;
}
.theme-dark .btn-link.text-dark {
    color: var(--dva-text) !important;
}
.theme-dark .list-group-item {
    background-color: var(--dva-card-bg);
    border-color: var(--dva-border);
    color: var(--dva-text);
}
.theme-dark .list-group-item-action:hover {
    background-color: var(--dva-table-hover-bg);
    color: var(--dva-text);
}
.theme-dark .table {
    color: var(--dva-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--dva-text);
    --bs-table-hover-bg: var(--dva-table-hover-bg);
    --bs-table-hover-color: var(--dva-text);
}
.theme-dark .table td,
.theme-dark .table th {
    border-color: var(--dva-border);
    color: var(--dva-text);
}
.theme-dark .table thead th {
    color: var(--dva-text-muted);
}
.theme-dark .card-header-custom {
    color: var(--dva-text);
}
.theme-dark .list-group-item {
    color: var(--dva-text);
}
.theme-dark .modal-content {
    background-color: var(--dva-card-bg);
    border-color: var(--dva-border);
    color: var(--dva-text);
}
.theme-dark .modal-header {
    border-color: var(--dva-border);
}
.theme-dark .modal-footer {
    border-color: var(--dva-border);
}
.theme-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.theme-dark .nav-tabs {
    border-color: var(--dva-border);
}
.theme-dark .nav-tabs .nav-link {
    color: var(--dva-text-muted);
}
.theme-dark .nav-tabs .nav-link.active {
    background-color: var(--dva-card-bg);
    border-color: var(--dva-border) var(--dva-border) var(--dva-card-bg);
    color: var(--dva-text);
}
.theme-dark .nav-tabs .nav-link:hover {
    border-color: var(--dva-border);
    color: var(--dva-text);
}
.theme-dark .tab-content {
    background-color: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-top: none;
    border-radius: 0 0 var(--dva-card-radius) var(--dva-card-radius);
}
.theme-dark .text-dark {
    color: var(--dva-text) !important;
}
.theme-dark .text-muted {
    color: var(--dva-text-muted) !important;
}
.theme-dark a {
    color: var(--dva-primary);
}
.theme-dark .fw-medium {
    color: var(--dva-text);
}
.theme-dark .kpi-card .kpi-icon.bg-primary-light {
    background: rgba(129, 140, 248, 0.15);
    color: #818cf8;
}
.theme-dark .kpi-card .kpi-icon.bg-success-light {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}
.theme-dark .kpi-card .kpi-icon.bg-warning-light {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
.theme-dark .kpi-card .kpi-icon.bg-danger-light {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}
.theme-dark .kpi-card .kpi-icon.bg-info-light {
    background: rgba(34, 211, 238, 0.15);
    color: #22d3ee;
}
.theme-dark .login-card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.theme-dark .login-card .login-header p {
    color: #94a3b8;
}
.theme-dark .login-card .login-header i {
    color: #818cf8;
}
.theme-dark hr {
    border-color: var(--dva-border);
}
.theme-dark .ql-toolbar.ql-snow {
    background: var(--dva-card-bg);
    border-color: var(--dva-border);
}
.theme-dark .ql-container.ql-snow {
    background: var(--dva-input-bg);
    border-color: var(--dva-border);
    color: var(--dva-text);
}
.theme-dark .ql-editor.ql-blank::before {
    color: #64748b;
}
/* Dark: Bootstrap-Karten (Chronik etc.) */
.theme-dark .card-header {
    background-color: #1a2332;
}
.theme-dark .btn-outline-danger {
    color: #f87171;
    border-color: #f87171;
}
.theme-dark .btn-outline-danger:hover {
    background-color: #f87171;
    border-color: #f87171;
    color: #0f172a;
}
.theme-dark .form-label {
    color: var(--dva-text);
}
.theme-dark .pagination .page-link {
    background-color: var(--dva-card-bg);
    border-color: var(--dva-border);
    color: var(--dva-primary);
}
.theme-dark .pagination .page-item.active .page-link {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #0f172a;
}
.theme-dark .pagination .page-item.disabled .page-link {
    background-color: #1a2332;
    border-color: var(--dva-border);
    color: #475569;
}
.theme-dark .alert {
    border-color: var(--dva-border);
}
.theme-dark .alert-success {
    background-color: rgba(74, 222, 128, 0.1);
    color: #4ade80;
}
.theme-dark .alert-danger {
    background-color: rgba(248, 113, 113, 0.1);
    color: #f87171;
}
.theme-dark .alert-warning {
    background-color: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

/* ----- Dark: Bootstrap text-* Utility-Farben (globaler Kontrastfix) ----- */
.theme-dark .text-danger {
    color: #f87171 !important;
}
.theme-dark .text-warning {
    color: #fbbf24 !important;
}
.theme-dark .text-primary {
    color: #818cf8 !important;
}
.theme-dark .text-success {
    color: #4ade80 !important;
}
.theme-dark .text-info {
    color: #22d3ee !important;
}

/* ----- Dark: btn-outline-success / btn-success (fehlte komplett) ----- */
.theme-dark .btn-outline-success {
    color: #4ade80;
    border-color: #4ade80;
}
.theme-dark .btn-outline-success:hover,
.theme-dark .btn-outline-success:focus {
    background-color: #4ade80;
    border-color: #4ade80;
    color: #0f172a;
}
.theme-dark .btn-success {
    background-color: #4ade80;
    border-color: #4ade80;
    color: #0f172a;
}
.theme-dark .btn-success:hover,
.theme-dark .btn-success:focus {
    background-color: #22c55e;
    border-color: #22c55e;
    color: #0f172a;
}

/* ----- Dark: Badges ----- */
.theme-dark .badge.bg-warning.text-dark {
    color: #1e293b !important;
    background-color: #fbbf24 !important;
}
.theme-dark .badge.bg-success {
    background-color: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

/* ----- Dark: Tagesmappe Zeitraum-Tabs ----- */
.theme-dark .reminder-range-tabs .btn-outline-secondary.active {
    background-color: #475569;
    border-color: #475569;
    color: #e2e8f0;
}
.theme-dark .reminder-range-tabs .btn-outline-danger.active {
    background-color: #f87171;
    border-color: #f87171;
    color: #0f172a;
}

/* ----- Dark: Ueberfaellige Zeilen (Listenansicht) ----- */
.theme-dark .reminder-row-overdue {
    background-color: rgba(248, 113, 113, 0.12) !important;
}
.theme-dark .reminder-row-overdue:hover {
    background-color: rgba(248, 113, 113, 0.18) !important;
}

/* ----- Dark: Kachelansicht ----- */
.theme-dark .reminder-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.theme-dark .reminder-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.theme-dark .reminder-card.overdue {
    background-color: rgba(248, 113, 113, 0.1) !important;
}

/* ----- Dark: Farb-Picker aktiv ----- */
.theme-dark .reminder-color-btn.active {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.5);
    border-color: #e2e8f0;
}


/* ============================================================
   THEME 3: NATUR (Waldgruen / Erdtoene)
   Warme Erdtoene, olivgruene Sidebar, Serif-Ueberschriften,
   weiche Rundungen, naturverbundenes Gefuehl
   ============================================================ */
.theme-nature {
    --dva-primary: #059669;
    --dva-primary-dark: #047857;
    --dva-primary-light: #d1fae5;
    --dva-primary-rgb: 5, 150, 105;
    --dva-sidebar-bg: #1a2e1a;
    --dva-sidebar-hover: #2d4a2d;
    --dva-sidebar-text: #a7c4a0;
    --dva-sidebar-text-active: #ecfdf5;
    --dva-sidebar-width: 260px;
    --dva-sidebar-border: rgba(167, 196, 160, 0.15);
    --dva-sidebar-brand: #ecfdf5;
    --dva-topbar-height: 56px;
    --dva-topbar-bg: #fefdf8;
    --dva-content-bg: #f5f0e8;
    --dva-card-bg: #fefdf8;
    --dva-card-radius: 0.75rem;
    --dva-card-shadow: 0 1px 4px rgba(120, 100, 60, 0.08);
    --dva-border: #d6cbb2;
    --dva-text: #3d3322;
    --dva-text-muted: #7c6f5a;
    --dva-table-header-bg: #f5f0e8;
    --dva-table-hover-bg: #f0ead9;
    --dva-input-bg: #fefdf8;
    --dva-input-border: #d6cbb2;
    --dva-input-text: #3d3322;
    --dva-autocomplete-bg: #fefdf8;
    --dva-autocomplete-hover: #f5f0e8;
    --dva-mobile-nav-bg: #fefdf8;
    --dva-overlay-bg: rgba(61, 51, 34, 0.5);
    --dva-success: #16a34a;
    --dva-warning: #ca8a04;
    --dva-danger: #dc2626;
    --dva-info: #0e7490;
    --dva-font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dva-font-heading: Georgia, "Times New Roman", serif;
    --dva-heading-weight: 700;
    --dva-body-size: 0.9rem;
    --dva-login-bg: linear-gradient(135deg, #1a2e1a 0%, #2d4a2d 50%, #1a2e1a 100%);
    --dva-badge-bg: #6b5e48;
    --dva-badge-text: #ffffff;
    --dva-badge-outline-bg: transparent;
    --dva-badge-outline-text: #6b5e48;
    --dva-badge-outline-border: #b8a88e;
    --dva-login-card-bg: #fefdf8;
    --dva-login-text: #3d3322;
}

/* Natur: Spezifische Overrides */
.theme-nature .form-control,
.theme-nature .form-select {
    border-color: var(--dva-input-border);
    background-color: var(--dva-input-bg);
}
.theme-nature .form-control:focus,
.theme-nature .form-select:focus {
    border-color: var(--dva-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--dva-primary-rgb), 0.2);
}
.theme-nature .btn-primary {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
}
.theme-nature .btn-primary:hover {
    background-color: var(--dva-primary-dark);
    border-color: var(--dva-primary-dark);
}
.theme-nature .btn-outline-primary {
    color: var(--dva-primary);
    border-color: var(--dva-primary);
}
.theme-nature .btn-outline-primary:hover {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #fff;
}
.theme-nature .sidebar-nav-item.active {
    border-left-color: #4ade80;
}
.theme-nature .sidebar-brand i {
    color: #4ade80;
}
.theme-nature .kpi-card .kpi-icon.bg-primary-light {
    background: #d1fae5;
    color: #059669;
}
.theme-nature .nav-tabs .nav-link.active {
    background-color: var(--dva-card-bg);
    color: var(--dva-text);
}
.theme-nature .table {
    --bs-table-hover-bg: var(--dva-table-hover-bg);
}
.theme-nature a:not(.btn):not(.sidebar-nav-item):not(.sidebar-brand):not(.topbar-breadcrumb-link):not(.topbar-back):not(.topbar-back-desktop):not(.mobile-nav-item):not(.nav-link):not(.ef-betreff):not(.zg-weg) {
    color: var(--dva-primary);
}
.theme-nature .btn-outline-secondary {
    color: #5c5242;
    border-color: #a89a80;
}
.theme-nature .btn-outline-secondary:hover {
    background-color: #5c5242;
    border-color: #5c5242;
    color: #fefdf8;
}


/* ============================================================
   THEME 4: OZEAN (Marine / Blauweiss)
   Helle, weisse Sidebar mit blauen Akzenten,
   Gradient-Topbar, moderne Typografie, starke Schatten,
   frisches professionelles Gefuehl
   ============================================================ */
.theme-ocean {
    --dva-primary: #0369a1;
    --dva-primary-dark: #075985;
    --dva-primary-light: #e0f2fe;
    --dva-primary-rgb: 3, 105, 161;
    --dva-sidebar-bg: #ffffff;
    --dva-sidebar-hover: #f0f9ff;
    --dva-sidebar-text: #64748b;
    --dva-sidebar-text-active: #0369a1;
    --dva-sidebar-width: 250px;
    --dva-sidebar-border: #e0f2fe;
    --dva-sidebar-brand: #0369a1;
    --dva-topbar-height: 60px;
    --dva-topbar-bg: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    --dva-content-bg: #f0f9ff;
    --dva-card-bg: #ffffff;
    --dva-card-radius: 0.75rem;
    --dva-card-shadow: 0 1px 3px rgba(3, 105, 161, 0.06), 0 4px 12px rgba(3, 105, 161, 0.04);
    --dva-border: #bae6fd;
    --dva-text: #0c4a6e;
    --dva-text-muted: #64748b;
    --dva-table-header-bg: #f0f9ff;
    --dva-table-hover-bg: #e0f2fe;
    --dva-input-bg: #ffffff;
    --dva-input-border: #bae6fd;
    --dva-input-text: #0c4a6e;
    --dva-autocomplete-bg: #ffffff;
    --dva-autocomplete-hover: #f0f9ff;
    --dva-mobile-nav-bg: #ffffff;
    --dva-overlay-bg: rgba(12, 74, 110, 0.4);
    --dva-success: #059669;
    --dva-warning: #d97706;
    --dva-danger: #dc2626;
    --dva-info: #0891b2;
    --dva-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dva-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dva-heading-weight: 700;
    --dva-body-size: 0.9rem;
    --dva-login-bg: linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #0369a1 100%);
    --dva-badge-bg: #475569;
    --dva-badge-text: #ffffff;
    --dva-badge-outline-bg: transparent;
    --dva-badge-outline-text: #475569;
    --dva-badge-outline-border: #94a3b8;
    --dva-login-card-bg: #ffffff;
    --dva-login-text: #0c4a6e;
}

/* Ozean: Sidebar bekommt einen linken blauen Rand-Streifen */
.theme-ocean .app-sidebar {
    border-right: 1px solid #e0f2fe;
    box-shadow: 2px 0 8px rgba(3, 105, 161, 0.06);
}
.theme-ocean .sidebar-nav-item {
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    margin-right: 0.5rem;
}
.theme-ocean .sidebar-nav-item:hover {
    background: #f0f9ff;
    color: #0369a1;
}
.theme-ocean .sidebar-nav-item.active {
    background: #e0f2fe;
    color: #0369a1;
    border-left-color: #0369a1;
    font-weight: 600;
}
.theme-ocean .sidebar-brand {
    font-weight: 700;
}
.theme-ocean .sidebar-brand i {
    color: #0ea5e9;
}

/* Ozean: Topbar mit Gradient – Texte weiss */
.theme-ocean .app-topbar {
    background: var(--dva-topbar-bg);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(3, 105, 161, 0.12);
}
.theme-ocean .topbar-toggle {
    color: #ffffff;
}
.theme-ocean .topbar-title {
    color: #ffffff;
}
.theme-ocean .topbar-back {
    color: #ffffff;
}
.theme-ocean .topbar-back:hover {
    color: #e0f2fe;
}
.theme-ocean .topbar-back-desktop {
    color: #e0f2fe;
}
.theme-ocean .topbar-back-desktop:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.theme-ocean .topbar-breadcrumb-link {
    color: #e0f2fe;
}
.theme-ocean .topbar-breadcrumb-link:hover {
    color: #ffffff;
}
.theme-ocean .topbar-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
}
.theme-ocean .topbar-breadcrumb-current {
    color: #ffffff;
}
.theme-ocean .topbar-actions .btn-link {
    color: #ffffff !important;
}
.theme-ocean .topbar-actions .dropdown-toggle {
    color: #ffffff !important;
}

/* Ozean: Formulare & Buttons */
.theme-ocean .form-control,
.theme-ocean .form-select {
    border-color: var(--dva-input-border);
}
.theme-ocean .form-control:focus,
.theme-ocean .form-select:focus {
    border-color: var(--dva-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--dva-primary-rgb), 0.15);
}
.theme-ocean .btn-primary {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
}
.theme-ocean .btn-primary:hover {
    background-color: var(--dva-primary-dark);
    border-color: var(--dva-primary-dark);
}
.theme-ocean .btn-outline-primary {
    color: var(--dva-primary);
    border-color: var(--dva-primary);
}
.theme-ocean .btn-outline-primary:hover {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #fff;
}
.theme-ocean .btn-outline-secondary {
    color: #475569;
    border-color: #94a3b8;
}
.theme-ocean .btn-outline-secondary:hover {
    background-color: #475569;
    border-color: #475569;
    color: #fff;
}
.theme-ocean .btn-outline-danger {
    color: #dc2626;
    border-color: #dc2626;
}
.theme-ocean .btn-outline-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.theme-ocean .kpi-card .kpi-icon.bg-primary-light {
    background: #e0f2fe;
    color: #0369a1;
}
.theme-ocean .kpi-card {
    border-radius: 0.75rem;
}
.theme-ocean a:not(.btn):not(.sidebar-nav-item):not(.sidebar-brand):not(.topbar-breadcrumb-link):not(.topbar-back):not(.topbar-back-desktop):not(.mobile-nav-item):not(.nav-link):not(.ef-betreff):not(.zg-weg) {
    color: var(--dva-primary);
}
.theme-ocean .nav-tabs .nav-link.active {
    border-bottom-color: var(--dva-card-bg);
}
.theme-ocean .page-header h1 {
    letter-spacing: -0.01em;
}
.theme-ocean .sidebar-footer .sidebar-user {
    color: #64748b;
}
.theme-ocean .mobile-nav-item.active {
    color: #0369a1;
}
.theme-ocean .table {
    --bs-table-hover-bg: var(--dva-table-hover-bg);
}

/* ===== Wiedervorlagen (Reminder) ===== */

/* Bell Icon in Topbar */
.reminder-badge {
    font-size: 0.6rem !important;
    min-width: 1.2em;
    padding: 0.15em 0.4em;
}

/* Bell Dropdown */
.reminder-dropdown {
    padding: 0;
}
.reminder-dropdown .dropdown-header {
    background: var(--dva-table-header-bg);
    border-bottom: 1px solid var(--dva-border);
    font-weight: 600;
    color: var(--dva-text);
}
.reminder-due-item {
    transition: opacity 0.3s ease;
}
.reminder-due-item:last-child {
    border-bottom: none !important;
}
.reminder-due-item:hover {
    background: var(--dva-table-hover-bg, #f8fafc);
}

/* Reminder Buttons */
.reminder-open-btn {
    white-space: nowrap;
}

/* Schnellauswahl */
.reminder-quick-btn {
    font-size: 0.8rem;
}

/* Farbpunkt */
.reminder-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Farb-Picker Buttons im Modal */
.reminder-color-btn {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    padding: 0;
}
.reminder-color-btn:hover {
    transform: scale(1.15);
}
.reminder-color-btn.active {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
    border-color: #fff;
    transform: scale(1.15);
}

/* Tagesmappe: Zeitraum-Tabs */
.reminder-range-tabs .btn-group {
    gap: 2px;
}
.reminder-range-tabs .btn {
    font-size: 0.8rem;
    border-radius: 0.375rem !important;
}
.reminder-range-tabs .btn.active {
    font-weight: 600;
}

/* Tagesmappe: table-responsive Dropdown-Fix */
/* Bootstrap .table-responsive setzt overflow-x:auto, was Dropdowns abschneidet.
   Nur in der Tagesmappe-Tabelle auf Desktop overflow sichtbar lassen. */
@media (min-width: 768px) {
    .reminder-list-card .table-responsive {
        overflow: visible;
    }
}

/* Tagesmappe: Listenansicht */
.reminder-row-overdue {
    background-color: rgba(220, 38, 38, 0.05) !important;
}
.reminder-row-overdue:hover {
    background-color: rgba(220, 38, 38, 0.1) !important;
}

/* Tagesmappe: Bereichs-Ueberschrift */
.tagesmappe-section-header {
    border-bottom: 2px solid var(--dva-border);
    padding-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* Tagesmappe: Kachelansicht */
.reminder-card {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-left: 4px solid #2563eb;
    border-radius: var(--dva-card-radius);
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, opacity 0.3s ease;
}
.reminder-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.reminder-card.overdue {
    background-color: rgba(220, 38, 38, 0.04);
}
.reminder-card.done {
    opacity: 0.6;
}
.reminder-card.done:hover {
    opacity: 0.85;
}

/* Theme Ocean: Topbar Bell */
.theme-ocean #reminderBellDropdown .btn-link {
    color: var(--dva-topbar-text, #e2e8f0);
}
.theme-ocean .reminder-dropdown {
    background: var(--dva-card-bg);
    border-color: var(--dva-border);
}
.theme-ocean .reminder-dropdown .dropdown-header {
    background: var(--dva-table-header-bg);
    color: var(--dva-text);
}
.theme-ocean .reminder-due-item a {
    color: var(--dva-text);
}

/* Theme Ocean: Tagesmappe */
.theme-ocean .reminder-card {
    background: var(--dva-card-bg);
    border-color: var(--dva-border);
}
.theme-ocean .reminder-color-btn.active {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.4);
}

/* ===== File List Table ===== */
.file-list-table {
    font-size: 0.875rem;
}
.file-list-table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dva-text-muted);
}
.file-list-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

/* ===== File Preview Grid ===== */
.file-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.file-preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem;
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    background: var(--dva-card-bg);
    transition: border-color 0.15s;
}
.file-preview-item:hover {
    border-color: var(--dva-primary);
}
.file-preview-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dva-bg);
    border: 1px solid var(--dva-border);
}
.file-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
.file-thumb-icon {
    font-size: 1.5rem;
    color: var(--dva-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.file-thumb-icon.file-thumb-pdf {
    color: #dc3545;
    text-decoration: none;
}
.file-thumb-icon.file-thumb-pdf:hover {
    color: #a71d2a;
}
.file-preview-info {
    flex: 1;
    min-width: 0;
}
.file-preview-name {
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-preview-meta {
    font-size: 0.75rem;
    color: var(--dva-text-muted);
    margin-top: 2px;
}
.file-preview-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ===== File Lightbox ===== */
.file-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}
.file-lightbox-overlay.show {
    opacity: 1;
}
.file-lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}
.file-lightbox-caption {
    color: #fff;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    text-align: center;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #fff;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
    padding: 0.5rem;
    line-height: 1;
}
.file-lightbox-close:hover {
    opacity: 1;
}

/* Theme Ocean: File Preview */
.theme-ocean .file-preview-item {
    background: var(--dva-card-bg);
    border-color: var(--dva-border);
}
.theme-ocean .file-preview-thumb {
    background: var(--dva-bg);
    border-color: var(--dva-border);
}

/* ===== Drag & Drop Upload Zone ===== */
.dva-dropzone {
    border: 2px dashed var(--dva-border);
    border-radius: 0.5rem;
    padding: 1.5rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    margin-bottom: 1rem;
}
.dva-dropzone:hover,
.dva-dropzone.is-dragover {
    border-color: var(--bs-primary);
    background-color: rgba(13, 110, 253, 0.04);
}
.dva-dropzone-content i {
    font-size: 2rem;
    color: var(--bs-secondary);
    display: block;
    margin-bottom: 0.25rem;
}
.dva-dropzone.is-dragover .dva-dropzone-content i {
    color: var(--bs-primary);
}
.dva-dropzone-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.dva-dropzone-feedback {
    font-size: 0.875rem;
}
.dva-dropzone-feedback.is-error {
    color: var(--bs-danger);
}
.dva-dropzone-feedback.is-success {
    color: var(--bs-success);
}

/* Seiten-Overlay beim Drag ueber den Browser */
.dva-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(13, 110, 253, 0.1);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dva-drop-overlay.is-active {
    pointer-events: auto;
}
.dva-drop-overlay-content {
    background: var(--dva-card-bg, #fff);
    border: 3px dashed var(--bs-primary);
    border-radius: 1rem;
    padding: 3rem 4rem;
    text-align: center;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
}
.dva-drop-overlay-content i {
    font-size: 3rem;
    color: var(--bs-primary);
    display: block;
    margin-bottom: 0.5rem;
}

/* Dark Theme */
.theme-dark .dva-dropzone:hover,
.theme-dark .dva-dropzone.is-dragover {
    background-color: rgba(13, 110, 253, 0.08);
}
.theme-dark .dva-drop-overlay {
    background: rgba(13, 110, 253, 0.15);
}
.theme-dark .dva-drop-overlay-content {
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
}

/* Ocean Theme */
.theme-ocean .dva-dropzone:hover,
.theme-ocean .dva-dropzone.is-dragover {
    background-color: rgba(13, 110, 253, 0.06);
}

/* ===== Quill Editor – Vergroesserbarer Bereich ===== */
.ql-editor-resizable.ql-container.ql-snow {
    height: 200px;          /* Quill-Default height:100% ueberschreiben */
    min-height: 120px;
    max-height: 80vh;
    resize: vertical;
    overflow: hidden;
}
.ql-editor-resizable .ql-editor {
    height: 100%;
    overflow-y: auto;
}

/* ===== Quill Editor – Bild-Groessen-Toolbar ===== */
.ql-image-toolbar {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    border-radius: 0.375rem;
    padding: 3px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 0.75rem;
}
.ql-image-toolbar button {
    border: 1px solid var(--dva-border, #e2e8f0);
    background: var(--dva-card-bg, #fff);
    color: var(--dva-text, #1e293b);
    border-radius: 0.25rem;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
}
.ql-image-toolbar button:hover {
    background: var(--bs-primary, #2563eb);
    color: #fff;
    border-color: var(--bs-primary, #2563eb);
}
.ql-image-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--dva-border, #e2e8f0);
    margin: 0 4px;
}
.ql-image-toolbar-width {
    width: 65px;
    border: 1px solid var(--dva-border, #e2e8f0);
    border-radius: 0.25rem;
    padding: 2px 6px;
    font-size: 0.75rem;
    background: var(--dva-input-bg, #fff);
    color: var(--dva-text, #1e293b);
}
.ql-image-toolbar-width:focus {
    outline: none;
    border-color: var(--bs-primary, #2563eb);
}
.ql-image-toolbar-unit {
    font-size: 0.7rem;
    color: var(--dva-text-muted, #64748b);
}

/* Ausgewaehltes Bild hervorheben */
.ql-editor img.ql-image-selected {
    outline: 2px solid var(--bs-primary, #2563eb);
    outline-offset: 2px;
}

/* Bilder im Editor responsiv machen */
.ql-editor img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

/* Dark Theme Anpassungen */
.theme-dark .ql-image-toolbar {
    background: var(--dva-card-bg);
    border-color: var(--dva-border);
}
.theme-dark .ql-image-toolbar button {
    background: var(--dva-card-bg);
    color: var(--dva-text);
    border-color: var(--dva-border);
}
.theme-dark .ql-image-toolbar-width {
    background: var(--dva-input-bg);
    color: var(--dva-text);
    border-color: var(--dva-border);
}

/* Dark: E-Mail Drag & Drop Panel */
.theme-dark .email-drag-panel {
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
}
.theme-dark .email-drag-target.is-hover {
    border-color: var(--dva-primary);
    background-color: rgba(37, 99, 235, 0.15);
}

/* ===== Checkliste (Teilaufgaben) ===== */
.checklist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--dva-border);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item .form-check {
    flex: 1;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.checklist-item .checklist-title {
    cursor: default;
    line-height: 1.4;
}
.checklist-actions {
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    gap: 0;
    flex-shrink: 0;
}
.checklist-item:hover .checklist-actions { opacity: 1; }
.checklist-actions .btn {
    padding: 0 0.25rem;
    line-height: 1;
}

/* Inline-Edit Input */
.checklist-edit-input {
    border: 1px solid var(--bs-primary, #2563eb);
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: inherit;
    width: 100%;
    background: var(--dva-input-bg, #fff);
    color: var(--dva-input-text, #1e293b);
}
.checklist-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(var(--dva-primary-rgb, 37, 99, 235), 0.25);
}

/* ===== Tag-Toggle (Formular) ===== */
.tag-toggle {
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.tag-toggle:has(input:checked) {
    color: #fff !important;
}
.tag-toggle:has(input:checked).btn-outline-primary   { background: var(--bs-primary);   border-color: var(--bs-primary); }
.tag-toggle:has(input:checked).btn-outline-success   { background: var(--bs-success);   border-color: var(--bs-success); }
.tag-toggle:has(input:checked).btn-outline-warning   { background: var(--bs-warning);   border-color: var(--bs-warning); color: #000 !important; }
.tag-toggle:has(input:checked).btn-outline-danger    { background: var(--bs-danger);    border-color: var(--bs-danger); }
.tag-toggle:has(input:checked).btn-outline-info      { background: var(--bs-info);      border-color: var(--bs-info); }
.tag-toggle:has(input:checked).btn-outline-secondary { background: var(--bs-secondary); border-color: var(--bs-secondary); }
.tag-toggle:has(input:checked).btn-outline-dark      { background: var(--bs-dark);      border-color: var(--bs-dark); }

/* Small badge variant */
.badge-sm {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
    font-weight: 500;
}

/* ===== Gruppen-Header (Aufgabenliste) ===== */
.task-group-header {
    cursor: pointer;
    user-select: none;
}
.task-group-header td {
    background: var(--dva-table-header-bg, #f8fafc);
    border-bottom: 2px solid var(--dva-border);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}
.task-group-header:hover td {
    background: var(--dva-table-hover-bg, #f1f5f9);
}
.task-group-header i {
    font-size: 0.75rem;
    transition: transform 0.15s;
}

/* Tag-Badge auf Detailseite: X-Button */
.tag-badge .btn-close {
    vertical-align: middle;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}
.tag-badge .btn-close:hover {
    opacity: 1;
}

/* ===== Klappbare Sektionen (Projekt-Uebersicht) ===== */
.section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}
.section-toggle:hover {
    color: var(--dva-primary);
}
.section-chevron {
    font-size: 0.7em;
    transition: transform 0.2s;
    flex-shrink: 0;
}

/* ===== File Lock Indicators ===== */
.file-lock-badge {
    font-size: 0.7em;
    white-space: nowrap;
}
.file-preview-item.file-locked {
    border-left: 3px solid var(--bs-warning);
}
.file-preview-item.file-locked-by-me {
    border-left: 3px solid var(--bs-success);
}

/* ================================================================
   Kompaktansicht (Standalone Tagesmappe)
   ================================================================ */
.compact-body {
    font-size: 13px;
    line-height: 1.4;
    background: var(--dva-body-bg, #f8fafc);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--dva-sidebar-bg, #1e293b);
    color: #fff;
    flex-shrink: 0;
    height: 38px;
    -webkit-app-region: drag;
}
.compact-header a, .compact-header button { -webkit-app-region: no-drag; }
.compact-header .btn-link { color: rgba(255,255,255,.7); font-size: 15px; }
.compact-header .btn-link:hover { color: #fff; }
.compact-header-title {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
}
.compact-content {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
    scroll-behavior: smooth;
}
.compact-footer {
    flex-shrink: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: var(--dva-card-bg, #fff);
    border-top: 1px solid var(--dva-border, #e2e8f0);
}
/* Zeitraum-Tabs */
.compact-range-tabs { padding: 0; }
.compact-tab {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--dva-text-muted, #64748b);
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.compact-tab:hover { background: var(--dva-hover-bg, #f1f5f9); color: var(--dva-text, #1e293b); text-decoration: none; }
.compact-tab.active { background: var(--dva-primary, #2563eb); color: #fff; border-color: var(--dva-primary, #2563eb); }
.compact-tab.overdue:not(.active) { color: var(--bs-danger); border-color: rgba(220,38,38,.3); }
.compact-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    background: var(--bs-danger);
    color: #fff;
    padding: 0 4px;
}
/* Filter */
.compact-filter-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.compact-filter-toggle {
    background: none;
    border: 1px solid var(--dva-border, #e2e8f0);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--dva-text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.compact-filter-toggle:hover { background: var(--dva-hover-bg, #f1f5f9); }
.compact-count { font-size: 11px; }
.compact-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.compact-filter-form .form-select-sm {
    font-size: 11px;
    padding: 2px 24px 2px 6px;
    flex: 1 1 0;
    min-width: 0;
}
/* Sektionen */
.compact-section-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--dva-text, #1e293b);
    padding: 4px 0;
    border-bottom: 1px solid var(--dva-border, #e2e8f0);
    margin-bottom: 4px;
}
.compact-group-header {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 0 2px;
}
/* Karten */
.compact-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 3px;
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    border-left: 3px solid #2563eb;
    border-radius: 6px;
    transition: box-shadow .15s, opacity .2s;
}
.compact-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.compact-card.overdue { background-color: rgba(220,38,38,.04); }
.compact-card.done { opacity: .55; }
.compact-card.done:hover { opacity: .8; }
.compact-card.task { cursor: pointer; }
.compact-card.task:hover { text-decoration: none; color: inherit; }
.compact-card-main { flex: 1 1 0; min-width: 0; }
.compact-card-top {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.compact-card-top i { font-size: 11px; flex-shrink: 0; }
.compact-card-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dva-text, #1e293b);
    text-decoration: none;
}
.compact-card-label:hover { text-decoration: underline; }
.compact-card-meta {
    display: flex;
    gap: 8px;
    font-size: 10.5px;
    margin-top: 1px;
}
.compact-card-meta i { font-size: 10px; }
.compact-card-note {
    font-size: 11px;
    color: var(--dva-text-muted, #64748b);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compact-card-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.compact-card-actions .btn-sm {
    padding: 1px 4px;
    font-size: 11px;
    line-height: 1.3;
}
.compact-empty {
    margin-top: 2rem;
}
/* Refresh-Animation */
.compact-refresh-btn.spinning i {
    animation: compact-spin .6s linear;
}
@keyframes compact-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 3-Punkte-Menue */
.three-dot-menu { flex-shrink: 0; }
.three-dot-btn {
    font-size: 14px;
    line-height: 1;
    opacity: .5;
    transition: opacity .15s;
}
.three-dot-btn:hover { opacity: 1; }
.compact-card:hover .three-dot-btn,
tr:hover .three-dot-btn { opacity: .8; }
.three-dot-menu .dropdown-menu { font-size: 12px; min-width: 180px; }
.three-dot-menu .dropdown-item { padding: 4px 12px; }
.three-dot-menu .dropdown-header { font-size: 10px; padding: 2px 12px; }
.three-dot-menu .dropdown-divider { margin: 2px 0; }
/* Checkbox in Karten/Tabelle */
.select-cb, .select-all-cb {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 2px;
}
/* Auswahl-Highlight */
.compact-card.selected, tr.selected {
    background-color: rgba(37, 99, 235, 0.06) !important;
    border-color: rgba(37, 99, 235, 0.25);
}
/* Datum rechts in Karten-Zeile */
.compact-card-date {
    font-size: 10.5px;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}
/* Bulk-Aktionsleiste */
.bulk-action-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-primary, #2563eb);
    border-radius: 8px;
    padding: 6px 12px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}
.bulk-action-bar .btn-sm { font-size: 12px; padding: 2px 8px; }
.bulk-count { font-size: 12px; color: var(--dva-primary, #2563eb); }
/* Kompakte Karten auch in normaler Tagesmappe */
.reminder-cards-grid .compact-card { margin-bottom: 3px; }
/* Dark-Theme Anpassungen */
.theme-dark .compact-header { background: #0f172a; }
.theme-dark .compact-card { background: var(--dva-card-bg); border-color: var(--dva-border); }
.theme-dark .compact-tab { background: var(--dva-card-bg); border-color: var(--dva-border); }
.theme-dark .compact-filter-toggle { border-color: var(--dva-border); }

/* Ocean-Theme */
.theme-ocean .compact-header { background: #0c4a6e; }

/* =====================================================================
   KI-/AI-Kennzeichnung — einheitliche Optik für alle KI-Funktionen.
   Violett-Akzent + bi-stars signalisieren durchgängig „von der KI".
   ===================================================================== */
:root { --dva-ai: #7c3aed; --dva-ai-bg: rgba(124, 58, 237, 0.10); --dva-ai-border: rgba(124, 58, 237, 0.35); }
.theme-dark, .theme-ocean { --dva-ai: #a78bfa; --dva-ai-bg: rgba(167, 139, 250, 0.16); --dva-ai-border: rgba(167, 139, 250, 0.40); }

/* Button-Variante für KI-Aktionen */
.btn.ai-btn {
    color: var(--dva-ai);
    border: 1px solid var(--dva-ai);
    background-color: transparent;
}
.btn.ai-btn:hover, .btn.ai-btn:focus { color: #fff; background-color: var(--dva-ai); border-color: var(--dva-ai); }

/* Kleiner „KI"-Chip zum Kennzeichnen von Feldern/Antworten */
.ai-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 600; line-height: 1;
    padding: .18rem .45rem; border-radius: 999px;
    background: var(--dva-ai-bg); color: var(--dva-ai);
    border: 1px solid var(--dva-ai-border);
}

/* Panel/Karte, deren Inhalt KI-bezogen ist (linker Akzentbalken) */
.ai-panel { border-left: 4px solid var(--dva-ai) !important; }

/* Ergebnis-Container einer KI-Antwort (nach JSON-Einlesen) */
.ai-result {
    border: 1px solid var(--dva-ai-border);
    border-left: 4px solid var(--dva-ai);
    border-radius: 8px;
    background: var(--dva-ai-bg);
}
.ai-result-header {
    display: flex; align-items: center; gap: .4rem;
    font-weight: 600; color: var(--dva-ai);
    padding: .6rem .8rem; border-bottom: 1px solid var(--dva-ai-border);
}
.ai-result-body { padding: .8rem; }

/* =====================================================================
   Arbeitslisten (konfigurierbare Rasteransicht)
   ===================================================================== */

/* Waagerecht scrollender Tabellen-Container mit fixiertem Kopf */
.grid-scroll {
    max-height: calc(100vh - 22rem);
    min-height: 18rem;
    overflow: auto;
}
.grid-table {
    font-size: .875rem;
    white-space: nowrap;
}
.grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--dva-table-header-bg);
    border-bottom: 2px solid var(--dva-border);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--dva-text-muted);
}
.grid-table th.grid-th { cursor: pointer; user-select: none; }
.grid-table th.grid-th:hover { color: var(--dva-primary); }
.grid-sort-icon { color: var(--dva-primary); }
.grid-sort-rank { font-size: .65rem; color: var(--dva-primary); }
.grid-lock-icon { font-size: .7rem; opacity: .45; margin-left: .2rem; }

.grid-table td { vertical-align: middle; }
.grid-table td.grid-cell { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; }
.grid-empty { color: var(--dva-text-muted); }

/* Gruppen-Kopfzeile */
.grid-group-row td {
    background: var(--dva-primary-light);
    font-size: .82rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
    position: sticky;
    left: 0;
}

/* Auswahl- und Aktionsspalte */
.grid-col-select { width: 2.2rem; }
.grid-col-open   { width: 2.6rem; }

/* Bearbeitungsmodus: bearbeitbare Zellen sichtbar machen */
.grid-editing .grid-cell:not(.grid-cell-locked) {
    cursor: cell;
    box-shadow: inset 0 -1px 0 rgba(var(--dva-primary-rgb), .25);
}
.grid-editing .grid-cell:not(.grid-cell-locked):hover {
    background: rgba(var(--dva-primary-rgb), .06);
}
.grid-editing .grid-cell-locked { background: rgba(0, 0, 0, .02); }

.grid-cell-editing { padding: .1rem .2rem !important; }
.grid-cell-editor  { width: 100%; min-width: 8rem; }
.grid-cell-saving  { opacity: .55; }
.grid-cell-saved   { background: rgba(25, 135, 84, .14) !important; transition: background .6s ease; }
.grid-cell-error   { background: rgba(220, 53, 69, .16) !important; }

/* Spaltenauswahl im Modal */
.grid-col-picker {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    padding: .35rem;
}
.grid-col-group {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--dva-text-muted);
    padding: .45rem .35rem .2rem;
}
.grid-col-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .25rem .35rem;
    border-radius: .25rem;
}
.grid-col-item:hover { background: var(--dva-table-hover-bg); }
.grid-col-name { font-size: .85rem; }
.grid-col-btns { display: flex; gap: .15rem; flex: 0 0 auto; }

/* Kurzmeldung oben rechts */
.grid-toast {
    position: fixed;
    top: calc(var(--dva-topbar-height) + .75rem);
    right: 1rem;
    z-index: 1080;
    max-width: 26rem;
    padding: .6rem .9rem;
    border-radius: var(--dva-card-radius);
    font-size: .85rem;
    color: #fff;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.grid-toast-show  { opacity: 1; transform: translateY(0); }
.grid-toast-ok    { background: #198754; }
.grid-toast-error { background: #dc3545; }

@media (max-width: 767.98px) {
    .grid-scroll { max-height: calc(100vh - 26rem); }
}

/* =====================================================================
   Merkmale (Tags an Firmen, Ansprechpartnern, Vorgaengen)
   ===================================================================== */

.merkmal-chip {
    font-weight: 500;
    font-size: .75rem;
    padding: .3em .55em;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Entfernen-Knopf im Chip */
.merkmal-remove {
    background: none;
    border: 0;
    color: inherit;
    opacity: .65;
    font-size: 1.05em;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.merkmal-remove:hover { opacity: 1; }

.merkmal-box .merkmal-list { min-height: 1.75rem; }
.merkmal-add-btn { line-height: 1.4; }

/* Vorschlagsliste beim Tippen */
.merkmal-input-wrap .merkmal-input { max-width: 24rem; }
.merkmal-suggestions {
    max-height: 15rem;
    overflow-y: auto;
    max-width: 24rem;
}
.merkmal-suggestions .dropdown-item { cursor: pointer; }
.merkmal-suggestions .dropdown-item.active {
    background-color: var(--dva-primary);
    color: #fff;
}
.merkmal-suggestion-new { border-top: 1px solid var(--dva-border); }

/* Chips in Tabellenzellen etwas kompakter */
td .merkmal-chip { font-size: .7rem; margin-right: .15rem; }

/* =====================================================================
   Bedienungshilfe (Hilfe-Center und Hilfe-Fenster)
   ===================================================================== */

.hilfe-panel { width: 30rem; max-width: 92vw; }
.hilfe-panel .offcanvas-body { overflow-y: auto; }
.hilfe-panel-inhalt { font-size: .9rem; }
.hilfe-panel .offcanvas-footer { background: var(--dva-table-header-bg); }

/* Artikeltext */
.hilfe-artikel p { line-height: 1.65; }
.hilfe-artikel .hilfe-h {
    margin-top: 1.4rem;
    margin-bottom: .5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dva-text);
}
.hilfe-artikel .hilfe-h:first-child { margin-top: 0; }
.hilfe-artikel .hilfe-liste { padding-left: 1.15rem; margin-bottom: .9rem; }
.hilfe-artikel .hilfe-liste li { margin-bottom: .3rem; line-height: 1.55; }
.hilfe-artikel code {
    background: var(--dva-table-header-bg);
    border: 1px solid var(--dva-border);
    border-radius: .25rem;
    padding: .05rem .3rem;
    font-size: .85em;
}
.hilfe-artikel .hilfe-code {
    background: var(--dva-table-header-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    padding: .6rem .8rem;
    overflow-x: auto;
}
.hilfe-artikel table { width: 100%; margin-bottom: 1rem; }

/* Im schmalen Panel etwas kompakter */
.hilfe-artikel-panel { font-size: .86rem; }
.hilfe-artikel-panel .hilfe-h { font-size: .95rem; margin-top: 1rem; }

@media (max-width: 575.98px) {
    .hilfe-panel { width: 100vw; }
}

/* Einfache Tabellen in Hilfe-Artikeln (aus | … | im Markdown) */
.hilfe-tabellenzeile {
    display: flex;
    gap: .75rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--dva-border);
    font-size: .88rem;
}
.hilfe-tabellenzeile .hilfe-zelle { flex: 1 1 0; }
.hilfe-tabellenzeile .hilfe-zelle-erste { flex: 0 0 9rem; font-weight: 500; }
@media (max-width: 575.98px) {
    .hilfe-tabellenzeile { flex-direction: column; gap: .15rem; }
    .hilfe-tabellenzeile .hilfe-zelle-erste { flex: none; }
}

/* =====================================================================
   Vorgangsreife — Ring („Die sieben Fragen")
   Bewusst nur drei Farbstufen: eine feinere Abstufung suggeriert eine
   Genauigkeit, die sieben binaere Kriterien nicht haben.
   ===================================================================== */
.reife-ring {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    line-height: 0;
}
.reife-ring .reife-ring-track {
    stroke: var(--dva-border);
}
.reife-ring .reife-ring-value {
    /* Der Ring waechst beim Laden auf seinen Wert — dieselbe Geste wie beim
       Tagesziel-Ring am Telefon. */
    transition: stroke-dasharray .6s ease-out;
}
.reife-ring-success .reife-ring-value { stroke: var(--dva-success); }
.reife-ring-warning .reife-ring-value { stroke: var(--dva-warning); }
.reife-ring-danger  .reife-ring-value { stroke: var(--dva-danger); }
.reife-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--dva-text-muted, #64748b);
}
.reife-ring-success .reife-ring-label { color: var(--dva-success); }
.reife-ring-warning .reife-ring-label { color: var(--dva-warning); }
.reife-ring-danger  .reife-ring-label { color: var(--dva-danger); }
.reife-ring-sep { opacity: .5; margin: 0 .05rem; }

.reife-liste { font-size: .9rem; }
.reife-liste a { color: inherit; text-decoration: underline; }

/* Kompakte Variante fuer die Vorgangsliste */
.reife-mini {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.reife-mini .reife-mini-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    flex: 0 0 auto;
}
.reife-mini-success .reife-mini-dot { background: var(--dva-success); }
.reife-mini-warning .reife-mini-dot { background: var(--dva-warning); }
.reife-mini-danger  .reife-mini-dot { background: var(--dva-danger); }
.reife-mini-success { color: var(--dva-success); }
.reife-mini-warning { color: var(--dva-warning); }
.reife-mini-danger  { color: var(--dva-danger); }

@media (prefers-reduced-motion: reduce) {
    .reife-ring .reife-ring-value { transition: none; }
}

/* =====================================================================
   Adress-Pflegestatus — die Laterne
   Die FARBE sagt den Zustand (gruen = vollstaendig und frisch), die
   HELLIGKEIT, wie lange der letzte Nachweis her ist.
   Bewusst fuenf grobe Stufen statt eines stetigen Verlaufs: Ein
   stufenloses Verblassen sieht besser aus, aber niemand unterscheidet
   acht von neun Monaten. Stufe 0 ist erloschen — dann ist die Adresse
   ueberfaellig.
   ===================================================================== */
.pflege-laterne {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.35rem;
    border: 1px solid var(--dva-border);
    transition: opacity .4s ease-out;
}
.pflege-laterne-success { color: var(--dva-success); }
.pflege-laterne-warning { color: var(--dva-warning); }
.pflege-laterne-danger  { color: var(--dva-danger); }

.pflege-laterne-s5 { opacity: 1; }
.pflege-laterne-s4 { opacity: .82; }
.pflege-laterne-s3 { opacity: .64; }
.pflege-laterne-s2 { opacity: .46; }
.pflege-laterne-s1 { opacity: .3; }
/* Erloschen: kein Leuchten mehr, nur noch der Rahmen. */
.pflege-laterne-s0 {
    opacity: 1;
    color: var(--dva-danger);
    border-color: var(--dva-danger);
    background: transparent;
}

.pflege-liste { font-size: .9rem; }
.pflege-liste a { color: inherit; text-decoration: underline; }

/* Ankreuzgitter der Klassifizierung im Firmenformular */
.klassifizierung-gitter {
    /* Hoehe und Bildlauf entfallen — siehe Abschnitt AUSWAHL-MARKEN. */
    background: var(--dva-surface, transparent);
}

/* Dasselbe Gitter fuer die Geschaeftsfelder — mit der Spalte „Haupt"
   rechts. Sie ist blass, solange die Zeile nicht angehakt ist: Eine
   Hauptsparte ohne Zuordnung waere ein Widerspruch, und das soll man
   sehen, bevor man klickt. */
.geschaeftsfeld-gitter {
    /* Hoehe und Bildlauf entfallen — siehe Abschnitt AUSWAHL-MARKEN. */
    background: var(--dva-surface, transparent);
}

.geschaeftsfeld-gitter .form-check {
    padding-left: 0;
}

/* Die frueheren .gf-haupt-Regeln (Rollkasten, blasses „Haupt" an jeder
   Zeile) sind mit dem Umbau auf Marken entfallen. Sie standen hier mit
   hoeherer Spezifitaet als .chip-haupt und liessen den Stern an ALLEN
   Sparten stehen — auch an den nicht gewaehlten. Die Gestaltung steht jetzt
   vollstaendig im Abschnitt AUSWAHL-MARKEN am Ende dieser Datei. */

@media (prefers-reduced-motion: reduce) {
    .pflege-laterne { transition: none; }
}

/* =====================================================================
   Spaltenkopf-Menues der Vorgangsliste (Sortieren + Filtern)
   Ersetzt die frueher siebenfeldrige Filterleiste ueber der Tabelle.
   ===================================================================== */
.dva-colmenu-btn {
    color: inherit;
    font: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.dva-colmenu-btn:hover,
.dva-colmenu-btn:focus {
    color: var(--dva-primary);
}
/* Der Pfeil bleibt zurueckhaltend, bis die Spalte angefasst wird — sonst
   flimmern sieben Chevrons in der Kopfzeile. */
.dva-colmenu-caret {
    font-size: .7em;
    opacity: .35;
    transition: opacity .12s ease-in-out;
}
.dva-colmenu-btn:hover .dva-colmenu-caret,
.dva-colmenu-btn[aria-expanded="true"] .dva-colmenu-caret {
    opacity: 1;
}
.dva-colmenu-list {
    font-size: .875rem;
    min-width: 13rem;
    /* Lange Firmenlisten sollen das Menue nicht ueber die Seite hinaus ziehen. */
    max-height: 60vh;
    overflow-y: auto;
    /* Das Menue wird per Popper fest positioniert (siehe _list-column-menu.php),
       damit es aus .table-container/.table-responsive herauskommt. Damit es
       dabei ueber der Tabelle und ueber angrenzenden Karten liegt, reicht der
       Bootstrap-Vorgabewert 1000 nicht sicher aus. */
    z-index: 1055;
}
.dva-colmenu-list .dropdown-header {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.dva-colmenu-list .dropdown-item.active {
    font-weight: 600;
}

/* =====================================================================
   Seitenleiste: auf- und zuklappbare Menuegruppen
   Ab Werk zu; der Zustand liegt je Geraet im localStorage. Die Gruppe mit
   dem aktiven Eintrag ist immer offen — sonst waere der Menuepunkt der
   gerade geoeffneten Seite unsichtbar.
   ===================================================================== */
button.sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    /* Sonst erbt der Knopf die Schriftgroesse des Browsers statt der Klasse. */
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dva-sidebar-text);
    opacity: 0.5;
    transition: opacity .12s ease-in-out;
}
button.sidebar-section-toggle:hover,
button.sidebar-section-toggle:focus-visible {
    opacity: 0.85;
}
.sidebar-section-caret {
    font-size: 0.8em;
    transition: transform .15s ease-in-out;
    margin-left: .5rem;
    flex: 0 0 auto;
}
button.sidebar-section-toggle[aria-expanded="false"] .sidebar-section-caret {
    transform: rotate(-90deg);
}
.sidebar-section-items.is-collapsed {
    display: none;
}

/* ─── Messe-Erfassung am Stand ──────────────────────────────────────────
   Bedienung im Stehen, mit dem Daumen, bei Sonne. Deshalb grosse Flaechen
   und ein Speichern-Knopf, der ohne Hinsehen zu treffen ist.
   ------------------------------------------------------------------- */

/* 16px erzwingen: Bei kleinerer Schrift zoomt iOS Safari beim Fokus in das
   Feld hinein und die ganze Maske springt. */
.messe-feld,
.messe-feld:focus {
    font-size: 16px;
}

.messe-kopf {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--dva-body-bg, #fff);
    padding: .5rem 0;
    border-bottom: 1px solid var(--dva-border, #dee2e6);
}

.messe-foto-btn {
    min-height: 4rem;
    font-size: 1.05rem;
}

.messe-temp .btn {
    min-height: 3.5rem;
    font-size: 1rem;
}

.messe-thumbs .messe-thumb {
    width: 5.5rem;
    height: 5.5rem;
}
.messe-thumbs .messe-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .375rem;
    border: 1px solid var(--dva-border, #dee2e6);
}
.messe-thumb-weg {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    background-color: var(--dva-card-bg, #fff);
    border-radius: 50%;
    padding: .3rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* Klebt unten, damit der Daumen ihn blind findet. Der Abstand nach unten
   beruecksichtigt die mobile Tableiste und den Bereich um die Home-Anzeige. */
.messe-speichern {
    position: sticky;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    min-height: 4rem;
    font-size: 1.1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.m-body .messe-speichern {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

.messe-meldung {
    animation: messe-einblenden .15s ease-out;
}
@keyframes messe-einblenden {
    from { opacity: 0; transform: translateY(-.25rem); }
    to   { opacity: 1; transform: none; }
}

/* Produkt-Schaltflaechen am Stand: gross genug fuer den Daumen, mehrere
   je Zeile. „Antippen statt tippen" ist die Regel — die Tastatur bleibt
   dem Firmennamen vorbehalten. */
/*
 * „Karte einlesen" — ein <details>, das wie ein Knopf aussieht.
 *
 * Das Aufklapp-Dreieck muss weg: Es macht aus der Schaltflaeche ein
 * Bedienelement zweiter Klasse, und am Stand soll der Knopf genauso
 * einladend sein wie „Visitenkarte fotografieren".
 */
/*
 * Aktionsknoepfe einer Seitenkopfzeile.
 *
 * Eigene Klasse statt `d-flex flex-wrap gap-2`: Diese Kombination trifft in
 * der Handy-Ansicht eine Regel fuer Werkzeugleisten, die Knoepfe auf 28 px
 * Hoehe zusammenstaucht ("Chip-Look"). In einer Kopfzeile ist das falsch --
 * dort stehen die Hauptwege der Seite, und 28 px trifft am Stand niemand.
 */
.seiten-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.messe-karte > summary {
    list-style: none;
    cursor: pointer;
}
.messe-karte > summary::-webkit-details-marker { display: none; }
.messe-karte[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.messe-karte-inhalt {
    background: var(--dva-bg-subtle, rgba(0, 0, 0, .02));
}
.messe-karte-inhalt ol li { margin-bottom: .25rem; }

/*
 * Vorschlag aus der Kartenerkennung.
 *
 * Bewusst zurueckhaltend: ein Streifen links, kein Farbfeld. Der Wert ist
 * uebernommen, nicht bestaetigt — er soll auffallen, ohne wie ein Fehler
 * auszusehen. Die Markierung verschwindet, sobald jemand das Feld anfasst.
 */
.messe-vorschlag {
    border-left: 3px solid var(--dva-warning, #ffc107) !important;
    background-color: rgba(255, 193, 7, .06);
}

.messe-chip {
    min-height: 2.75rem;
    font-size: 0.95rem;
    padding-left: .9rem;
    padding-right: .9rem;
}

/* ============================================================
   Sprungfeld (Strg+K)
   ------------------------------------------------------------
   Ein Fenster ueber der Seite, das Menuepunkte, Anlege-Aktionen
   und Datensaetze in einer Liste mischt. Siehe
   docs/Konzept-Arbeitsplaetze.md, Abschnitt 5.
   ============================================================ */

/* Ausloeser in der Kopfzeile */
.sprungfeld-knopf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--dva-content-bg, #f1f5f9);
    border: 1px solid var(--dva-border, #e2e8f0);
    color: var(--dva-text-muted, #64748b);
    font-size: .83rem;
    padding: .3rem .7rem;
}

.sprungfeld-knopf:hover {
    background: var(--dva-border, #e2e8f0);
    color: var(--dva-text, #1e293b);
}

.sprungfeld-knopf kbd {
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    border-radius: 4px;
    padding: 0 .35rem;
    font-size: .7rem;
    font-family: inherit;
    color: var(--dva-text-muted, #64748b);
}

/* Fenster */
.sprungfeld-hg {
    position: fixed;
    inset: 0;
    background: var(--dva-overlay-bg, rgba(0, 0, 0, .5));
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 11vh 1rem 1rem;
    z-index: 1080; /* ueber Bootstrap-Modals (1055) */
}

.sprungfeld-hg.offen { display: flex; }

body.sprungfeld-offen { overflow: hidden; }

.sprungfeld-box {
    background: var(--dva-card-bg, #fff);
    border-radius: 12px;
    width: min(620px, 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
}

.sprungfeld-kopf {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--dva-border, #e2e8f0);
    color: var(--dva-text-muted, #64748b);
    flex-shrink: 0;
}

.sprungfeld-kopf input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 1rem 0;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
    color: var(--dva-text, #1e293b);
}

.sprungfeld-liste {
    overflow-y: auto;
    padding: .35rem;
    flex: 1;
}

.sprungfeld-gruppe {
    padding: .55rem .85rem .25rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dva-text-muted, #64748b);
    font-weight: 600;
}

.sprungfeld-zeile {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .85rem;
    border-radius: 7px;
    font-size: .89rem;
    color: var(--dva-text, #1e293b);
    text-decoration: none;
}

.sprungfeld-zeile:hover,
.sprungfeld-zeile:focus { color: var(--dva-text, #1e293b); }

.sprungfeld-zeile.aktiv { background: var(--dva-primary-light, #dbeafe); }

.sprungfeld-zeile i {
    width: 1.2rem;
    text-align: center;
    color: var(--dva-text-muted, #64748b);
    flex-shrink: 0;
}

.sprungfeld-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sprungfeld-zusatz {
    margin-left: auto;
    padding-left: .8rem;
    font-size: .74rem;
    color: var(--dva-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
    flex-shrink: 0;
}

.sprungfeld-leer {
    padding: 1.6rem;
    text-align: center;
    color: var(--dva-text-muted, #64748b);
    font-size: .87rem;
}

.sprungfeld-fuss {
    border-top: 1px solid var(--dva-border, #e2e8f0);
    padding: .5rem 1rem;
    font-size: .73rem;
    color: var(--dva-text-muted, #64748b);
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.sprungfeld-fuss .sprungfeld-zahl { margin-left: auto; }

/* Auf schmalen Schirmen fuellt das Fenster mehr Flaeche, und die
   Tastaturhinweise entfallen — dort gibt es keine Tastatur. */
@media (max-width: 575.98px) {
    .sprungfeld-hg { padding: 0; align-items: stretch; }
    .sprungfeld-box { max-height: 100%; border-radius: 0; width: 100%; }
    .sprungfeld-fuss span:not(.sprungfeld-zahl) { display: none; }
}

/* ============================================================
   Arbeitsplätze
   ------------------------------------------------------------
   Menü nach Programmthemen statt nach Funktionsumfang.
   docs/Konzept-Arbeitsplaetze.md
   ============================================================ */

/* Umschalter im Sidebar-Kopf. Erscheint nur bei mehr als einem
   zugewiesenen Arbeitsplatz — wer einen hat, sieht ihn nie. */
.sidebar-header-ap {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .15rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.sidebar-ap {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .1rem .3rem .1rem 2.2rem;
    background: none;
    border: 0;
    border-radius: 5px;
    color: #93c5fd;
    font-size: .78rem;
    font-family: inherit;
    text-align: left;
}

.sidebar-ap:hover,
.sidebar-ap:focus { background: rgba(255, 255, 255, .08); color: #bfdbfe; }
.sidebar-ap::after { margin-left: auto; opacity: .6; }

/* Startseite des Arbeitsplatzes */
.ap-abschnitt {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dva-text-muted, #64748b);
    font-weight: 600;
    margin: 1.6rem 0 .6rem;
}

.ap-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: .75rem;
}

.ap-kachel {
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    border-radius: var(--dva-card-radius, .5rem);
    padding: .9rem;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    text-decoration: none;
    color: var(--dva-text, #1e293b);
}

.ap-kachel:hover {
    border-color: var(--dva-primary, #2563eb);
    box-shadow: 0 3px 12px rgba(var(--dva-primary-rgb, 37, 99, 235), .1);
    color: var(--dva-text, #1e293b);
}

.ap-kachel > i {
    font-size: 1.15rem;
    color: var(--dva-primary, #2563eb);
    margin-top: .1rem;
    flex-shrink: 0;
}

.ap-kachel b { display: block; font-size: .89rem; margin-bottom: .1rem; }

.ap-kachel span span {
    display: block;
    font-size: .78rem;
    color: var(--dva-text-muted, #64748b);
    line-height: 1.4;
}

/* "Ihre Arbeitsplätze" — beantwortet "Was kann ich hier überhaupt?" */
.ap-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: .75rem;
}

.ap-karte {
    width: 100%;
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    border-left: 3px solid var(--dva-primary, #2563eb);
    border-radius: var(--dva-card-radius, .5rem);
    padding: .85rem 1rem;
    display: flex;
    gap: .75rem;
    align-items: center;
    text-align: left;
    font-family: inherit;
    color: var(--dva-text, #1e293b);
}

.ap-karte:hover { background: var(--dva-table-hover-bg, #f8fafc); }
.ap-karte > i { font-size: 1.3rem; color: var(--dva-primary, #2563eb); flex-shrink: 0; }
.ap-karte b { display: block; font-size: .9rem; }
.ap-karte small { color: var(--dva-text-muted, #64748b); font-size: .77rem; }

.ap-karte.hier {
    border-left-color: #94a3b8;
    background: var(--dva-table-hover-bg, #f8fafc);
    opacity: .75;
}

.ap-karte.hier > i { color: var(--dva-text-muted, #64748b); }

/* ===================================================================
   Firmen-Auswahlfeld (assets/js/company-picker.js)
   Trefferliste schwebt ueber dem Formular, damit sie das Feld darunter
   nicht wegschiebt — sonst springt beim Tippen das halbe Formular.
   =================================================================== */

.company-picker-results {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--dva-card-bg, #fff);
}

.company-picker-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    cursor: pointer;
}

.company-picker-item.active,
.company-picker-item:hover {
    background: var(--dva-table-hover-bg, #f8fafc);
}

.company-picker input[disabled] {
    background: var(--dva-table-hover-bg, #f1f5f9);
}


/* ===================================================================
   Firmen-Kreuztabellen (companies/matrix.php)

   Die Farben liegen als eigene Marken vor und nicht als Bootstrap-
   Kontextklassen: `success`/`danger` heissen im Bestand „erledigt" und
   „Fehler". Hier bedeuten sie „Ausbauspielraum" und „Potential unter dem
   heutigen Stand" — dieselbe Farbe fuer eine andere Aussage waere die
   Sorte Mehrdeutigkeit, die eine Auswertung unlesbar macht.
   =================================================================== */
/*
   Die Grundwerte stehen auf :root und NICHT auf `.theme-classic`. Es gibt
   vier Schemata (classic, dark, nature, ocean) und einen Umschalter pro
   Geraet; eine Aufzaehlung waere beim fuenften Schema wieder unvollstaendig,
   und die Matrix erschiene dort schlicht farblos. Ueberschrieben wird nur
   das eine Schema, das einen dunklen Grund hat.

   Die Deckkraft ist bewusst niedrig: Die Toene liegen ueber der Tabellen-
   farbe des jeweiligen Schemas und muessen sich dem warmen Papierton von
   „Natur" ebenso fuegen wie dem kuehlen von „Ozean".
*/
:root {
    --cm-ausbau-stark: rgba(16, 185, 129, .32);
    --cm-ausbau:       rgba(16, 185, 129, .15);
    --cm-gehalten:     rgba(100, 116, 139, .13);
    --cm-risiko:       rgba(245, 158, 11, .22);
    --cm-offen:        rgba(148, 163, 184, .09);
    --cm-hitze:        37, 99, 235;
}

.theme-dark {
    /* Auf dunklem Grund traegt dieselbe Deckkraft weniger — Kontrast
       sonst unter der Lesbarkeitsschwelle. */
    --cm-ausbau-stark: rgba(52, 211, 153, .38);
    --cm-ausbau:       rgba(52, 211, 153, .20);
    --cm-gehalten:     rgba(148, 163, 184, .18);
    --cm-risiko:       rgba(251, 191, 36, .28);
    --cm-offen:        rgba(148, 163, 184, .12);
    --cm-hitze:        129, 140, 248;
}

.cm-matrix {
    min-width: 720px;
}

.cm-matrix th,
.cm-matrix td {
    vertical-align: middle;
}

.cm-matrix thead th {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.cm-matrix tbody th {
    font-weight: 600;
    font-size: .86rem;
    white-space: nowrap;
}

/* Branchen sind Freitext und werden bis zu 120 Zeichen lang. Die Ansicht
   kuerzt sie bereits, diese Schranke faengt den Rest ab — sonst zieht ein
   einziger Spaltenkopf die Tabelle ueber den Bildschirm hinaus. */
.cm-matrix thead th.cm-branche {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Die Ecke benennt beide Achsen — ohne sie muss man raten, was Zeile
   und was Spalte bedeutet. */
.cm-ecke {
    min-width: 11rem;
    line-height: 1.25;
}

.cm-ecke-y,
.cm-ecke-x {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--dva-text-muted, #64748b);
}

.cm-ecke-x {
    text-align: right;
}

.cm-matrix td a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: .15rem 0;
}

.cm-matrix td a:hover {
    text-decoration: underline;
}

.cm-zahl {
    display: block;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.15;
}

/* Der Nenner gehoert immer dazu: In einem Bestand, der zu vier Fuenfteln
   unbewertet ist, ist eine nackte Zahl irrefuehrend. */
.cm-anteil,
.cm-umsatz {
    display: block;
    font-size: .68rem;
    color: var(--dva-text-muted, #64748b);
    line-height: 1.2;
}

/*
   Zwei Klassen im Selektor sind Absicht, kein Versehen: Bootstrap faerbt
   Tabellenzellen ueber `.table > :not(caption) > * > *`. Diese Regel ist
   spezifischer als eine einzelne Klasse — eine schlichte `.cm-ausbau`
   bliebe wirkungslos, und die Matrix waere durchgehend weiss. Genau das
   ist beim ersten Anlauf passiert.
*/
.cm-matrix th.cm-summe,
.cm-matrix td.cm-summe {
    font-weight: 600;
    background-color: var(--cm-gehalten);
}

.cm-matrix td.cm-ausbau-stark { background-color: var(--cm-ausbau-stark); }
.cm-matrix td.cm-ausbau       { background-color: var(--cm-ausbau); }
.cm-matrix td.cm-gehalten     { background-color: var(--cm-gehalten); }
.cm-matrix td.cm-risiko       { background-color: var(--cm-risiko); }
.cm-matrix td.cm-offen        { background-color: var(--cm-offen); }
.cm-matrix td.cm-wert         { background-color: var(--cm-ausbau); }
.cm-matrix td.cm-leer         { background-color: transparent; }

.cm-matrix td.cm-hitze-1 { background-color: rgba(var(--cm-hitze), .10); }
.cm-matrix td.cm-hitze-2 { background-color: rgba(var(--cm-hitze), .22); }
.cm-matrix td.cm-hitze-3 { background-color: rgba(var(--cm-hitze), .36); }
.cm-matrix td.cm-hitze-4 { background-color: rgba(var(--cm-hitze), .52); }

/* Die Legende steht ausserhalb der Tabelle und braucht die Farben ohne
   Tabellen-Kontext. */
.cm-punkt.cm-ausbau-stark { background-color: var(--cm-ausbau-stark); }
.cm-punkt.cm-ausbau       { background-color: var(--cm-ausbau); }
.cm-punkt.cm-gehalten     { background-color: var(--cm-gehalten); }
.cm-punkt.cm-risiko       { background-color: var(--cm-risiko); }
.cm-punkt.cm-offen        { background-color: var(--cm-offen); }

.cm-legende {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin-top: .75rem;
    font-size: .78rem;
    color: var(--dva-text-muted, #64748b);
}

.cm-legende span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.cm-punkt {
    width: .95rem;
    height: .95rem;
    border-radius: .2rem;
    border: 1px solid var(--dva-border, #e2e8f0);
    display: inline-block;
}

/* ---- Merkmalsraster ---------------------------------------------- */
.cm-raster {
    min-width: 640px;
}

.cm-raster th.cm-raster-name,
.cm-raster td.cm-raster-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--dva-card-bg, #fff);
    min-width: 14rem;
    max-width: 20rem;
}

.cm-raster thead th {
    vertical-align: bottom;
}

/* Gedrehte Kopfzeilen: 30 Merkmalsspalten waagerecht beschriftet ergaeben
   eine Tabelle, die dreimal so breit ist wie der Bildschirm. */
.cm-dreh {
    height: 9.5rem;
    width: 2.2rem;
    padding: 0;
    text-align: left;
    white-space: nowrap;
}

.cm-dreh > span {
    display: inline-block;
    transform: rotate(-60deg);
    transform-origin: left bottom;
    width: 2.2rem;
    font-size: .74rem;
    font-weight: 500;
    padding-left: .35rem;
}

/* Die Klassifizierung ist die Rolle, das Merkmal das Schlagwort — die
   Trennlinie macht sichtbar, dass es zwei Gruppen sind. */
.cm-raster th.cm-gruppe-klass,
.cm-raster td.cm-gruppe-klass {
    background-color: var(--cm-offen);
}

.cm-raster tbody th a {
    text-decoration: none;
}

.cm-raster tbody th a:hover {
    text-decoration: underline;
}

@media print {
    .cm-matrix td a,
    .cm-raster tbody th a {
        color: #000;
    }
}


/* ===================================================================
   Posteingang, Fokusansicht (inc/views/emails/list.php)

   EINE Bauform fuer Schreibtisch und Telefon. Jede Mail steht als
   `.ef-mail` im Dokument; die gerade faellige traegt zusaetzlich
   `.ef-aktiv` und klappt damit auf. Das spart die zweite Auszeichnung
   fuer Mobil — die Karten-Fassung der Tabelle war bisher eine eigene
   Kopie derselben Zeile mit denselben vier Knoepfen im Kartenkopf.

   RANGORDNUNG: Den Vorschlag zu bestaetigen und den RICHTIGEN Vorgang zu
   suchen sind gleich wichtig — beim Suchen sitzt der Mensch. Beides ist
   deshalb ein Bedienelement (`.ef-wahl`) mit zwei gleich hohen Haelften,
   nicht Flaeche gegen Textlink.
   =================================================================== */
/* HIER KEIN `display`. Das Element traegt beide Klassen — `view-fokus`
   (Sichtbarkeit, steuert der Umschalter) und `email-fokus` (Aussehen).
   Ein `display: flex` an dieser Stelle steht spaeter in der Datei als
   `.view-fokus { display: none }` und haette dieselbe Spezifitaet: Die
   Fokusliste war damit in ALLEN drei Ansichten sichtbar, also auch unter
   der Tabelle. Die Richtung setzt deshalb die Sichtbarkeitsregel oben. */
.email-fokus {
    flex-direction: column;
    gap: .5rem;
}

.ef-mail {
    position: relative;
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    border-radius: .55rem;
    padding: .6rem .8rem .6rem 1rem;
    overflow: visible;
}

/* Der Farbstreifen ersetzt die Prozentzahl als erstes Signal: 30 Zahlen
   liest niemand, 30 Streifen scannt man in einer Sekunde. */
.ef-mail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: .55rem 0 0 .55rem;
}
.ef-mail.ef-sicher::before   { background: var(--dva-success, #16a34a); }
.ef-mail.ef-unsicher::before { background: #d97706; }
.ef-mail.ef-keiner::before   { background: var(--dva-text-muted, #94a3b8); }

.ef-mail.ef-aktiv {
    padding: 1.15rem 1.2rem 1rem 1.35rem;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .07);
}

.ef-marke {
    display: none;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--dva-primary, #2563eb);
    margin-bottom: .4rem;
}
.ef-mail.ef-aktiv .ef-marke { display: block; }

.ef-kopf {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}
/* `.ef-mail` mit im Selektor: Die Farbschemata faerben Links ueber
   `.theme-dark a { ... }` — eine Klasse allein verliert dagegen, und der
   Betreff waere je nach Schema mal Textfarbe, mal Linkfarbe. */
.ef-mail .ef-betreff {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: .9rem;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ef-mail.ef-aktiv .ef-betreff {
    font-size: 1.18rem;
    line-height: 1.3;
    white-space: normal;
}
.ef-betreff:hover { text-decoration: underline; }
.ef-datum {
    font-size: .74rem;
    color: var(--dva-text-muted, #64748b);
    white-space: nowrap;
}

.ef-von {
    font-size: .78rem;
    color: var(--dva-text-muted, #64748b);
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ef-mail.ef-aktiv .ef-von { margin-top: .25rem; font-size: .84rem; }

/* Empfaengerzeile — nur in der aufgeklappten Karte. In der schmalen Zeile
   zaehlt der Betreff, nicht der Verteiler. */
.ef-an {
    display: none;
    font-size: .84rem;
    color: var(--dva-text-muted, #64748b);
    margin-top: .1rem;
    overflow-wrap: anywhere;
}
.ef-mail.ef-aktiv .ef-an { display: block; }
.ef-marke-adr {
    display: inline-block;
    min-width: 1.6rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dva-text-muted, #94a3b8);
}
.ef-mehr { font-style: italic; opacity: .8; }

.ef-vorschau {
    display: none;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--dva-text-muted, #64748b);
    background: var(--dva-content-bg, #f1f5f9);
    border-radius: .5rem;
    padding: .7rem .85rem;
    margin-top: .8rem;
}
.ef-mail.ef-aktiv .ef-vorschau { display: block; }

/* Zusammengefasstes Ziel — nur in der schmalen Fassung. */
/* Zeichen „hat eine Wiedervorlage" — nach dem Speichern ohne Neuladen
   angehaengt. Die Karte bleibt dabei an ihrem Platz im Stapel. */
.ef-wv {
    font-size: .72rem;
    font-weight: 600;
    color: var(--dva-warning, #b45309);
    white-space: nowrap;
}
.ef-wv .bi { margin-right: .2rem; }

.ef-ziel {
    font-size: .76rem;
    color: var(--dva-text-muted, #64748b);
    white-space: nowrap;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ef-mail.ef-aktiv .ef-ziel { display: none; }

.ef-aktion { display: none; margin-top: .9rem; }
.ef-mail.ef-aktiv .ef-aktion { display: block; }

.ef-flaechen {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    align-items: stretch;
}
.ef-gross {
    flex: 1 1 15rem;
    min-width: 12rem;
    border: 0;
    border-radius: .6rem;
    padding: .85rem 1rem;
    cursor: pointer;
    text-align: left;
    font-size: .92rem;
    font-weight: 600;
    background: var(--dva-success, #16a34a);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.ef-gross:hover { filter: brightness(1.08); }
/* „zweit" ist NICHT kleiner, nur anders gefaerbt. */
.ef-gross.ef-zweit {
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    color: inherit;
}
.ef-gross.ef-zweit:hover { background: var(--dva-table-hover-bg, #f8fafc); filter: none; }
.ef-gross small { font-size: .72rem; font-weight: 400; opacity: .88; }
.ef-gross.ef-zweit small { color: var(--dva-text-muted, #64748b); opacity: 1; }

/* Dritte Stufe der Zuordnung: ohne Vorgang ablegen.
   Bewusst eine Zeile und bewusst leiser als die Flaechen darueber. */
.ef-ohne {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .6rem;
    font-size: .82rem;
}
.ef-ohne-frage {
    color: var(--dva-text-muted, #64748b);
}
.ef-ohne-knopf {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--dva-border, #e2e8f0);
    border-radius: 999px;
    background: var(--dva-card-bg, #fff);
    color: var(--dva-text, #1e293b);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.ef-ohne-knopf:hover:not(:disabled) {
    border-color: var(--dva-primary, #2563eb);
    color: var(--dva-primary, #2563eb);
}
.ef-ohne-knopf:disabled { opacity: .5; cursor: default; }
.ef-ohne-knopf .bi { font-size: .95em; }

/* Der zweite Weg: gleiche Form, leisere Farbe. Er ist die Antwort auf
   „gehoert zu niemandem" und damit seltener — aber kein Nachtrag. */
.ef-ohne-leise {
    color: var(--dva-text-muted, #64748b);
    font-weight: 500;
}
.ef-ohne-leise .bi { opacity: .75; }

/* Nur in der aufgeklappten Karte — in der schmalen Zeile waere sie Laerm. */
.ef-mail:not(.ef-aktiv) .ef-ohne { display: none; }

.ef-fuss {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    margin-top: .8rem;
}
.ef-neben { display: flex; gap: .45rem; flex-wrap: wrap; margin-left: auto; }
.ef-tasten {
    font-size: .74rem;
    color: var(--dva-text-muted, #64748b);
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
}
.ef-tasten kbd {
    background: var(--dva-content-bg, #f1f5f9);
    border: 1px solid var(--dva-border, #e2e8f0);
    border-bottom-width: 2px;
    border-radius: .3rem;
    padding: .05rem .35rem;
    color: inherit;
    font-size: .7rem;
}

/* ---- Vorgangswahl ----
   `.ef-wahl` umschliesst den Knopf, weil das Aufklappmenue einen
   positionierten Elternteil braucht. Damit ist ER das Flex-Element der
   Flaechenreihe — nicht der Knopf darin. Ohne die beiden Regeln unten blieb
   „Anderer Vorgang" schmal, waehrend „Uebernehmen" die Zeile fuellte: genau
   die Rangordnung, die dieser Umbau beseitigen soll. */
.ef-wahl { position: relative; max-width: 100%; }
.ef-flaechen > .ef-wahl { flex: 1 1 15rem; min-width: 12rem; display: block; }
.ef-flaechen > .ef-wahl > .ef-gross { width: 100%; }
.ef-picker {
    position: absolute;
    left: 0;
    top: calc(100% + .4rem);
    z-index: 1050;
    width: 22rem;
    max-width: 86vw;
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #e2e8f0);
    border-radius: .6rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
    padding: .55rem;
    display: none;
}
.ef-picker.ef-auf { display: block; }
.ef-picker input {
    width: 100%;
    background: var(--dva-content-bg, #f1f5f9);
    border: 1px solid var(--dva-border, #e2e8f0);
    color: inherit;
    border-radius: .45rem;
    padding: .5rem .65rem;
    font-size: .85rem;
    margin-bottom: .4rem;
}
.ef-pgruppe {
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dva-text-muted, #64748b);
    font-weight: 600;
    padding: .45rem .5rem .2rem;
}
.ef-treffer {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .55rem;
    background: transparent;
    border: 0;
    color: inherit;
    padding: .5rem .55rem;
    border-radius: .45rem;
    cursor: pointer;
    font-size: .85rem;
    text-align: left;
}
.ef-treffer:hover,
.ef-treffer.ef-markiert { background: var(--dva-table-hover-bg, #f8fafc); }
.ef-treffer .ef-pname {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ef-treffer .ef-pnebn { font-size: .72rem; color: var(--dva-text-muted, #64748b); }
.ef-treffer .ef-pscore { font-size: .72rem; font-weight: 600; color: var(--dva-success, #16a34a); }
.ef-pleer { padding: .9rem .6rem; text-align: center; font-size: .83rem; color: var(--dva-text-muted, #64748b); }

/* Auf dem Telefon steht das Aufklappmenue besser voll ueber der Breite. */
@media (max-width: 575.98px) {
    .ef-picker { width: calc(100vw - 3rem); left: -.4rem; }
    .ef-gross,
    .ef-flaechen > .ef-wahl { flex: 1 1 100%; min-width: 0; }
}

/* ===================================================================
   Leiste der zurueckgestellten Mails

   „Spaeter" nimmt eine Mail aus dem Stapel — dauerhaft, bis sie
   zurueckgeholt wird. Ohne einen sichtbaren Zaehler waere das ein stilles
   Verschwinden: Der Posteingang zeigte weniger an, als er enthaelt, und
   niemand kaeme auf die Idee, irgendwo nachzusehen. Die Leiste ist
   deshalb ein Weg dorthin, kein blosser Hinweis.
   =================================================================== */
.zg-leiste {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    padding: .45rem .75rem;
    border: 1px solid var(--dva-border, #e2e8f0);
    border-left: 3px solid var(--dva-text-muted, #94a3b8);
    border-radius: .4rem;
    background: var(--dva-content-bg, #f8fafc);
    font-size: .84rem;
    color: var(--dva-text-muted, #64748b);
}
.zg-leiste .bi { color: var(--dva-text-muted, #94a3b8); }
.zg-leiste strong { color: var(--dva-text, #1e293b); }
.zg-leiste .zg-weg {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dva-text, #1e293b);
    text-decoration: underline;
    text-underline-offset: .18em;
}
.zg-leiste .zg-weg:hover { color: var(--dva-primary, #2563eb); }
/* In der Nebenansicht selbst deutlicher abgesetzt — sonst haelt man sie
   fuer den Posteingang und wundert sich ueber die kurze Liste. */
.zg-leiste-aktiv {
    border-color: var(--dva-warning, #d97706);
    border-left-width: 3px;
    color: var(--dva-text, #1e293b);
}
.zg-leiste-aktiv .bi { color: var(--dva-warning, #b45309); }

/* Ohne Tastatur keine Tastenhinweise. Das Ueberlaufmenue bleibt trotzdem
   rechts stehen, weil `.ef-neben` mit `margin-left: auto` ausgerichtet ist
   und nicht am Nachbarn haengt. */
@media (hover: none) {
    .ef-tasten { display: none; }
    .ef-fuss { margin-top: .5rem; }

    /* „anzeigen" war als reiner Text 20 Pixel hoch — mit dem Finger kaum zu
       treffen, und es ist der einzige Weg zu den zurueckgestellten Mails. */
    .zg-leiste .zg-weg { padding: .55rem .35rem; margin-right: -.35rem; }

    /* Dieselbe Rechnung fuer die dritte Stufe der Zuordnung. */
    .ef-ohne-knopf { padding-top: .5rem; padding-bottom: .5rem; }
}

/* ============================================================
   Symbolauswahl (Bootstrap-Icons)
   Partials: _icon_feld.php / _icon_modal.php

   Die Kacheln sind bewusst groesser als ein normaler Knopf: Hier
   wird ein BILD erkannt, nicht Text gelesen. In Bootstrap-Groesse
   waere das Symbol 16 Pixel gross — zu klein, um zwei aehnliche
   Ordnersymbole auseinanderzuhalten, und zu klein fuer den Finger.
   ============================================================ */
.icon-kachel {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.icon-kachel i {
    font-size: 1.35rem;
    line-height: 1;
}

/* Die Vorschau am Eingabefeld zeigt dasselbe Symbol wie spaeter die
   Anwendung — etwas groesser als der umgebende Text, damit sie als
   Anzeige erkennbar ist und nicht als Zierrat. */
[data-icon-vorschau] i {
    font-size: 1.1rem;
    line-height: 1;
}

/* ==========================================================================
   EINSTELLUNGEN — Rubriken links, Inhalt rechts, Suche filtert beides
   ==========================================================================

   Die Seite war eine einzige Bildlaufflaeche mit ueber 2.200 Zeilen. Sie ist
   jetzt in Faecher geteilt: links die Rubrikenleiste, rechts genau ein Fach.
   Beim Tippen im Suchfeld veraendert sich BEIDES — rechts bleiben nur die
   Treffer stehen, links verblassen die Rubriken ohne Treffer und die uebrigen
   nennen ihre Trefferzahl. Wer sucht, sieht dadurch nicht nur, WAS er
   gefunden hat, sondern auch, WO es liegt.

   Alle Farben kommen aus den --dva-*-Variablen, damit die vier Farbschemata
   (Klassisch, Mitternacht, Natur, Ozean) ohne Sonderregeln mitziehen.
   ========================================================================== */

.einst-kopf {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

/* --- Suchfeld in der Kopfzeile ----------------------------------------- */
.einst-suchfeld {
    position: relative;
    flex: 1 1 260px;
    max-width: 30rem;
}

.einst-suchfeld > i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dva-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.einst-suchfeld input {
    width: 100%;
    border: 1px solid var(--dva-input-border);
    background: var(--dva-input-bg);
    color: var(--dva-input-text);
    border-radius: 0.55rem;
    padding: 0.45rem 3rem 0.45rem 2rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.einst-suchfeld input:focus {
    outline: 0;
    border-color: var(--dva-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--dva-primary-rgb), 0.18);
}

.einst-leeren {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--dva-border);
    background: var(--dva-card-bg);
    color: var(--dva-text-muted);
    border-radius: 0.35rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.5;
    cursor: pointer;
}

.einst-leeren:hover {
    color: var(--dva-text);
    border-color: var(--dva-text-muted);
}

/* --- Leib: Leiste und Inhalt ------------------------------------------- */
.einst-leib {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.einst-rail {
    flex: 0 0 15.5rem;
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - var(--dva-topbar-height) - 2rem);
    overflow-y: auto;
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    padding: 0.4rem;
}

.einst-rail-gruppe {
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dva-text-muted);
    font-weight: 600;
    padding: 0.7rem 0.6rem 0.3rem;
}

.einst-rail-gruppe:first-child {
    padding-top: 0.35rem;
}

.einst-rail-knopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    color: var(--dva-text);
    font-size: 0.875rem;
    line-height: 1.3;
    cursor: pointer;
    /* Beim Filtern wechselt nur die Deckkraft; die Leiste soll dabei nicht
       springen, sonst verliert man beim Tippen die Orientierung. */
    transition: opacity 0.12s ease, background-color 0.12s ease;
}

.einst-rail-knopf:hover {
    background: var(--dva-table-hover-bg);
}

.einst-rail-knopf > i {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
    color: var(--dva-text-muted);
    font-size: 0.95rem;
}

.einst-rail-name {
    flex: 1 1 auto;
    min-width: 0;
}

.einst-rail-knopf.aktiv {
    background: var(--dva-primary-light);
    color: var(--dva-primary-dark);
    font-weight: 600;
}

.einst-rail-knopf.aktiv > i {
    color: var(--dva-primary);
}

/* Rubrik ohne Treffer: sichtbar bleiben, aber zuruecktreten. Ganz
   ausblenden waere falsch — die Leiste soll waehrend des Tippens ihre
   Gestalt behalten, damit man sieht, WO nichts liegt. */
.einst-rail-knopf.leer {
    opacity: 0.32;
}

.einst-rail-zahl {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--dva-text-muted);
}

.einst-rail-zahl.ist-treffer {
    background: var(--dva-primary-light);
    color: var(--dva-primary-dark);
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
}

/* --- Inhaltsbereich ---------------------------------------------------- */
.einst-inhalt {
    flex: 1 1 auto;
    min-width: 0;
}

.einst-titel {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    font-weight: var(--dva-heading-weight);
    color: var(--dva-text);
    margin: 0 0 0.9rem;
}

.einst-titel > i {
    color: var(--dva-text-muted);
}

/* Die gewachsenen Ueberschriften der Seite stehen weiter im Quelltext — sie
   tragen die Anker, auf die von ueberall her verwiesen wird. Innerhalb einer
   Rubrik sind sie aber nicht mehr die Hauptueberschrift, sondern eine
   Zwischenstufe darunter („Nextcloud-Verbindung" unter „Verbindungen"). */
.einst-rubrik h5:not(.einst-titel) {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dva-text-muted);
    margin: 1.4rem 0 0.6rem;
}

.einst-rubrik h5.einst-titel + h5:not(.einst-titel) {
    margin-top: 0;
}

.einst-lead {
    color: var(--dva-text-muted);
    font-size: 0.875rem;
    max-width: 62ch;
    margin-bottom: 1.25rem;
}

/* Eine Rubrik kann aus mehreren Abschnitten bestehen (die Reihenfolge im
   Quelltext ist gewachsen). Zwischen ihnen darf kein doppelter Abstand
   entstehen, sonst sieht ein Fach wie zwei aus. */
.einst-rubrik + .einst-rubrik > .einst-titel {
    margin-top: 1.5rem;
}

/* Eine Trennlinie am Anfang eines Abschnitts trennt nichts mehr. */
.einst-rubrik > hr:first-child,
.einst-rubrik > .einst-titel + hr {
    display: none;
}

.einst-speichern {
    margin-top: 0.5rem;
}

.einst-meldung {
    color: var(--dva-text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.einst-meldung.ist-leer {
    background: var(--dva-table-header-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    padding: 0.9rem 1rem;
    max-width: 62ch;
}

/* Das eine Werkzeug, mit dem diese Datei alles aus- und einblendet. Es
   wirkt NUR auf die Darstellung: die Felder bleiben im Formular und werden
   beim Speichern mitgeschickt (siehe Kopf von assets/js/einstellungen.js). */
.einst-weg {
    display: none !important;
}

.einst-zurueck {
    display: none;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: none;
    color: var(--dva-primary);
    font-size: 0.875rem;
    padding: 0;
    margin-bottom: 0.85rem;
    cursor: pointer;
}

/* --- Schmale Geraete: erst die Faecher, dann der Inhalt ----------------- */
@media (max-width: 991.98px) {
    .einst-leib {
        display: block;
    }

    .einst-rail {
        position: static;
        max-height: none;
        flex: none;
        width: 100%;
    }

    .einst-inhalt {
        display: none;
    }

    .einst-leib.ist-tief .einst-rail {
        display: none;
    }

    .einst-leib.ist-tief .einst-inhalt {
        display: block;
    }

    .einst-leib.ist-tief .einst-zurueck {
        display: inline-flex;
    }

    .einst-suchfeld {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* Ueberschrift, die dasselbe sagt wie ihre Rubrik (siehe einstellungen.js).
   Sie bleibt im Baum, weil ihre Kennung als Sprungziel gebraucht wird. */
.einst-rubrik h5.einst-doppelt {
    display: none;
}

/* ==========================================================================
   Statusschiene und Zustaendigkeitsband
   docs/Bauplan-Mappe-Cockpit.md, Bausteine 1 und 2.

   Die Schiene fuehrt zusammen, was bisher an drei Stellen stand: Status,
   Substatus und Weiterschaltbedingungen. Im Ruhezustand ist sie eine Zeile.
   Alle Farben laufen ueber die --dva-Marken, damit sie in jedem Theme traegt —
   das war der Befund aus der hellen Fassung von Prototyp X.
   ========================================================================== */

.statusschiene {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    margin-bottom: 1rem;
    overflow: hidden;
}
.schiene-zeile {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    padding: .5rem .85rem;
}

/* Die Kette zeigt — sie schaltet nicht: kein Stufenklick (Bauplan, Abschnitt 9). */
.schiene-kette {
    display: flex;
    align-items: center;
    gap: .1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.schiene-kette::-webkit-scrollbar { height: 5px; }
.schiene-kette::-webkit-scrollbar-thumb {
    background: var(--dva-border);
    border-radius: 99px;
}
.schiene-stufe {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem .2rem .3rem;
    white-space: nowrap;
    font-size: .82rem;
    color: var(--dva-text-muted);
}
.schiene-stufe .stufe-punkt {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    border: 2px solid var(--dva-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    line-height: 1;
}
.schiene-stufe.ist-hinter { color: var(--dva-success); }
.schiene-stufe.ist-hinter .stufe-punkt {
    background: var(--dva-success);
    border-color: var(--dva-success);
    color: var(--dva-card-bg);
}
.schiene-stufe.ist-hier {
    color: var(--dva-primary);
    font-weight: 650;
}
.schiene-stufe.ist-hier .stufe-punkt {
    background: var(--dva-primary);
    border-color: var(--dva-primary);
    box-shadow: 0 0 0 3px rgba(var(--dva-primary-rgb), .18);
}
.schiene-stufe.ist-davor { opacity: .62; }

.schiene-rechts {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.schiene-zaehler {
    font-size: .78rem;
    color: var(--dva-text-muted);
    white-space: nowrap;
}
.schiene-bed {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 99px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.schiene-bed.ist-offen {
    color: var(--dva-warning);
    border-color: var(--dva-warning);
    background: transparent;
}
.schiene-bed.ist-erfuellt {
    color: var(--dva-success);
    border-color: var(--dva-success);
    background: transparent;
}

.schiene-schritt {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    padding: .3rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: .4rem;
    background: var(--dva-primary);
    border: 1px solid var(--dva-primary);
    color: #fff;
}
.schiene-schritt:hover { background: var(--dva-primary-dark); color: #fff; }
/* Gesperrt heisst: sichtbar, benannt, mit Grund — nicht ausgegraut und stumm. */
.schiene-schritt.ist-zu {
    background: transparent;
    color: var(--dva-warning);
    border-color: var(--dva-warning);
}
.schiene-schritt.ist-zu:hover { background: transparent; color: var(--dva-warning); }
.schiene-klappe {
    min-height: 38px;
    min-width: 38px;
    padding: .3rem .5rem;
    border: 1px solid var(--dva-border);
    border-radius: .4rem;
    color: var(--dva-text-muted);
    background: transparent;
}
.schiene-klappe[aria-expanded="true"] i { transform: rotate(180deg); }
.schiene-klappe i { transition: transform .15s ease; }
@media (prefers-reduced-motion: reduce) {
    .schiene-klappe i { transition: none; }
}

/* Das Blatt haengt sichtbar an der Zeile, statt danebenzustehen. */
.schiene-blatt {
    border-top: 1px solid var(--dva-border);
    background: var(--dva-table-header-bg);
    padding: .75rem .85rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.blatt-titel {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--dva-text-muted);
    margin: 0 0 .45rem;
}
.sub-kette { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.sub-punkt {
    font-size: .82rem;
    padding: .18rem .6rem;
    border-radius: 99px;
    border: 1px solid var(--dva-border);
    color: var(--dva-text-muted);
}
.sub-punkt.ist-hier {
    border-color: var(--dva-primary);
    color: var(--dva-primary);
    font-weight: 650;
}

.bed-liste { list-style: none; margin: 0; padding: 0; }
.bed-zeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 38px;
    padding: .15rem .3rem;
    border-radius: .3rem;
}
.bed-zeile:hover { background: var(--dva-table-hover-bg); }
.bed-marke {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}
.bed-marke input[disabled] { cursor: not-allowed; }
.bed-text { font-size: .87rem; overflow-wrap: anywhere; }
.bed-zeile.ist-an .bed-text { color: var(--dva-text-muted); }
.bed-rang {
    font-size: .72rem;
    color: var(--dva-text-muted);
    white-space: nowrap;
}
.bed-zeile.ist-pflicht:not(.ist-an) .bed-rang {
    color: var(--dva-warning);
    font-weight: 600;
}
.bed-hinweis { font-size: .78rem; color: var(--dva-text-muted); margin: .5rem 0 0; }

/* --- Zustaendigkeitsband des Bereichs -------------------------------------
   Gleich schwer wie die Schiene, damit ein Bereich nicht wie ein Vorgang mit
   fehlender Leiste wirkt. */
.bereichsband {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    margin-bottom: 1rem;
    overflow: hidden;
}
.band-kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--dva-border);
    font-size: .8rem;
    color: var(--dva-text-muted);
}
.band-marke {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 650;
    color: var(--dva-info);
    padding: .12rem .55rem;
    border: 1px solid var(--dva-info);
    border-radius: 99px;
}
.band-ort, .band-ohne { display: inline-flex; align-items: center; gap: .3rem; }
.band-inhalt {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: .8rem .85rem;
}
.band-titel {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--dva-text-muted);
    margin: 0 0 .4rem;
}
.band-namen { margin: 0; font-weight: 620; font-size: .95rem; }
.band-namen.band-fehlt { color: var(--dva-text-muted); font-weight: 400; font-style: italic; }
.band-sub { margin: .25rem 0 0; font-size: .8rem; color: var(--dva-text-muted); line-height: 1.45; }
.band-zahlen { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; }
.band-zahlen .zahl { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.band-zahlen .wort { display: block; font-size: .76rem; color: var(--dva-text-muted); }

@media (max-width: 767.98px) {
    .schiene-rechts { width: 100%; margin-left: 0; }
    .schiene-schritt { flex: 1 1 auto; justify-content: center; }
    .schiene-bed .bed-wort { display: none; }
    .band-zahlen { gap: .9rem; }
}

/* ==========================================================================
   Theme „Cockpit" — nach Prototyp X (docs/prototyp-mappe-x.html)
   docs/Bauplan-Mappe-Cockpit.md, Baustein 4.

   Dunkler Grund, hoher Kontrast, EIN leuchtender Akzent, kompakte
   Informationsdichte. Kein Schwarz, sondern sehr dunkles Blaugrau — Schwarz
   laesst Kanten haerter wirken, als sie sind, und ermuedet ueber acht Stunden.

   Unterschied zu „Dunkel": Dieses Theme ist enger gefuehrt (kleinerer Radius,
   schmalere Flaechen) und traegt einen kuehlen statt eines violetten Akzents.

   Kein Werkszustand: `app_theme` bleibt auf 'classic'. Wer Cockpit will,
   waehlt es je Instanz oder je Geraet — eine erzwungene Umstellung waere der
   eine Schritt dieses Bauplans, der bestehenden Anwendern etwas wegnaehme.
   ========================================================================== */
.theme-cockpit {
    --dva-primary: #38bdf8;
    --dva-primary-dark: #0ea5e9;
    --dva-primary-light: rgba(56, 189, 248, 0.16);
    --dva-primary-rgb: 56, 189, 248;
    --dva-sidebar-bg: #0b121d;
    --dva-sidebar-hover: #1c2839;
    --dva-sidebar-text: #a9b8ce;
    --dva-sidebar-text-active: #ffffff;
    --dva-sidebar-width: 248px;
    --dva-sidebar-border: rgba(255, 255, 255, 0.06);
    --dva-sidebar-brand: #e9eff8;
    --dva-topbar-height: 56px;
    --dva-topbar-bg: #121b28;
    --dva-content-bg: #0f1622;
    --dva-card-bg: #16202f;
    --dva-card-radius: 0.625rem;
    --dva-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --dva-border: #26334a;
    --dva-text: #e9eff8;
    --dva-text-muted: #a9b8ce;
    --dva-table-header-bg: #101a27;
    --dva-table-hover-bg: #1c2839;
    --dva-input-bg: #101a27;
    --dva-input-border: #35485f;
    --dva-input-text: #e9eff8;
    --dva-autocomplete-bg: #16202f;
    --dva-autocomplete-hover: #1c2839;
    --dva-mobile-nav-bg: #121b28;
    --dva-overlay-bg: rgba(3, 7, 13, 0.66);
    /* Zustandsfarben: alle gegen --dva-card-bg auf mindestens 4.5:1 geprueft. */
    --dva-success: #34d399;
    --dva-warning: #fbbf24;
    --dva-danger: #fb7185;
    --dva-info: #c4b5fd;
    --dva-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dva-font-heading: var(--dva-font-family);
    --dva-heading-weight: 650;
    --dva-body-size: 0.9rem;
    --dva-badge-bg: #26334a;
    --dva-badge-text: #e9eff8;
    --dva-badge-outline-bg: transparent;
    --dva-badge-outline-text: #a9b8ce;
    --dva-badge-outline-border: #35485f;
    --dva-login-bg: linear-gradient(135deg, #0b121d 0%, #16202f 100%);
    --dva-login-card-bg: #16202f;
    --dva-login-text: #e9eff8;
}

/* Formularfelder tragen im Dunklen keinen eigenen Rahmen aus Bootstrap —
   dieselbe Nachbesserung wie bei .theme-dark. */
.theme-cockpit .form-control,
.theme-cockpit .form-select {
    background-color: var(--dva-input-bg);
    border-color: var(--dva-input-border);
    color: var(--dva-input-text);
}
.theme-cockpit .form-control:focus,
.theme-cockpit .form-select:focus {
    background-color: var(--dva-input-bg);
    border-color: var(--dva-primary);
    color: var(--dva-input-text);
    box-shadow: 0 0 0 0.2rem rgba(var(--dva-primary-rgb), 0.22);
}
.theme-cockpit .form-control::placeholder { color: #7f92ab; }

/* ==========================================================================
   Dauerhaftes Suchfeld in der Kopfzeile (Baustein 3)
   Es ersetzt den Knopf erst ab Grossbildschirm; darunter bleibt der Knopf.
   ========================================================================== */
.sprungfeld-feld {
    max-width: 420px;
    min-width: 200px;
    flex: 1 1 auto;
}
.sprungfeld-feld:focus {
    border-color: var(--dva-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--dva-primary-rgb), 0.18);
}

/* ==========================================================================
   Vorgangs-Übersicht — der Einstieg
   docs/Konzept-Vorgangseinstieg.md, Stufen 1 und 3.

   Der Menuepunkt „Vorgaenge" fuehrt nicht mehr in den Bestand, sondern auf
   eine Antwort: „Zuletzt geoeffnet" zuerst, dann Favoriten, dann die benannten
   Ansichten in den Bestand. Die Liste bleibt vollstaendig — sie ist einen
   Klick entfernt statt der Eintritt.

   Alle Farben laufen ueber die --dva-Marken, damit die Seite in jedem Theme
   traegt, auch im neuen „Cockpit".
   ========================================================================== */

.einstieg { max-width: 1100px; }

.einstieg-kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.einstieg-umschalter { margin-left: auto; }
.einstieg-umschalter .btn { display: inline-flex; align-items: center; gap: .35rem; }
.einstieg-neu { flex-shrink: 0; }

.einstieg-block { margin-bottom: 1.75rem; }
.einstieg-titelzeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}
.einstieg-titel {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--dva-text-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
/* Die Zusage steht sichtbar am Block, nicht nur in einem Papier: Ein Verlauf,
   von dem man nicht weiss, wer ihn sieht, ist eine Zumutung. */
.einstieg-zusage {
    margin-left: auto;
    font-size: .74rem;
    color: var(--dva-success);
    border: 1px solid var(--dva-success);
    border-radius: 99px;
    padding: .05rem .55rem;
    white-space: nowrap;
}

.einstieg-liste {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    overflow: hidden;
}

/* Eine Zeile. Grosszuegig hoch — dies ist die Flaeche, auf der jemand morgens
   weitermacht, keine Tabelle zum Durchsehen. */
.einstieg-zeile {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .95rem;
    min-height: 56px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--dva-border);
}
.einstieg-zeile:last-child { border-bottom: none; }
.einstieg-zeile:hover { background: var(--dva-table-hover-bg); color: inherit; }
.einstieg-zeile:focus-visible { outline: 2px solid var(--dva-primary); outline-offset: -2px; }

.ez-sinnbild {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: .5rem;
    background: var(--dva-primary-light);
    color: var(--dva-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.ez-mitte { flex: 1 1 auto; min-width: 0; }
.ez-titel {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.ez-unter {
    display: block;
    font-size: .8rem;
    color: var(--dva-text-muted);
    overflow-wrap: anywhere;
}
.ez-rechts {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ez-zeit {
    font-size: .76rem;
    color: var(--dva-text-muted);
    white-space: nowrap;
}

.einstieg-fussnote {
    font-size: .78rem;
    color: var(--dva-text-muted);
    margin: .5rem 0 0;
}

.einstieg-leer {
    background: var(--dva-card-bg);
    border: 1px dashed var(--dva-border);
    border-radius: var(--dva-card-radius);
    padding: 1.75rem 1.25rem;
    text-align: center;
}
.einstieg-leer > i {
    font-size: 1.9rem;
    color: var(--dva-text-muted);
    display: block;
    margin-bottom: .6rem;
}

/* Benannte Ansichten: jede traegt ihre Frage und ihre Zahl (L5). */
.einstieg-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
}
.einstieg-karte {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    padding: .85rem 1rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color .14s;
}
.einstieg-karte:hover { border-color: var(--dva-primary); color: inherit; }
.einstieg-karte:focus-visible { outline: 2px solid var(--dva-primary); outline-offset: 2px; }
.ek-zahl {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dva-primary);
}
.ek-wort { display: block; font-weight: 600; font-size: .92rem; margin-top: .1rem; }
.ek-frage { display: block; font-size: .76rem; color: var(--dva-text-muted); margin-top: .15rem; }

@media (prefers-reduced-motion: reduce) {
    .einstieg-karte { transition: none; }
}
@media (max-width: 575.98px) {
    .einstieg-kopf h1 { width: 100%; }
    .einstieg-umschalter { margin-left: 0; width: 100%; }
    .einstieg-umschalter .btn { flex: 1 1 0; justify-content: center; }
    .einstieg-zeile { flex-wrap: wrap; }
    .ez-rechts { width: 100%; justify-content: flex-start; padding-left: calc(34px + .85rem); }
}

/* ==========================================================================
   Startseite und Spezialthemen (Prototyp B)
   „Womit machen Sie weiter?" statt Kennzahlen ueber den Bestand.

   Baut auf den Klassen der Vorgangs-Uebersicht auf (.einstieg-*), damit beide
   Seiten wie eine Sache wirken und nicht wie zwei Entwuerfe nebeneinander.
   Alle Farben ueber die --dva-Marken — traegt in jedem Theme.
   ========================================================================== */

.start-gruss {
    font-size: 1.55rem;
    font-weight: 620;
    letter-spacing: -.015em;
    margin: 0 0 1.4rem;
}
.start-heute-hint {
    margin-left: auto;
    font-size: .78rem;
    color: var(--dva-text-muted);
    white-space: nowrap;
}

/* Zustandsfarbe der Zeilen unter „Heute". Nie allein ueber Farbe: Jede Zeile
   traegt zusaetzlich Sinnbild und Text. */
.ez-sinnbild.start-eilt {
    background: rgba(220, 38, 38, .12);
    color: var(--dva-danger);
}
.ez-sinnbild.start-warte {
    background: rgba(217, 119, 6, .13);
    color: var(--dva-warning);
}

/* --- Spezialthemen ------------------------------------------------------
   Kacheln mit einem erklaerenden Satz. Der Unterschied zwischen einem Menue
   und einem Nachschlagewerk: Ein Menuepunkt setzt voraus, dass man den
   Begriff kennt — hier steht er dabei. */
.spezial-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .75rem;
}
.spezial-karte {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .85rem 1rem;
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    text-decoration: none;
    color: inherit;
    min-height: 64px;
    transition: border-color .14s;
}
.spezial-karte:hover { border-color: var(--dva-primary); color: inherit; }
.spezial-karte:focus-visible { outline: 2px solid var(--dva-primary); outline-offset: 2px; }
.sk-sinnbild {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: .5rem;
    background: var(--dva-primary-light);
    color: var(--dva-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.sk-text { flex: 1 1 auto; min-width: 0; }
.sk-titel {
    display: block;
    font-weight: 620;
    font-size: .95rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.sk-satz {
    display: block;
    font-size: .8rem;
    color: var(--dva-text-muted);
    line-height: 1.45;
    margin-top: .15rem;
    overflow-wrap: anywhere;
}
.sk-pfeil { color: var(--dva-text-muted); flex-shrink: 0; margin-top: .35rem; }

@media (prefers-reduced-motion: reduce) {
    .spezial-karte { transition: none; }
}
@media (max-width: 575.98px) {
    .start-gruss { font-size: 1.3rem; }
    .spezial-karten { grid-template-columns: 1fr; }
    .start-heute-hint { display: none; }
}

/* Suchtiefe: Hinweiszeile unter dem Suchformular (Schnell / Intensiv). */
.suchtiefe-hinweis {
    font-size: .84rem;
    color: var(--dva-text-muted);
    background: var(--dva-table-header-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    padding: .55rem .8rem;
    margin: .75rem 0 0;
    line-height: 1.5;
}
.suchtiefe-hinweis strong { color: var(--dva-text); }
.suchtiefe-hinweis.ist-intensiv { border-left: 3px solid var(--dva-primary); }


/* ==========================================================================
   Schlankes Menue — Gestaltung nach Prototyp B
   Greift nur unter .sidebar-schlank, laesst die klassische Seitenleiste also
   unberuehrt. Alle Farben ueber die --dva-Marken: So traegt es in Hell,
   Dunkel, Natur, Ozean und Cockpit gleichermassen. Im Prototypen war der
   aktive Punkt dunkelblau gefuellt — als fester Wert waere er im dunklen
   Theme unsichtbar, deshalb hier die Akzentfarbe des jeweiligen Schemas.
   ========================================================================== */

.sidebar-schlank .sidebar-nav {
    padding: 0.5rem 0.6rem;
}

/* Ueberschrift: klein, versal, ruhig — sie ordnet, sie bedient nicht. */
.sidebar-schlank .sidebar-section-fest {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dva-sidebar-text);
    opacity: 0.65;
    padding: 0.6rem 0.6rem 0.3rem;
    margin: 0;
}

/* Der Punkt selbst: gerundete Fläche statt Zeile mit Randstrich. */
.sidebar-schlank .sidebar-nav-item {
    position: relative;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    margin: 0 0 0.15rem;
    border-radius: 0.6rem;
    border-left: none;
    font-size: 0.92rem;
    font-weight: 600;
}
.sidebar-schlank .sidebar-nav-item:hover {
    background: var(--dva-sidebar-hover);
}
.sidebar-schlank .sidebar-nav-item.active {
    background: var(--dva-primary);
    color: #fff;
    border-left: none;
    font-weight: 650;
}
.sidebar-schlank .sidebar-nav-item.active i {
    color: #fff;
    opacity: 0.9;
}
.sidebar-schlank .sidebar-nav-item i {
    font-size: 1.1rem;
    width: 1.4rem;
    flex: 0 0 auto;
}

/* Zaehler rechts. Rot bleibt rot — es ist eine Aussage, kein Schmuck. */
.sidebar-schlank .sidebar-nav-item .badge {
    margin-left: auto;
    font-size: 0.72rem !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    min-width: 1.4rem;
}
.sidebar-schlank .sidebar-nav-item.active .badge {
    background: #fff !important;
    color: var(--dva-primary) !important;
}

.sidebar-schlank .sidebar-divider {
    margin: 0.75rem 0.6rem 0.25rem;
}

/* Eingeklappte Leiste: nur Sinnbilder, Zaehler als kleiner Punkt oben rechts.
   Das ist die vom Auftraggeber gewuenschte Umschaltung Text/Symbole.
   Die Klasse haengt am <html>, nicht an der Leiste — siehe assets/js/app.js. */
html.sidebar-collapsed .sidebar-schlank .sidebar-nav-item {
    justify-content: center;
    padding: 0.5rem 0;
}
/* Der Bestand blendet den Zaehler beim Einklappen ganz aus. Genau die Zahl ist
   aber der Grund, ueberhaupt hinzusehen — im Prototyp bleibt sie als Punkt in
   der Ecke stehen. Ohne sie waere das Einklappen ein Verlust an Information. */
html.sidebar-collapsed .sidebar-schlank .sidebar-nav-item .badge {
    display: block;
    position: absolute;
    top: 1px;
    right: 5px;
    margin: 0;
    min-width: 0;
    padding: 0 0.3rem;
    font-size: 0.65rem !important;
    line-height: 1.4;
}
html.sidebar-collapsed .sidebar-schlank .sidebar-section-fest {
    text-align: center;
    padding: 0.6rem 0 0.3rem;
}
html.sidebar-collapsed .sidebar-schlank .sidebar-section-fest span {
    display: none;
}
/* Ohne Beschriftung braucht die Ueberschrift wenigstens eine Trennlinie,
   sonst kleben die beiden Gruppen aneinander. */
html.sidebar-collapsed .sidebar-schlank .sidebar-section-fest::after {
    content: "";
    display: block;
    width: 1.4rem;
    height: 1px;
    margin: 0 auto;
    background: var(--dva-sidebar-border);
}


/* ==========================================================================
   Startseite und Mappen-Zeile — Gestaltung nach Prototyp B
   Der Prototyp arbeitete mit festen Farbwerten. Hier stehen ausschliesslich
   --dva-Marken: dieselbe Optik traegt damit in Hell, Dunkel, Natur, Ozean und
   Cockpit, ohne dass eine Fassung je Schema noetig waere.
   ========================================================================== */

.startseite {
    max-width: 1080px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.start-kopf {
    margin: 0.25rem 0 1.25rem;
}
.start-gruss {
    font-family: var(--dva-font-heading);
    font-weight: var(--dva-heading-weight);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--dva-text);
    margin: 0 0 0.35rem;
}
.start-unterzeile {
    color: var(--dva-text-muted);
    font-size: 0.95rem;
    max-width: 62ch;
    margin: 0;
}

/* --- Die Karte: Titel und erklaerender Halbsatz stehen INNEN, in einer
       eigenen Kopfzeile. Das war der auffaelligste Unterschied zum Entwurf:
       vorher schwebte die Ueberschrift ueber einem Kasten. --- */
.karte {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    box-shadow: var(--dva-card-shadow);
    margin-bottom: 1.1rem;
    overflow: hidden;
}
.karte-kopf {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.95rem 1.1rem 0.7rem;
}
.karte-titel {
    font-family: var(--dva-font-heading);
    font-weight: var(--dva-heading-weight);
    font-size: 1.12rem;
    color: var(--dva-text);
    margin: 0;
}
.karte-unter {
    font-size: 0.86rem;
    color: var(--dva-text-muted);
}
.karte-liste {
    display: flex;
    flex-direction: column;
}
.karte-fuss {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.7rem 1.1rem 0.85rem;
    border-top: 1px solid var(--dva-border);
    font-size: 0.82rem;
    color: var(--dva-text-muted);
}
.karte-fuss .bi {
    color: var(--dva-success);
    flex: 0 0 auto;
}
.karte-leer {
    padding: 1.75rem 1.1rem 1.9rem;
    text-align: center;
}
.karte-leer > .bi {
    font-size: 2rem;
    color: var(--dva-text-muted);
    opacity: 0.55;
    display: block;
    margin-bottom: 0.6rem;
}

/* --- Eine Mappen-Zeile --- */
.mz {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--dva-border);
    color: var(--dva-text);
    text-decoration: none;
    transition: background-color 0.12s ease;
}
.karte-liste > .mz:first-child {
    border-top: 1px solid var(--dva-border);
}
.mz:hover {
    background: rgba(var(--dva-primary-rgb), 0.06);
    color: var(--dva-text);
}

/* Das Sinnbild sitzt auf einer eigenen Kachel — daran erkennt der Anwender
   Bereich und Vorgang, ohne die Beschriftung zu lesen. */
.mz-sinnbild {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(var(--dva-primary-rgb), 0.1);
    color: var(--dva-primary);
}
.mz-sinnbild-bereich {
    background: rgba(var(--dva-primary-rgb), 0.16);
}
.mz-sinnbild-eilt {
    background: rgba(220, 53, 69, 0.12);
    color: var(--dva-danger);
}
.mz-sinnbild-warte {
    background: rgba(255, 193, 7, 0.16);
    color: var(--dva-warning);
}

.mz-mitte {
    flex: 1 1 auto;
    min-width: 0;
}
.mz-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}
.mz-titel {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dva-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.mz-unter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.83rem;
    color: var(--dva-text-muted);
}
.mz-trenn {
    opacity: 0.5;
}

/* Marken statt Flies-Text: Typ, Status und Nummer sind eigene Traeger. */
.mz-marke {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.mz-marke-typ {
    background: rgba(var(--dva-primary-rgb), 0.1);
    color: var(--dva-primary);
}
.mz-marke-status {
    background: var(--dva-content-bg);
    color: var(--dva-text);
    border: 1px solid var(--dva-border);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
/* Die gepflegte Statusfarbe wird ein Punkt, nicht die Flaeche. Als Hintergrund
   waere sie ein Kontrastrisiko: Der Wert kommt aus der Datenbank, und ob die
   Schrift darauf lesbar bleibt, weiss niemand vorher. Als Punkt traegt sie
   dieselbe Aussage und kann nichts unlesbar machen. */
.mz-marke-status::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--mz-statusfarbe, var(--dva-text-muted));
    flex: 0 0 auto;
}
.mz-marke-nr {
    background: var(--dva-content-bg);
    border: 1px solid var(--dva-border);
    color: var(--dva-text-muted);
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.7rem;
}

.mz-rechts {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dva-text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}
.mz-tun {
    color: var(--dva-primary);
    font-weight: 600;
}
.mz-pfeil {
    opacity: 0.45;
    font-size: 0.95rem;
}
.mz:hover .mz-pfeil {
    opacity: 0.85;
}

/* Am Telefon fallen Zeitpunkt und Handlungswort weg — der Pfeil sagt genug,
   und die Zeile bleibt ohne Querlauf lesbar. */
@media (max-width: 575.98px) {
    .karte-kopf {
        padding: 0.8rem 0.85rem 0.6rem;
    }
    .mz {
        padding: 0.65rem 0.85rem;
        gap: 0.65rem;
    }
    .mz-zeit,
    .mz-tun {
        display: none;
    }
    .mz-titel {
        white-space: normal;
    }
}


/* ==========================================================================
   Kopfzeilen-Suche — Prototyp B
   Ein breites Feld in der Mitte statt eines Kaestchens am Rand, mit den zwei
   Suchtiefen unmittelbar daneben. Nur bei eingeschaltetem schlankem Menue.
   ========================================================================== */

.kopfsuche {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    max-width: 720px;
    margin: 0 1.25rem;
    padding: 0.25rem 0.3rem 0.25rem 0.75rem;
    background: var(--dva-input-bg);
    border: 1px solid var(--dva-input-border);
    border-radius: 0.7rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.kopfsuche:focus-within {
    border-color: var(--dva-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--dva-primary-rgb), 0.18);
}
.kopfsuche-lupe {
    color: var(--dva-text-muted);
    font-size: 1rem;
    flex: 0 0 auto;
}
.kopfsuche-feld {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--dva-input-text);
    font-size: 0.92rem;
    padding: 0.35rem 0.25rem;
    outline: none;
}
.kopfsuche-feld::placeholder {
    color: var(--dva-text-muted);
    opacity: 0.85;
}

/* Die zwei Tiefen sind Knoepfe, keine Auswahlliste: Beide sind gleich weit
   entfernt, und der Anwender sieht ohne Aufklappen, dass es sie gibt. */
.kopfsuche-tiefe {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    background: transparent;
    color: var(--dva-text-muted);
    white-space: nowrap;
}
.kopfsuche-tiefe:hover {
    background: rgba(var(--dva-primary-rgb), 0.1);
    color: var(--dva-primary);
}
.kopfsuche-tiefe-vorgabe {
    background: var(--dva-primary);
    color: #fff;
}
.kopfsuche-tiefe-vorgabe:hover {
    background: var(--dva-primary-dark);
    color: #fff;
}

/* Ab hier wird die Kopfzeile zu eng fuer beide Beschriftungen — dann bleiben
   die Sinnbilder. Der Titel des Knopfes nennt weiterhin, was sie tun. */
@media (max-width: 1199.98px) {
    .kopfsuche {
        margin: 0 0.75rem;
    }
    .kopfsuche-tiefe span {
        display: none;
    }
}

/* Das Kachelraster „In den Bestand" sitzt jetzt in einer Karte und braucht
   deshalb den Innenabstand, den vorher der eigene Block mitbrachte. */
.karte > .einstieg-karten {
    padding: 0 1.1rem 1.1rem;
}
.karte > .karte-leer + .karte-fuss {
    border-top: 1px solid var(--dva-border);
}

/* (Die frueher hier stehende, auf einzelne Seiten begrenzte Korrektur von
   .text-muted ist entfallen — sie gilt jetzt global im Abschnitt
   „TEXTFARBEN AN DIE SCHEMATA BINDEN" am Ende dieser Datei.) */

/* Der Benutzerknopf in der Kopfzeile trug .text-dark — einen festen Schwarzwert
   von Bootstrap. Auf der dunklen Kopfzeile von „Dunkel" und „Cockpit" stand er
   damit fast unsichtbar. Betrifft alle Schemata, faellt aber erst dort auf. */
.app-topbar .btn-link.text-dark {
    color: var(--dva-text) !important;
}

/* ==========================================================================
   Spezialthemen ins eigene Menue heften
   Die Kachel und der Knopf sitzen nebeneinander in einer gemeinsamen Huelle.
   ========================================================================== */

.spezial-kachel {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    overflow: hidden;
    transition: border-color 0.12s ease;
}
.spezial-kachel:hover {
    border-color: var(--dva-primary);
}
/* Die Kachel bringt ihren Rahmen jetzt von aussen mit. */
.spezial-kachel > .spezial-karte {
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    min-width: 0;
}
.spezial-kachel > .spezial-karte:hover {
    border: 0;
}

.sk-heft {
    display: flex;
    flex: 0 0 auto;
    border-left: 1px solid var(--dva-border);
}
.sk-heft-knopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 4.6rem;
    padding: 0.4rem 0.3rem;
    border: 0;
    background: transparent;
    color: var(--dva-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.sk-heft-knopf .bi {
    font-size: 1.05rem;
}
.sk-heft-knopf:hover {
    background: rgba(var(--dva-primary-rgb), 0.08);
    color: var(--dva-primary);
}
/* Angeheftet: der Zustand muss ohne Lesen erkennbar sein. */
.ist-angeheftet {
    border-color: var(--dva-primary);
}
.ist-angeheftet .sk-heft-knopf {
    background: rgba(var(--dva-primary-rgb), 0.1);
    color: var(--dva-primary);
}
.sk-heft-knopf:focus-visible {
    outline: 2px solid var(--dva-primary);
    outline-offset: -2px;
}

@media (max-width: 575.98px) {
    .sk-heft-knopf {
        width: 3.4rem;
    }
    .sk-heft-wort {
        display: none;
    }
}


/* ==========================================================================
   >>> KNOEPFE — VARIANTE G <<<            (docs/prototyp-knoepfe.html)
   Gewaehlt am 2026-08-30. Alles zwischen diesen beiden Marken gehoert
   zusammen; wer den alten Bootstrap-Zustand zurueck will, loescht den Block.

   DER BEFUND, DER DAZU FUEHRTE
   1202 Knoepfe, davon 436 als .btn-outline-secondary — und keine einzige
   eigene Regel: Es war unveraendertes Bootstrap 5.3. Dessen Grau (#6c757d)
   ist mit keiner --dva-Marke verwandt und passt in keinem der Schemata.
   Vor allem aber: Wenn jeder Knopf einen Rahmen traegt, traegt keiner mehr
   einen. Bei sieben Knoepfen nebeneinander sah keiner wie der wichtige aus.

   DIE DREI REGELN VON G
   1. FLAECHE STATT RAHMEN   Zweitrangiges bekommt eine leise Flaeche.
                             Der Rahmen bleibt der einen wichtigen Handlung.
   2. GRUPPE STATT REIHE     Eine Auswahl (Zeitraum, Ansicht) ist EIN Bauteil
                             mit Trennstrichen, keine Reihe freier Knoepfe.
   3. NEBENSACHEN LEISE      .btn-link verliert den Kasten ganz.

   Die Klassennamen im Markup bleiben unveraendert — es sind keine 1202
   Einzelaenderungen, sondern eine Schicht darueber. Alle Farben kommen aus
   --dva-Marken und tragen damit in Hell, Dunkel, Natur, Ozean und Cockpit.
   ========================================================================== */

.btn {
    --g-flaeche: rgba(100, 116, 139, 0.10);
    --g-flaeche-hover: rgba(100, 116, 139, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    padding: 0.44rem 0.82rem;
    font-size: 0.875rem;
    font-weight: 550;
    line-height: 1.4;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-sm {
    padding: 0.34rem 0.68rem;
    font-size: 0.83rem;
    border-radius: 0.45rem;
}
.btn-lg {
    padding: 0.6rem 1.1rem;
    font-size: 1rem;
    border-radius: 0.6rem;
}

/* Ein Knopf, der nur ein Sinnbild traegt, braucht keine Wortbreite.
   :has() koennen alle Browser, die Bootstrap 5.3 ohnehin verlangt; faellt es
   aus, ist der Knopf lediglich etwas breit — es bricht nichts. */
.btn:has(> i:only-child) {
    padding-left: 0.56rem;
    padding-right: 0.56rem;
}
.btn-sm:has(> i:only-child) {
    padding-left: 0.46rem;
    padding-right: 0.46rem;
}

/* ---- Regel 1: Flaeche statt Rahmen -------------------------------------- */
/* Die 436 zweitrangigen Knoepfe. Sie bleiben sichtbar und anfassbar,
   hoeren aber auf, um Aufmerksamkeit zu streiten. */
.btn-outline-secondary,
.btn-outline-light {
    background-color: var(--g-flaeche);
    border-color: transparent;
    color: var(--dva-text);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: var(--g-flaeche-hover);
    border-color: transparent;
    color: var(--dva-text);
}
.btn-outline-secondary > i,
.btn-outline-light > i {
    color: var(--dva-text-muted);
}

/* Der Hauptweg — als einziger gefuellt und mit einem Hauch Tiefe. */
.btn-primary {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--dva-primary-rgb), 0.25);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--dva-primary-dark);
    border-color: var(--dva-primary-dark);
    color: #fff;
}

/* Die zweitwichtigste Handlung behaelt ihren Rahmen — jetzt ist er wieder
   ein Signal, weil ihn sonst kaum noch jemand traegt. */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--dva-primary);
    color: var(--dva-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: rgba(var(--dva-primary-rgb), 0.1);
    border-color: var(--dva-primary);
    color: var(--dva-primary);
}

/* Neutral gefuellt — im Bestand meist der EINGESCHALTETE Zustand
   (etwa Heute im Zeitraum-Filter). Dunkel statt Bootstrap-Grau. */
.btn-secondary {
    background-color: var(--dva-text);
    border-color: var(--dva-text);
    color: var(--dva-card-bg);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--dva-text);
    border-color: var(--dva-text);
    color: var(--dva-card-bg);
    opacity: 0.88;
}
.btn-secondary > i { color: inherit; }

/* Bedeutungsfarben als getoente Flaeche. Rot bleibt rot — es ist eine
   Aussage, kein Schmuck —, aber es schreit nicht mehr mit einem Rahmen. */
.btn-outline-danger {
    background-color: rgba(220, 38, 38, 0.12);
    border-color: transparent;
    color: var(--dva-danger);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: rgba(220, 38, 38, 0.2);
    border-color: transparent;
    color: var(--dva-danger);
}
.btn-outline-warning {
    background-color: rgba(217, 119, 6, 0.14);
    border-color: transparent;
    color: var(--dva-warning);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: rgba(217, 119, 6, 0.22);
    border-color: transparent;
    color: var(--dva-warning);
}
.btn-outline-success {
    background-color: rgba(22, 163, 74, 0.12);
    border-color: transparent;
    color: var(--dva-success);
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: rgba(22, 163, 74, 0.2);
    border-color: transparent;
    color: var(--dva-success);
}
.btn-outline-info {
    background-color: rgba(2, 132, 199, 0.12);
    border-color: transparent;
    color: var(--dva-info, #0284c7);
}
.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: rgba(2, 132, 199, 0.2);
    border-color: transparent;
    color: var(--dva-info, #0284c7);
}
.btn-outline-danger > i,
.btn-outline-warning > i,
.btn-outline-success > i,
.btn-outline-info > i { color: inherit; }

/* Gefuellte Bedeutungsfarben: bleiben gefuellt, nur Form und Farbmarke neu. */
.btn-danger  { background-color: var(--dva-danger);  border-color: var(--dva-danger);  color: #fff; }
.btn-success { background-color: var(--dva-success); border-color: var(--dva-success); color: #fff; }
.btn-warning { background-color: var(--dva-warning); border-color: var(--dva-warning); color: #fff; }
.btn-danger:hover, .btn-success:hover, .btn-warning:hover,
.btn-danger:focus, .btn-success:focus, .btn-warning:focus { color: #fff; opacity: 0.9; }
.btn-danger > i, .btn-success > i, .btn-warning > i { color: inherit; }

/* KI-Handlungen: dieselbe Sprache, eigene Farbe. Loest die fruehere
   Rahmen-Fassung weiter oben in dieser Datei ab. */
.btn.ai-btn {
    background-color: var(--dva-ai-bg);
    border-color: transparent;
    color: var(--dva-ai);
}
.btn.ai-btn:hover,
.btn.ai-btn:focus {
    background-color: var(--dva-ai-bg);
    border-color: var(--dva-ai-border);
    color: var(--dva-ai);
}
.btn.ai-btn > i { color: inherit; }

/* ---- Regel 3: Nebensachen leise ----------------------------------------- */
.btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--dva-text-muted);
    text-decoration: none;
}
.btn-link:hover,
.btn-link:focus {
    background-color: var(--g-flaeche);
    color: var(--dva-text);
    text-decoration: none;
}
.btn-link > i { color: inherit; }

/* ---- Regel 2: Gruppe statt Reihe ---------------------------------------- */
/* Eine Auswahl ist ein Bauteil. Bootstrap setzt dafuer negative Aussenraender
   und eckt die Innenkanten ab; hier uebernimmt der Behaelter die Form, und die
   Knoepfe darin werden zu Feldern mit Trennstrich. */
.btn-group,
.btn-group-sm {
    background-color: var(--g-flaeche);
    border-radius: 0.5rem;
    overflow: hidden;
}
.btn-group > .btn,
.btn-group-sm > .btn,
.btn-group > .btn-check + .btn {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
.btn-group > .btn + .btn,
.btn-group-sm > .btn + .btn,
.btn-group > .btn-check + .btn {
    border-left: 1px solid var(--dva-border);
}
.btn-group > .btn:hover {
    background-color: var(--g-flaeche-hover);
}
/* Der eingeschaltete Zustand — gleich ob per .active, per Radio oder als
   ausgeschalteter Sie-sind-hier-Knopf gebaut. */
.btn-group > .btn.active,
.btn-group > .btn:disabled,
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-primary,
.btn-group > .btn-secondary {
    background-color: var(--dva-primary);
    color: #fff;
    opacity: 1;
}
.btn-group > .btn.active > i,
.btn-group > .btn:disabled > i,
.btn-group > .btn-check:checked + .btn > i,
.btn-group > .btn-primary > i,
.btn-group > .btn-secondary > i { color: #fff; }

/* Ausserhalb einer Gruppe bleibt der Radio-Knopf ein normaler Knopf. */
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #fff;
}
.btn-check:checked + .btn > i { color: #fff; }

/* ---- Zustaende ---------------------------------------------------------- */
.btn:focus-visible {
    outline: 2px solid var(--dva-primary);
    outline-offset: 2px;
    box-shadow: none;
}
.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Am Telefon darf ein Knopf nicht kleiner sein als eine Fingerkuppe. */
@media (max-width: 575.98px) {
    .btn {
        min-height: 38px;
    }
    .btn-sm {
        min-height: 34px;
    }
}
/* ==========================================================================
   >>> ENDE KNOEPFE — VARIANTE G <<<
   ========================================================================== */


/* ==========================================================================
   >>> DETAILSEITEN — VARIANTE G <<<
   Firmen, Ansprechpartner und alles, was denselben Aufbau nutzt.
   Gewaehlt am 2026-08-30, dieselbe Sprache wie die Knopf-Schicht darueber.
   Rein optisch: kein Markup geaendert, damit nichts an fremder, laufender
   Arbeit in diesen Dateien haengen bleibt. Ruecknahme = Block loeschen.
   ========================================================================== */

/* ---- Bootstraps Rahmenfarben an die Schemata binden ---------------------
   .border, .border-bottom & Co. setzen bei Bootstrap den festen Wert
   #dee2e6. Auf dunklem Grund ist der viel zu hell, im Cockpit falsch —
   dieselbe Familie von Fehlern wie .text-dark und .text-muted. Hier gilt
   stattdessen die Randfarbe des jeweiligen Schemas. */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--dva-border) !important;
}

/* ---- Rubrik-Ueberschrift ------------------------------------------------
   Bisher: kleine graue Versalien ueber einem Trennstrich in voller Breite.
   Der Strich zieht mehr Aufmerksamkeit auf sich als die Ueberschrift und
   zerschneidet die Karte. Jetzt traegt ein kurzer Akzentbalken die Rubrik —
   dasselbe Mittel wie der gefuellte Menuepunkt in der Seitenleiste. */
.card-body-custom h6.text-uppercase.text-muted,
.detail-section h6.text-uppercase.text-muted {
    position: relative;
    padding-left: 0.7rem;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    margin-bottom: 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dva-text) !important;
    opacity: 0.72;
}
.card-body-custom h6.text-uppercase.text-muted::before,
.detail-section h6.text-uppercase.text-muted::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 3px;
    border-radius: 2px;
    background: var(--dva-primary);
}
/* Zwischen zwei Rubriken braucht es Luft, nicht einen Strich. */
.card-body-custom h6.text-uppercase.text-muted.mt-4 {
    margin-top: 2rem !important;
}

/* ---- Angabe und Wert ----------------------------------------------------
   Die Paare standen als fette Beschriftung neben normalem Text, ohne jede
   Zeilenfuehrung — bei zehn Angaben untereinander verliert das Auge die
   Zeile. Jetzt ist die Beschriftung leise und der WERT das Kraeftige: Man
   liest, was drinsteht, nicht, wie das Feld heisst. */
.card-body-custom dl.row > dt {
    font-weight: 500;
    font-size: 0.86rem;
    color: var(--dva-text-muted);
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
}
.card-body-custom dl.row > dd {
    font-size: 0.94rem;
    color: var(--dva-text);
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
    margin-bottom: 0;
}
/* Eine Haarlinie je Paar — sie fuehrt das Auge ueber die Breite, ohne die
   Karte zu zerschneiden. Das letzte Paar bekommt keine. */
.card-body-custom dl.row > dd {
    border-bottom: 1px solid var(--dva-border);
}
.card-body-custom dl.row > dt {
    border-bottom: 1px solid var(--dva-border);
}
.card-body-custom dl.row > dt:last-of-type,
.card-body-custom dl.row > dd:last-of-type {
    border-bottom: 0;
}
/* Auf schmalen Bildschirmen stehen dt und dd untereinander — dann darf nur
   der Wert die Linie tragen, sonst entsteht ein Doppelstrich. */
@media (max-width: 575.98px) {
    .card-body-custom dl.row > dt {
        border-bottom: 0;
        padding-bottom: 0;
    }
}

/* Ein Verweis in einem Wert ist der Normalfall (Firma, E-Mail, Telefon) und
   muss nicht mit Unterstreichung um Aufmerksamkeit bitten. */
.card-body-custom dl.row > dd a {
    text-decoration: none;
    color: var(--dva-primary);
}
.card-body-custom dl.row > dd a:hover {
    text-decoration: underline;
}

/* ---- Kopf der Detailseite ----------------------------------------------- */
.detail-header {
    padding-bottom: 0.9rem;
}
.detail-header h1 {
    letter-spacing: -0.015em;
}
/* Die Angaben unter dem Titel (Firma, E-Mail, Telefon) sind Sprungziele,
   keine Beschriftung — sie bekommen die Behandlung leiser Knoepfe. */
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    align-items: center;
}
.detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--dva-text-muted);
}
.detail-meta-item a {
    color: var(--dva-primary);
    text-decoration: none;
}
.detail-meta-item a:hover {
    text-decoration: underline;
}

/* ---- Leere Vorratsliste -------------------------------------------------
   Gehoert zu inc/views/companies/_vorrat_leer.php: Das Feld bleibt stehen,
   ist aber sichtbar noch nicht benutzbar. */
.form-select:disabled,
.form-control:disabled {
    background-color: var(--dva-content-bg);
    color: var(--dva-text-muted);
    opacity: 1;
}
/* ==========================================================================
   >>> ENDE DETAILSEITEN — VARIANTE G <<<
   ========================================================================== */


/* ==========================================================================
   >>> TEXTFARBEN AN DIE SCHEMATA BINDEN <<<
   2026-08-30. Ruecknahme = Block loeschen.

   DER FEHLER, DEN DAS BEHEBT

   Bootstrap loest .text-muted, .text-dark und .text-secondary auf FESTE
   dunkle Grauwerte auf (rgba(33,37,41,.75) und Verwandte). Auf hellem Grund
   faellt das nicht auf. Auf dem dunklen Grund von „Dunkel", „Ozean" und
   „Cockpit" steht dieser Text nahezu unsichtbar — ganze Saetze fehlen dort
   schlicht, ohne dass es einen Fehler gaebe.

   Betroffen sind 1559 Stellen mit .text-muted, 92 mit .text-dark und 35 mit
   .text-secondary. Sie einzeln umzuschreiben waere sinnlos: Es ist EIN
   Fehler, kein 1686-facher. Deshalb eine Regel statt 1686 Aenderungen.

   Beispiele, die vorher unlesbar waren: der Hinweis im Presse-Kasten an der
   Firma, „Noch keine Merkmale", die Erklaerzeilen unter Formularfeldern und
   der Benutzername in der Kopfzeile.
   ========================================================================== */

.text-muted,
.text-body-secondary {
    color: var(--dva-text-muted) !important;
}

/* .text-dark heisst „dunkler Text" und meint in Wahrheit „gut lesbarer
   Text". Im dunklen Schema ist das ein heller Wert. */
.text-dark,
.text-body,
.text-body-emphasis {
    color: var(--dva-text) !important;
}

.text-secondary {
    color: var(--dva-text-muted) !important;
}

/* Auf gefuellten farbigen Flaechen gilt weiterhin die Schriftfarbe der
   Flaeche — sonst wuerde eine .text-muted-Zeile in einem gefuellten Knopf
   oder einem farbigen Hinweis grau statt weiss. */
.btn-primary .text-muted,
.btn-danger .text-muted,
.btn-success .text-muted,
.btn-warning .text-muted,
.btn-secondary .text-muted,
.badge .text-muted {
    color: inherit !important;
    opacity: 0.8;
}
/* ==========================================================================
   >>> ENDE TEXTFARBEN <<<
   ========================================================================== */


/* ==========================================================================
   >>> FORMULARE — VARIANTE G <<<
   2026-08-31. Ruecknahme = Block loeschen.

   Die Knopf-Schicht hatte die Knoepfe erneuert, das Formular selbst aber
   unangetastet gelassen. Es war weiterhin unveraendertes Bootstrap: duenne
   graue Rahmen mit Bootstrap-eigenen Festwerten, Beschriftungen und
   Hilfetexte im selben Grau, und in einer Zeile standen Felder von 2rem
   neben einem Rollkasten von 11rem.
   ========================================================================== */

/* ---- Eingabefelder ------------------------------------------------------
   Dieselbe Rundung und dieselbe Randfarbe wie die Knoepfe. Der Fokusring ist
   die Akzentfarbe des Schemas statt Bootstraps festem Blau. */
.form-control,
.form-select {
    border-radius: 0.5rem;
    border: 1px solid var(--dva-input-border);
    background-color: var(--dva-input-bg);
    color: var(--dva-input-text);
    padding: 0.5rem 0.75rem;
    font-size: 0.92rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--dva-text-muted);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--dva-primary);
    box-shadow: 0 0 0 3px rgba(var(--dva-primary-rgb), 0.16);
    background-color: var(--dva-input-bg);
    color: var(--dva-input-text);
}
.form-control::placeholder {
    color: var(--dva-text-muted);
    opacity: 0.7;
}
textarea.form-control {
    min-height: 5rem;
    line-height: 1.55;
}

/* ---- Beschriftung und Hilfetext -----------------------------------------
   Vorher trugen Beschriftung und Hilfetext dasselbe Grau und dieselbe
   Groesse — das Auge fand die Feldnamen nicht wieder. Jetzt ist die
   Beschriftung kraeftig und knapp, der Hilfetext leiser und schmaler. */
.form-label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--dva-text);
    margin-bottom: 0.3rem;
    letter-spacing: 0.005em;
}
.form-text {
    font-size: 0.775rem;
    line-height: 1.45;
    color: var(--dva-text-muted);
    margin-top: 0.3rem;
    max-width: 46ch;
}

/* ---- Zeilenrhythmus -----------------------------------------------------
   Der Hilfetext gehoert unmittelbar unter SEIN Feld. Ein frueherer Versuch
   mit `margin-top:auto` schob ihn an den Spaltenfuss und riss damit genau
   die Luecke auf, die er schliessen sollte — die Zeile ist so hoch wie ihr
   laengster Hilfetext, und darunter stand dann ueberall Leere.
   Stattdessen: Der Hilfetext bleibt in seinem Fluss und wird begrenzt, damit
   er nicht zur Textwand wird. */
.card-body-custom .row.g-3 > [class^="col-"],
.card-body-custom .row.g-3 > [class*=" col-"] {
    align-content: start;
}

/* ---- Haken und Schalter -------------------------------------------------- */
.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    border-color: var(--dva-input-border);
    background-color: var(--dva-input-bg);
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--dva-primary);
    border-color: var(--dva-primary);
}
.form-check-input:focus {
    border-color: var(--dva-primary);
    box-shadow: 0 0 0 3px rgba(var(--dva-primary-rgb), 0.16);
}
.form-check-label {
    cursor: pointer;
    font-size: 0.9rem;
}

/* (Der frueher hier stehende Abschnitt AUSWAHL-MARKEN ist am 2026-08-31
   entfallen. Er zeigte alle Moeglichkeiten dauerhaft als Marken — bei
   vierzehn Sparten eine halbe Bildschirmhoehe, auch wenn nichts gewaehlt
   war. Ersetzt durch das Merkmals-Muster im Abschnitt
   „STAMMDATEN — VARIANTE C" am Ende dieser Datei.) */

/* ==========================================================================
   KLEBENDER FORMULARFUSS
   Der Firmenstamm ist ueber zwei Bildschirmhoehen lang. „Speichern" stand
   ganz unten — auf halber Strecke sah man nicht, ob man noch speichern kann.
   ========================================================================== */
.formular-fuss {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.75rem -1.5rem -1.5rem;
    padding: 0.85rem 1.5rem;
    background: var(--dva-card-bg);
    border-top: 1px solid var(--dva-border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}
/* Am Telefon ist der Platz knapp: Speichern nimmt die Breite, Abbrechen
   steht daneben. Beide bleiben mit dem Daumen erreichbar. */
@media (max-width: 575.98px) {
    .formular-fuss {
        margin: 1.5rem -1rem -1rem;
        padding: 0.7rem 1rem;
    }
    .formular-fuss .btn-primary {
        flex: 1 1 auto;
    }
}

/* In der Handy-Ansicht KLEBT der Fuss nicht — und das ist Absicht.
   Zwei Gruende, beide nachgemessen:
   1. `layout-mobile.php` setzt `body { overflow-y: auto }`. Damit wird der
      Rumpf selbst zum Rollbereich, und `position: sticky` greift darin nicht
      mehr — der Fuss bliebe einfach am Ende stehen, ohne zu kleben.
   2. Unten sitzt ohnehin die feste Registerleiste `.m-tabbar` (60px hoch,
      bei 812px Bildschirmhoehe von 752 bis 812). Ein klebender Fuss laege
      genau dahinter; „Speichern" waere unsichtbar und nicht antippbar.
   Statt eine Wirkung vorzutaeuschen, ist es hier ein normaler Fuss am Ende
   des Formulars — so, wie es vorher ueberall war. */
.m-body .formular-fuss {
    position: static;
    box-shadow: none;
}
/* ==========================================================================
   >>> ENDE FORMULARE — VARIANTE G <<<
   ========================================================================== */


/* ==========================================================================
   >>> STAMMDATEN — VARIANTE C <<<      (docs/prototyp-stammdaten-c.html)
   Gewaehlt am 2026-08-31. Ruecknahme = Block loeschen; die Maske faellt dann
   auf das gewohnte einspaltige Formular zurueck.

   Links die Felder, rechts ein mitlaufender Wegweiser: wie vollstaendig der
   Datensatz ist, was konkret fehlt, wo die uebrigen Rubriken stehen.
   Gespeichert wird feldweise und automatisch.
   ========================================================================== */

/* ---- Zwei Spalten ------------------------------------------------------- */
.sd-zwei {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 1.1rem;
    align-items: start;
}
.sd-haupt { min-width: 0; }
/* Beim Anlegen einer Firma gibt es noch nichts zu bewerten — der
   Wegweiser entfaellt, und mit ihm seine Spalte. */
.sd-zwei.sd-einspaltig { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1199.98px) {
    .sd-zwei { grid-template-columns: minmax(0, 1fr); }
    /* Auf schmalen Bildschirmen steht der Wegweiser OBEN — dort beantwortet
       er die Frage „lohnt das Weiterlesen", bevor man scrollt. Unten haette
       er sie beantwortet, wenn es zu spaet ist. */
    .sd-wegweiser { order: -1; }
}

.sd-wegweiser {
    position: sticky;
    top: calc(var(--dva-topbar-height, 56px) + 0.9rem);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
@media (max-width: 1199.98px) {
    .sd-wegweiser {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .sd-wegweiser > .sd-kasten { flex: 1 1 220px; }
}
/* Auf dem TELEFON steht er dagegen am Ende. Nachgemessen: Bei 375px Breite
   liegen die drei Kaesten untereinander und fuellen den ganzen ersten
   Bildschirm — man scrollte an einer Auskunft vorbei, bevor man das erste
   Feld sieht. Auf dem Tablet passen sie nebeneinander und duerfen oben
   bleiben. */
@media (max-width: 575.98px) {
    .sd-wegweiser {
        order: 1;
        flex-direction: column;
    }
}

.sd-kasten {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: 0.7rem;
    padding: 0.8rem 0.85rem;
}
.sd-kasten h3 {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dva-text-muted);
}
.sd-klein {
    margin: 0.45rem 0 0;
    font-size: 0.73rem;
    color: var(--dva-text-muted);
}

.sd-quote {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.sd-quote small {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--dva-text-muted);
    margin-left: 0.35rem;
}
.sd-balken {
    height: 7px;
    border-radius: 99px;
    background: rgba(100, 116, 139, 0.14);
    overflow: hidden;
    margin-top: 0.45rem;
}
.sd-balken > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: var(--dva-primary);
    transition: width 0.25s ease;
}
/* Auf der Firmenseite wird serverseitig gerechnet — dort sagt die Farbe
   zusaetzlich, wie es steht. In der Maske waere das Geflacker beim Tippen. */
.sd-balken > span.ist-gut    { background: var(--dva-success); }
.sd-balken > span.ist-mittel { background: var(--dva-warning); }
.sd-balken > span.ist-duenn  { background: var(--dva-danger); }

/* Auf der Firmenseite steht der Wegweiser unter der Reiterzeile und darf
   nicht am Fensterrand kleben. */
.sd-wegweiser-detail { top: calc(var(--dva-topbar-height, 56px) + 1.2rem); }
a.sd-fehlt-zeile { text-decoration: none; }
a.sd-fehlt-zeile:hover { color: var(--dva-text); }

.sd-fehlt-zeile,
.sd-sprung {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 0.45rem;
    padding: 0.32rem 0.4rem;
    font-size: 0.83rem;
    font-family: inherit;
    text-align: left;
    color: var(--dva-text);
    cursor: pointer;
}
.sd-fehlt-zeile:hover,
.sd-sprung:hover { background: rgba(100, 116, 139, 0.12); }
.sd-fehlt-zeile > i { color: var(--dva-warning); font-size: 0.8rem; }
.sd-sprung { color: var(--dva-text-muted); }
.sd-sprung:hover { color: var(--dva-text); }
.sd-sprung .zahl { margin-left: auto; font-size: 0.73rem; opacity: 0.75; }
.sd-vollstaendig {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.83rem;
    color: var(--dva-success);
    padding: 0.32rem 0.4rem;
}

/* ---- Spaltenbreiten nachziehen ------------------------------------------
   Die Hauptspalte gibt 270px an den Wegweiser ab. Ein `col-md-2` ist darin
   so schmal, dass „— nicht beurteilt —" abgeschnitten wird. Ab der Breite,
   in der beide Spalten nebeneinander stehen, wird aus einem Sechstel ein
   Viertel — vier Felder je Zeile statt sechs. */
@media (min-width: 1200px) {
    .sd-haupt .row > .col-md-2 {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* ---- Aufklappbare Rubriken ---------------------------------------------- */
.sd-block {
    border: 1px solid var(--dva-border);
    border-radius: 0.7rem;
    margin-top: 0.9rem;
    overflow: hidden;
    background: var(--dva-card-bg);
}
.sd-block-kopf {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.75rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dva-text);
    text-align: left;
    cursor: pointer;
}
.sd-block-kopf:hover { background: rgba(100, 116, 139, 0.08); }
.sd-block-kopf > .pfeil {
    font-size: 0.7rem;
    color: var(--dva-text-muted);
    transition: transform 0.15s ease;
}
.sd-block.auf > .sd-block-kopf > .pfeil { transform: rotate(90deg); }
.sd-block-kopf > .bi:not(.pfeil) { color: var(--dva-text-muted); }
.sd-block-kopf .satz {
    font-weight: 400;
    font-size: 0.79rem;
    color: var(--dva-text-muted);
}
.sd-block-zahl {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dva-text-muted);
    background: rgba(100, 116, 139, 0.12);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}
.sd-block-zahl.gefuellt {
    background: rgba(var(--dva-primary-rgb), 0.12);
    color: var(--dva-primary);
}
.sd-block-leib { display: none; padding: 0.2rem 0.9rem 0.9rem; }
.sd-block.auf > .sd-block-leib { display: block; }

/* ---- Hilfetexte: nur auf Knopfdruck -------------------------------------
   Der Auftraggeber hat entschieden: verborgen, bis „Feld-Hilfen" sie holt.
   Ein Absatz Erklaerung unter jedem der 30 Felder war ein Hauptgrund dafuer,
   dass die Maske erschlug. Der Schalter ist der vorhandene in der Kopfzeile
   (html.help-on, siehe assets/js/app.js). */
form[data-stammdaten] .form-text { display: none; }
html.help-on form[data-stammdaten] .form-text { display: block; }

/* ---- Marken nach dem Merkmals-Muster ------------------------------------ */
.sd-chipfeld { position: relative; }
.sd-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.1rem;
}
.sd-chips-leer { font-size: 0.82rem; color: var(--dva-text-muted); }
.sd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.4rem 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(var(--dva-primary-rgb), 0.12);
    color: var(--dva-primary);
}
.sd-chip .weg,
.sd-chip .stern {
    border: 0;
    background: transparent;
    padding: 0 1px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}
.sd-chip .weg { font-size: 1rem; opacity: 0.5; }
.sd-chip .weg:hover { opacity: 1; }
.sd-chip .stern { font-size: 0.72rem; color: var(--dva-text-muted); opacity: 0.45; }
.sd-chip .stern:hover { opacity: 0.85; }
.sd-chip.haupt .stern { opacity: 1; color: var(--dva-warning); }
.sd-chips-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px dashed var(--dva-border);
    border-radius: 999px;
    background: transparent;
    color: var(--dva-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}
.sd-chips-plus:hover { border-color: var(--dva-primary); color: var(--dva-primary); }

.sd-chips-wahl { position: relative; margin-top: 0.35rem; }
.sd-chips-wahl.zu { display: none; }
.sd-vorschlaege {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    max-height: 13rem;
    overflow: auto;
    padding: 0.3rem;
}
.sd-vorschlaege > div {
    display: flex;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.sd-vorschlaege > div:hover,
.sd-vorschlaege > div.zeiger { background: rgba(100, 116, 139, 0.12); }
.sd-vorschlaege > div.leer { color: var(--dva-text-muted); cursor: default; }
.sd-vorschlaege .code {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.6;
    min-width: 2.2rem;
}

/* ---- Rueckmeldung am Feld ----------------------------------------------- */
.sd-laeuft { opacity: 0.7; }
.sd-ok {
    border-color: var(--dva-success) !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18) !important;
    transition: box-shadow 0.8s ease, border-color 0.8s ease;
}
.sd-fehler {
    border-color: var(--dva-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

/* ---- Der Melder unten ---------------------------------------------------- */
.sd-melder {
    position: fixed;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%) translateY(0.4rem);
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--dva-text);
    color: var(--dva-card-bg);
    border-radius: 0.6rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.86rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    max-width: calc(100vw - 2rem);
}
.sd-melder.da {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.sd-melder.fehler { background: var(--dva-danger); color: #fff; }
.sd-melder .zurueck {
    border: 0;
    background: transparent;
    color: #7dd3fc;
    font-weight: 700;
    font-family: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    white-space: nowrap;
}
.sd-melder.fehler .zurueck { color: #fff; text-decoration: underline; }

/* ---- Der Fuss ------------------------------------------------------------
   Ohne JavaScript bleibt der Speichern-Knopf stehen und das Formular
   verhaelt sich wie bisher. Erst wenn das automatische Sichern nachweislich
   laeuft, setzt stammdaten.js die Klasse und der Knopf weicht dem Hinweis. */
.sd-auto-hinweis { display: none; }
.sd-fuss.sd-auto .btn-primary { display: none; }
.sd-fuss.sd-auto .sd-auto-hinweis {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    color: var(--dva-text-muted);
}
.sd-fuss.sd-auto .sd-auto-hinweis .bi { color: var(--dva-success); }
/* ==========================================================================
   >>> ENDE STAMMDATEN — VARIANTE C <<<
   ========================================================================== */

/* ---- Angeheftete Themen: Reihenfolge per Ziehen -------------------------
   Nur in der Gruppe „Meine Themen". Der Griff erscheint beim Ueberfahren —
   dauerhaft sichtbar waere er ein Symbol mehr in einer Leiste, die gerade
   erst schlank geworden ist. */
.sidebar-nav-item.ist-ziehbar {
    position: relative;
    cursor: grab;
}
.sidebar-nav-item.ist-ziehbar::after {
    content: "\F2E7";                     /* bi-grip-vertical */
    font-family: "bootstrap-icons";
    position: absolute;
    right: 0.45rem;
    opacity: 0;
    font-size: 0.85rem;
    transition: opacity 0.12s ease;
}
.sidebar-nav-item.ist-ziehbar:hover::after { opacity: 0.45; }
.sidebar-nav-item.wird-gezogen {
    opacity: 0.45;
    cursor: grabbing;
}
/* Eingeklappt gibt es keine Reihenfolge zu erkennen — dann auch keinen Griff. */
html.sidebar-collapsed .sidebar-nav-item.ist-ziehbar::after { content: none; }