/* ============================================================
   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;
    }
    /* Wie oben: die Kurzform nimmt dem Auswahlfeld sonst den Platz fuer
       sein Pfeilchen, und auf dem Telefon ist die Feldbreite ohnehin knapp. */
    .form-select-sm { padding-right: 2rem; }
    .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);
}

/* ===== 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):not(.mc-lage-link) {
    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):not(.mc-lage-link) {
    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); }

/* ==========================================================================
   Der Assistent — ein Einstieg, ueberall an derselben Stelle.
   Durchgehend --dva-Variablen: Bootstrap-Festwerte wie .text-muted machen in
   Dunkel und Cockpit ganze Saetze unlesbar.
   ========================================================================== */
/* DIE BLASE IST STILLGELEGT — der Einstieg steht in der Kopfzeile.
 *
 * Sie hat auf dem Telefon zweimal etwas verdeckt: erst den rechten
 * Menuepunkt der Registerleiste, dann den Knopf "Fragen" der Agentenseite.
 * Beide Male half ein groesserer Abstand nur bis zur naechsten Maske. Der
 * Fehler war die Bauart, nicht die Zahl: Eine schwebende Blase setzt freien
 * Raum unten rechts voraus, den es nicht ueberall gibt.
 *
 * Auf Wunsch des Anwenders gilt das seit dem 08.09.2026 auf JEDEM Geraet -
 * ein Einstieg, eine Stelle. Geoeffnet wird ueber `#assiKopfKnopf`
 * (topbar.php) bzw. `#mAssiKnopf` (mobile-appbar.php); beide loesen den
 * Klick dieser Blase aus.
 *
 * Das Markup bleibt absichtlich stehen: assistent.js haengt seine gesamte
 * Logik daran (Zeile 22 bricht ohne sie ab), und `aria-expanded` wird darauf
 * gefuehrt. Nur sichtbar ist sie nicht mehr. Wer sie zurueckholen will,
 * loescht die eine Zeile `display:none` unten.
 */
.assi-blase{
    position:fixed; right:1.25rem; bottom:1.25rem; z-index:1035;
    display:inline-flex; align-items:center; gap:.5rem;
    height:3.1rem; padding:0 1.15rem; border:0; border-radius:999px;
    background:var(--bs-primary, #0d6efd); color:#fff;
    font-weight:600; font-size:.9rem; cursor:pointer;
    box-shadow:0 8px 24px rgba(13,110,253,.35);
    transition:transform .12s, box-shadow .12s;
}
.assi-blase:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(13,110,253,.45); }
.assi-blase i{ font-size:1.2rem; }
.assi-blase-text{ white-space:nowrap; }
html.assi-offen .assi-blase{ display:none; }

/* Stillgelegt — als EIGENE Regel, nicht als zweites `display` im Block oben.
   Dort stand es zuerst; `!important` haette zwar gewonnen, aber zwei
   `display`-Angaben in einem Block sind eine Falle: Wer spaeter dem
   `inline-flex` ein `!important` gibt, kehrt die Wirkung um, ohne es zu
   merken. So steht die Absicht an einer Stelle und ist mit einer Zeile
   rueckgaengig zu machen. */
.assi-blase{ display:none !important; }

.assi-fenster{
    position:fixed; right:1.25rem; bottom:1.25rem; z-index:1040;
    width:23rem; max-width:calc(100vw - 2.5rem);
    height:31rem; max-height:calc(100vh - 2.5rem);
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--dva-card-bg); border:1px solid var(--dva-border);
    border-radius:14px; box-shadow:0 16px 44px rgba(15,23,42,.24);
}
/* Frei beweglich und in der Groesse veraenderbar: Wer eine Maske im Blick
   behalten will, schiebt den Assistenten daneben statt darueber. Position und
   Groesse merkt sich das Geraet (localStorage), ein Doppelklick auf den Kopf
   stellt die Ecke wieder her. */
.assi-fenster{ resize:both; min-width:19rem; min-height:18rem; }
.assi-fenster.assi-zieht{ user-select:none; box-shadow:0 22px 56px rgba(15,23,42,.34); }

.assi-kopf{
    display:flex; align-items:center; gap:.6rem; flex:none;
    padding:.7rem .85rem; border-bottom:1px solid var(--dva-border);
    background:var(--dva-table-header-bg);
    cursor:grab; touch-action:none;
}
.assi-fenster.assi-zieht .assi-kopf{ cursor:grabbing; }
.assi-kopf button{ cursor:pointer; }

/* Ausklappbare Hinweise hinter dem „i" */
.assi-hinweis{
    flex:none; padding:.6rem .85rem; border-bottom:1px solid var(--dva-border);
    background:var(--dva-table-header-bg); font-size:.78rem; color:var(--dva-text-muted);
    max-height:14rem; overflow-y:auto;
}
.assi-hinweis ul{ margin:0; padding-left:1.05rem; }
.assi-hinweis li{ margin-bottom:.3rem; line-height:1.45; }
.assi-hinweis li:last-child{ margin-bottom:0; }
.assi-hinweis strong{ color:var(--dva-text); }

/* Kurzkennzeichnung in der ersten Nachricht */
.assi-kennzeichnung{
    font-size:.78rem; color:var(--dva-text-muted); line-height:1.45;
    padding-bottom:.45rem; margin-bottom:.5rem !important;
    border-bottom:1px solid var(--dva-border);
}
.assi-kennzeichnung b{ color:var(--dva-text); }
.assi-kennzeichnung i{ margin-right:.15rem; }
.assi-avatar{
    flex:none; width:2rem; height:2rem; border-radius:50%;
    background:var(--bs-primary, #0d6efd); color:#fff;
    display:flex; align-items:center; justify-content:center;
}
.assi-titel{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.assi-name{ font-weight:600; font-size:.92rem; color:var(--dva-text); }
.assi-lage{ font-size:.74rem; color:var(--dva-text-muted); }
.assi-werkzeuge{ margin-left:auto; display:flex; gap:.1rem; }
.assi-werkzeuge button{
    background:transparent; border:0; cursor:pointer; padding:.25rem .4rem;
    border-radius:6px; color:var(--dva-text-muted); font-size:.95rem;
}
.assi-werkzeuge button:hover{ background:var(--dva-card-bg); color:var(--dva-text); }

.assi-leib{
    flex:1; overflow-y:auto; padding:.85rem;
    display:flex; flex-direction:column; gap:.6rem;
}
.assi-zeile{ display:flex; gap:.5rem; align-items:flex-end; }
.assi-zeile.ich{ justify-content:flex-end; }
.assi-kopfbild{
    flex:none; width:1.6rem; height:1.6rem; border-radius:50%; margin-bottom:.1rem;
    background:var(--bs-primary, #0d6efd); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:.78rem;
}
.assi-text{
    max-width:82%; padding:.55rem .75rem; border-radius:14px;
    font-size:.87rem; line-height:1.55;
}
.assi-zeile.sie .assi-text{
    background:var(--dva-table-header-bg); border:1px solid var(--dva-border);
    border-bottom-left-radius:4px; color:var(--dva-text);
}
.assi-zeile.ich .assi-text{
    background:var(--bs-primary, #0d6efd); color:#fff; border-bottom-right-radius:4px;
}
.assi-text p{ margin:0 0 .5rem; }
.assi-text p:last-child{ margin-bottom:0; }
.assi-text ol, .assi-text ul{ margin:.3rem 0 .5rem; padding-left:1.15rem; }
.assi-text li{ margin-bottom:.2rem; }

.assi-quellen{
    margin-top:.5rem; padding-top:.45rem; border-top:1px solid var(--dva-border);
    display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; font-size:.78rem;
}
.assi-quellen-wort{ color:var(--dva-text-muted); }
.assi-quelle{
    padding:.08rem .5rem; border-radius:999px; text-decoration:none;
    background:var(--dva-card-bg); border:1px solid var(--dva-border);
    color:var(--bs-primary, #0d6efd);
}
.assi-quelle:hover{ background:var(--bs-primary, #0d6efd); color:#fff; }
.assi-artikel h6{ margin:0 0 .4rem; font-size:.9rem; font-weight:600; }

.assi-tippt{
    display:flex; gap:.22rem; padding:.6rem .75rem; width:fit-content;
    background:var(--dva-table-header-bg); border:1px solid var(--dva-border);
    border-radius:14px; border-bottom-left-radius:4px;
}
.assi-tippt i{
    width:.4rem; height:.4rem; border-radius:50%; display:block;
    background:var(--dva-text-muted); animation:assiHupf 1.1s infinite ease-in-out;
}
.assi-tippt i:nth-child(2){ animation-delay:.16s; }
.assi-tippt i:nth-child(3){ animation-delay:.32s; }
@keyframes assiHupf{
    0%,60%,100%{ opacity:.3; transform:translateY(0); }
    30%{ opacity:1; transform:translateY(-.22rem); }
}

.assi-chips{ display:flex; flex-wrap:wrap; gap:.3rem; padding:0 .85rem .5rem; flex:none; }
.assi-chips:empty{ padding:0; }
.assi-chips button{
    font-size:.76rem; padding:.25rem .6rem; border-radius:999px; cursor:pointer;
    border:1px solid var(--dva-border); background:var(--dva-card-bg);
    color:var(--bs-primary, #0d6efd); text-align:left;
}
.assi-chips button:hover{ background:var(--bs-primary, #0d6efd); color:#fff; }

/* Freigabe vor dem Melden — sitzt ueber der Eingabe, nicht als Modal:
   Der Anwender soll das Gespraech daneben noch sehen. */
.assi-melden{
    flex:none; border-top:1px solid var(--dva-border);
    padding:.7rem .85rem; background:var(--dva-table-header-bg);
}
.assi-melden-kopf{
    font-size:.82rem; font-weight:600; color:var(--dva-text);
    display:flex; align-items:center; gap:.35rem; margin-bottom:.35rem;
}
.assi-melden-hinweis{
    font-size:.74rem; color:var(--dva-text-muted); line-height:1.45; margin:0 0 .45rem;
}
.assi-melden-hinweis strong{ color:var(--dva-text); }
.assi-melden textarea{
    width:100%; resize:vertical; font:inherit; font-size:.83rem; line-height:1.45;
    padding:.45rem .6rem; border:1px solid var(--dva-input-border); border-radius:8px;
    background:var(--dva-card-bg); color:var(--dva-input-text);
}
.assi-melden-fuss{ display:flex; gap:.4rem; justify-content:flex-end; margin-top:.45rem; }
.assi-melden-fuss button{
    font-size:.8rem; padding:.3rem .75rem; border-radius:7px; cursor:pointer;
    border:1px solid var(--dva-border); background:var(--dva-card-bg); color:var(--dva-text);
}
.assi-melden-los{
    background:var(--bs-primary, #0d6efd) !important;
    border-color:var(--bs-primary, #0d6efd) !important; color:#fff !important;
}
.assi-melden-los:disabled{ opacity:.6; cursor:default; }
.assi-chips-melden button{ border-style:dashed; }

.assi-fuss{ flex:none; border-top:1px solid var(--dva-border); padding:.6rem .7rem;
            background:var(--dva-table-header-bg); }
.assi-eingabe{ display:flex; gap:.4rem; align-items:flex-end; }
.assi-eingabe textarea{
    flex:1; min-width:0; resize:none; font:inherit; font-size:.86rem; line-height:1.4;
    padding:.45rem .6rem; border:1px solid var(--dva-input-border); border-radius:10px;
    background:var(--dva-card-bg); color:var(--dva-input-text); max-height:6rem;
}
.assi-eingabe button{
    flex:none; width:2.1rem; height:2.1rem; border-radius:50%; border:0; cursor:pointer;
    background:var(--bs-primary, #0d6efd); color:#fff;
    display:flex; align-items:center; justify-content:center;
}
.assi-fussnote{ font-size:.68rem; color:var(--dva-text-muted); text-align:center; margin-top:.4rem; }

/* Auf dem Handy fuellt der Assistent den Bildschirm — ein 23rem-Fenster
   waere dort ein Guckloch. */
@media (max-width: 575.98px){
    /* Auf dem Handy fuellt der Assistent den Bildschirm — Verschieben und
       Groessenaenderung waeren dort nur eine Falle. `!important` ist noetig,
       weil eine am Rechner gemerkte Lage als Inline-Stil wiederkaeme. */
    .assi-fenster{
        right:0 !important; left:0 !important; bottom:0 !important; top:auto !important;
        width:auto !important; max-width:none;
        height:88vh !important; max-height:none; border-radius:14px 14px 0 0;
        border-left:0; border-right:0; border-bottom:0;
        resize:none;
    }
    .assi-kopf{ cursor:default; }
    .assi-blase{ right:1rem; bottom:1rem; height:2.9rem; padding:0 1rem; }
    .assi-blase-text{ display:none; }
}

@media print{ .assi-blase, .assi-fenster{ display:none !important; } }

/* Formulierte Antwort ueber der Trefferliste (Weg A).
   Durchgehend --dva-Variablen: Bootstrap-Festwerte wie .text-muted machen
   in Dunkel und Cockpit ganze Saetze unlesbar. */
.hilfe-antwort {
    background: var(--dva-table-header-bg);
    border: 1px solid var(--dva-border);
    border-left: 3px solid var(--bs-primary, #0d6efd);
    border-radius: .4rem;
    padding: .6rem .7rem;
}
.hilfe-antwort-kopf {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-primary, #0d6efd);
    margin-bottom: .35rem;
}
.hilfe-antwort-text {
    font-size: .88rem;
    line-height: 1.6;
    color: var(--dva-text);
}
.hilfe-antwort-quellen {
    margin-top: .5rem;
    padding-top: .45rem;
    border-top: 1px solid var(--dva-border);
    font-size: .8rem;
}
.hilfe-antwort-wort { color: var(--dva-text-muted); }
.hilfe-antwort-quellen .hilfe-quelle + .hilfe-quelle::before {
    content: "\00b7";
    margin: 0 .25rem;
    color: var(--dva-text-muted);
}
.hilfe-antwort-fuss {
    margin-top: .45rem;
    font-size: .72rem;
    color: var(--dva-text-muted);
}
.hilfe-antwort-laedt {
    display: flex;
    align-items: center;
    font-size: .82rem;
    color: var(--dva-text-muted);
}
.hilfe-antwort-hinweis {
    font-size: .82rem;
    color: var(--dva-text-muted);
}

/* 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; }
.hilfe-artikel .hilfe-zitat {
    margin: 0 0 1rem;
    padding: .5rem .8rem;
    border-left: 4px solid var(--dva-primary);
    background: rgba(var(--dva-primary-rgb), .08);
    border-radius: 0 var(--dva-card-radius) var(--dva-card-radius) 0;
}
.hilfe-artikel .hilfe-zitat p { margin: 0; }

/* 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; }

/* Kleiner Ring als Schalter in der Werkzeugleiste. Er traegt nur noch die
   erreichte Zahl — „7/7" waere bei 26 px nicht mehr zu lesen; die Gesamtzahl
   sagt der Tooltip des Knopfes. */
.reife-ring-klein { width: 30px; height: 30px; }
.reife-ring-klein .reife-ring-label { font-size: .72rem; }


.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;
}

/* Ein Stapel OHNE Ansichts-Umschalter — das eigene Postfach.
 *
 * Dort gibt es nur diese eine Ansicht, also auch keinen `dva-view-container`,
 * der die Sichtbarkeit setzt. Die Seite traegt deshalb `email-fokus-solo`
 * statt `view-fokus`: Letzteres ist `display: none`, solange kein Umschalter
 * es freigibt — die Liste waere unsichtbar, und die Kopfzeile naehme
 * trotzdem die Nachrichten mit. Genau das ist am 07.10.2026 passiert.
 *
 * Eigene Klasse und nicht `display` an `.email-fokus`: Diese Regel steht
 * spaeter in der Datei als `.view-fokus { display: none }` und haette bei
 * gleicher Spezifitaet gewonnen — die Fokusliste waere im Posteingang dann in
 * allen drei Ansichten sichtbar gewesen, also auch unter der Tabelle. Mit der
 * zusaetzlichen Klasse trifft sie nur den Stapel, der keinen Umschalter hat. */
.email-fokus.email-fokus-solo {
    display: flex;
}

.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);
}

/* HIESS BIS 2026-09-08 `.ef-marke` — und wurde dadurch still ausgehebelt.
   Weiter unten in dieser Datei gibt es ein zweites `.ef-marke`: den Chip fuer
   einen gewaehlten Vorgang in der Mehrfachwahl. Der steht spaeter, hat
   dieselbe Spezifitaet und setzt `display: inline-flex` — also gewann er, und
   „Jetzt dran" stand auf JEDER Karte statt nur auf der aufgeklappten. Bei
   wenigen Mails faellt das nicht auf; im vollen Stapel zeigt jede Zeile, sie
   sei dran.
   Zwei Bedeutungen, ein Name: der eigene Name ist die Reparatur. */
.ef-dran {
    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-dran { 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;
    /* 22rem reichten fuer Name UND Firma UND Typ nicht — der Vorgangsname
       wurde auf zwei Zeichen gekuerzt. Siehe die Rangfolge weiter unten. */
    width: 30rem;
    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); }
/* ---- Wer in einer Trefferzeile schrumpfen darf ---------------------------
   Vorher schrumpfte NUR `.ef-pname` — das Einzige, was man wirklich lesen
   muss. Der Firmenname nahm sich seinen vollen Platz, und vom Vorgang blieb
   „U…" uebrig. Die Rangfolge steht jetzt im Stylesheet:

     ef-pname  der NAME. Bekommt den Rest und schrumpft zuletzt.
     ef-pnebn  die Firma. Zusatz, also schrumpft sie zuerst — und nie ueber
               40 % der Zeile hinaus.
     ef-ptyp   „Vorgang" / „Firma". Ein Wort, das nie umbricht.

   Dazu ist der Kasten breiter: 22rem reichten fuer Name UND Firma UND Typ
   nicht, und drei Angaben in einer Zeile sind hier keine Zierde, sondern der
   Grund, warum man die richtige Zeile trifft. */
.ef-treffer .ef-pname {
    flex: 1 1 auto;
    min-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ef-treffer .ef-pnebn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
    color: var(--dva-text-muted, #64748b);
}
.ef-treffer .ef-ptyp {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .7rem;
    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); }

/* ---- Mehrfachzuordnung (2026-09-05) --------------------------------------
   Eine E-Mail kann zu mehreren Vorgaengen gehoeren — die Weiterleitung, die
   zwei Angebote betrifft, ist der Alltagsfall. Was schon zugeordnet ist,
   steht als Marke ueber dem Suchfeld; erst „Fertig" nimmt die Mail aus dem
   Stapel.

   Der Bereich bleibt verborgen, solange nichts gewaehlt wurde: Wer nur einem
   Vorgang zuordnet — der Regelfall — soll von der Mehrfachwahl nichts
   merken. */
.ef-gewaehlt {
    border-bottom: 1px solid var(--dva-border, #e2e8f0);
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}
.ef-marke {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(var(--dva-primary-rgb), .12);
    color: var(--dva-primary);
    border-radius: 999px;
    padding: .15rem .3rem .15rem .6rem;
    margin: .15rem .2rem .15rem 0;
    font-size: .8rem;
    max-width: 100%;
}
.ef-marke-weg {
    background: none;
    border: 0;
    color: inherit;
    opacity: .65;
    cursor: pointer;
    line-height: 1;
    padding: 0 .25rem;
    font-size: 1rem;
}
.ef-marke-weg:hover { opacity: 1; }
.ef-fertig {
    display: block;
    width: 100%;
    margin-top: .45rem;
    background: var(--dva-primary);
    border: 0;
    color: #fff;
    border-radius: .45rem;
    padding: .42rem .6rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.ef-fertig:hover { filter: brightness(.94); }

/* 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;
}

/* Ziel eines Ankers wie settings#tzRueckschau — kurz markiert, damit man es findet. */
.einst-anker-ziel {
    outline: 3px solid rgba(var(--dva-primary-rgb), 0.45);
    outline-offset: 3px;
    border-radius: 4px;
    transition: outline-color 0.4s;
}

.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;
}
/* Freie Schrittfolge (docs/Konzept-Schrittfolge.md): Der Schritt ist ein Knopf. */
.stufe-sprung {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.stufe-sprung:hover .stufe-wort { text-decoration: underline; }
.schiene-frei {
    font-size: .75rem;
    color: var(--dva-text-muted);
    white-space: nowrap;
}
.schritt-gruppe + .schritt-gruppe { margin-top: .75rem; }
.schritt-gruppe-titel {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: .5rem 0 .25rem;
    font-size: .82rem;
    font-weight: 600;
}
.schritt-gruppe.ist-hier .schritt-gruppe-titel { color: var(--dva-primary); }
.schritt-gruppe-stand {
    font-weight: 400;
    color: var(--dva-text-muted);
}
p.schritt-gruppe-stand { font-size: .78rem; margin: 0 0 .3rem; }
/* Die Schrittleiste waehlt, welcher Schritt im Blatt steht (2026-11-05):
   der gewaehlte ist unterstrichen wie ein Reiter. */
.stufe-sprung.ist-gewaehlt .stufe-wort {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .3em;
}
.schritt-kopf-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .35rem;
}
.schritt-kopf-zeile .blatt-titel { margin: 0; }
.schritt-kopf-hinweis { font-size: .78rem; color: var(--dva-text-muted); }
.schritt-mitgeltend { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin-bottom: .4rem; }
.schritt-mitgeltend-titel { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dva-text-muted); }
.schritt-leer { font-size: .82rem; color: var(--dva-text-muted); margin: .25rem 0; }
.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;
}

/* Der Unterstatus in der Ruhezeile — dieselbe Form wie der Bedingungszaehler
   daneben, damit die Zeile EINE Reihe bleibt und nicht zwei Sorten Marken
   zeigt. Gesetzt traegt er die Hausfarbe, ungesetzt bleibt er still: Er ist
   eine Einladung, keine Mahnung (docs/Bauplan-Mappe-Cockpit.md, Baustein 1). */
.schiene-sub {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 32px;
    font-size: .78rem;
    font-family: inherit;
    font-weight: 600;
    padding: .12rem .55rem;
    border-radius: 99px;
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.schiene-sub.ist-gesetzt {
    color: var(--dva-primary);
    border-color: var(--dva-primary);
}
.schiene-sub.ist-offen {
    color: var(--dva-text-muted);
    border-color: var(--dva-border);
    font-weight: 500;
}
.schiene-sub:hover { border-color: var(--dva-primary); color: var(--dva-primary); }
.schiene-sub:focus-visible { outline: 2px solid var(--dva-primary); outline-offset: 2px; }
.schiene-sub .sub-seit-kurz { font-weight: 400; opacity: .8; }

/* Mitgeltende Dokumente und Links am Schritt — dieselbe Form wie der
   ungesetzte Unterstatus: ein Hinweis, dass hinter dem Chevron etwas liegt. */
.schiene-mitgeltend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 32px;
    font-size: .78rem;
    font-family: inherit;
    font-weight: 500;
    padding: .12rem .55rem;
    border-radius: 99px;
    border: 1px solid var(--dva-border);
    background: transparent;
    color: var(--dva-text-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.schiene-mitgeltend:hover { border-color: var(--dva-primary); color: var(--dva-primary); }
.schiene-mitgeltend:focus-visible { outline: 2px solid var(--dva-primary); outline-offset: 2px; }

/* ==========================================================================
   Farbe je Unterstatus (Migration 2026-10-06_003)
   --------------------------------------------------------------------------
   Gespeichert wird ein NAME, nicht ein Hexwert: Die Themes definieren diese
   Toene je Thema neu (--dva-danger ist hell #dc2626 und dunkel #f87171). Ein
   fest eingetragener Wert waere im dunklen Thema blass bis unlesbar — die
   Falle, die im Haus schon ganze Saetze unsichtbar gemacht hat.

   Eine Variable je Klasse, alles andere liest sie. So traegt die Farbe an
   jedem Ort dieselbe Bedeutung, und ein neuer Ort braucht keine neue Regel.
   ========================================================================== */
.us-farbe-warning   { --us-farbe: var(--dva-warning, #f59e0b); }
.us-farbe-danger    { --us-farbe: var(--dva-danger,  #dc2626); }
.us-farbe-success   { --us-farbe: var(--dva-success, #16a34a); }
.us-farbe-info      { --us-farbe: var(--dva-info,    #0891b2); }
.us-farbe-primary   { --us-farbe: var(--dva-primary, #0d6efd); }
.us-farbe-secondary { --us-farbe: var(--dva-text-muted, #6c757d); }

/* Der Punkt — in der Pflegemaske, in der Gruppenueberschrift, in der
   Punktkette. Ohne gesetzte Farbe bleibt er blass statt bunt zu raten. */
.us-punkt { font-size: .6em; color: var(--us-farbe, var(--dva-border, #adb5bd)); }

/* Die Kante der Planner-Karte. Ein Streifen, kein Rahmen: Er faellt aus zwei
   Metern auf, ohne die Karte selbst einzufaerben — Text bleibt Text. */
.ob-card.hat-farbe {
    border-left: 4px solid var(--us-farbe, transparent);
    padding-left: calc(.75rem - 4px);
}

/* Die Gruppenueberschrift nimmt die Farbe fuer Wort und Linie auf. */
.ob-gruppe.us-farbe-warning,
.ob-gruppe.us-farbe-danger,
.ob-gruppe.us-farbe-success,
.ob-gruppe.us-farbe-info,
.ob-gruppe.us-farbe-primary,
.ob-gruppe.us-farbe-secondary {
    color: var(--us-farbe);
    border-bottom-color: color-mix(in srgb, var(--us-farbe) 45%, transparent);
}
.ob-gruppe .us-punkt { color: var(--us-farbe, currentColor); }

/* In der Statusleiste: der Punkt der Kette und die Marke der Ruhezeile. */
.sub-punkt.hat-farbe::before {
    content: ''; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--us-farbe); flex: 0 0 auto;
}
.schiene-sub.hat-farbe.ist-gesetzt {
    color: var(--us-farbe);
    border-color: var(--us-farbe);
}

.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; }
/* Der Punkt ist seit 2026-10-06 ein KNOPF, wo Schreibrecht besteht (vorher
   eine reine Anzeige). Browservorgaben zuruecksetzen, damit button und span
   gleich aussehen; Mindesthoehe 38px, weil die Leiste auch am Tablet und mit
   Handschuhen bedient wird. */
.sub-punkt {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 38px;
    font-size: .82rem;
    font-family: inherit;
    padding: .18rem .7rem;
    border-radius: 99px;
    border: 1px solid var(--dva-border);
    background: transparent;
    color: var(--dva-text-muted);
    text-align: left;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
button.sub-punkt { cursor: pointer; }
button.sub-punkt:hover:not(:disabled) {
    border-color: var(--dva-primary);
    color: var(--dva-primary);
}
button.sub-punkt:focus-visible {
    outline: 2px solid var(--dva-primary);
    outline-offset: 2px;
}
button.sub-punkt:disabled { cursor: progress; opacity: .6; }
.sub-punkt.ist-hier {
    border-color: var(--dva-primary);
    color: var(--dva-primary);
    font-weight: 650;
}
/* „steht seit" — die Frage, die der Unterstatus ueberhaupt beantwortet
   (docs/Sprachregelung.md, §2). */
.sub-seit {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--dva-text-muted);
    margin: .5rem 0 0;
}
.sub-seit[hidden] { display: none; }

.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; }

/* Was an der Bedingung haengt — aus dem Ablaufblatt (docs/Konzept-Ablaufblatt.md).
   Anweisung und Arbeitshilfen stehen in einer eigenen Zeile unter dem Punkt;
   dafuer darf die Zeile umbrechen. `.ab-wer` und `.ab-hilfe` benutzt das
   Blatt selbst genauso (assets/css/ablaufblatt.css). */
.bed-zeile { flex-wrap: wrap; }
.bed-mehr { flex: 1 0 100%; padding: 0 0 .35rem 1.75rem; font-size: .82rem; }
.bed-anweisung { color: var(--dva-text-muted); white-space: pre-line; }
.bed-anweisung.ist-zu {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bed-weiter { border: 0; background: none; padding: 0; color: var(--dva-primary); font-size: .78rem; }
.bed-hilfen { margin-top: .25rem; }
.ab-wer {
    font-size: .72rem;
    font-weight: 700;
    color: var(--dva-primary);
    background: rgba(var(--dva-primary-rgb), .12);
    border-radius: 999px;
    padding: 0 .45rem;
    white-space: nowrap;
}
.ab-hilfe {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--dva-table-hover-bg);
    border-radius: .4rem;
    padding: .2rem .5rem;
    font-size: .84rem;
    margin: 0 .35rem .35rem 0;
    max-width: 100%;
}
.ab-hilfe a { color: var(--dva-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-hilfe a:hover { text-decoration: underline; }
.ab-hilfe button { border: 0; background: none; color: var(--dva-text-muted); padding: 0 .1rem; line-height: 1; }
.ab-hilfe button:hover { color: var(--dva-danger); }

/* --- 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;
}
.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;
}
/* DIE FORM KOMMT VON DEN RANDKNOEPFEN, NICHT VON `overflow: hidden`.
   Der Behaelter trug frueher `overflow: hidden`, damit die abgerundete Form
   die eckigen Innenknoepfe beschneidet. Das beschneidet aber auch jedes
   Dropdown IN der Gruppe: Beim geteilten Knopf „Neu anlegen" oeffnete der
   Pfeil sein Menue ordnungsgemaess (`.show`, sichtbar, 146 px hoch) — zu
   sehen war nichts, weil die 34 px hohe Gruppe es abschnitt. Es sah aus, als
   reagiere der Pfeil nicht. Gemeldet am 2026-09-17.
   Dieselbe Form entsteht ohne Beschneiden, wenn die beiden aeusseren Knoepfe
   ihre Ecken selbst runden. */
.btn-group > .btn:first-child,
.btn-group-sm > .btn:first-child,
.btn-group > .btn-check:first-child + .btn {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.btn-group > .btn:last-child,
.btn-group-sm > .btn:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
/* Beim geteilten Knopf ist das MENUE das letzte Kind, nicht der Knopf — die
   Regel oben greift dort also nicht. Der Aufklapp-Knopf traegt seine Ecken
   deshalb ueber seine eigene Klasse. Die `:has`-Regel daneben faengt denselben
   Fall allgemein ab; sie steht bewusst in einer EIGENEN Regel, damit ein
   Browser ohne `:has` nur diese verwirft und nicht die Zeile darueber. */
.btn-group > .btn.dropdown-toggle-split {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.btn-group > .btn:nth-last-child(2):has(+ .dropdown-menu) {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.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;
}
/* Ein Auswahlfeld braucht rechts Platz fuer sein Pfeilchen.
   Die Kurzform `padding: 0.5rem 0.75rem` oben ueberschreibt Bootstraps
   `padding-right: 2.25rem` — der Pfeil lag deshalb ueber dem Text, sobald
   der Eintrag die Feldbreite ausfuellte („25 pro Seite" plus Pfeil).
   Die Breite entspricht Bootstrap 5.3; das Pfeilchen selbst kommt weiter
   aus dessen Hintergrundbild. */
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-right: 2rem; }
.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 der Stammdaten-Maske: verborgen --------------------------
   Ein Absatz Erklaerung unter jedem der 30 Felder war ein Hauptgrund dafuer,
   dass die Maske erschlug. Der frueher zugehoerige Schalter „Feld-Hilfen"
   ist am 2026-09-05 entfallen; wer eine Erklaerung braucht, fragt den
   Assistenten. Die Texte bleiben deshalb verborgen — sichtbar zu schalten
   haette die Ueberladung ungefragt zurueckgebracht. */
form[data-stammdaten] .form-text { display: none; }

/* ---- 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; }
/*
 * DER SPEICHERN-KNOPF BLEIBT STEHEN (2026-09-04).
 *
 * Bis hierher blendete `.sd-fuss.sd-auto .btn-primary { display:none }` ihn
 * aus, sobald das feldweise Sichern lief. Das stimmte nur, solange jede
 * Aenderung ueber ein `change`-Ereignis kam. Der JSON-Import der
 * KI-Anreicherung setzt die Werte aber per `element.value = …` — dabei
 * entsteht kein Ereignis, es wurde nichts gesichert, und es gab keinen Knopf
 * mehr, mit dem man es haette nachholen koennen. Die Maske sah gefuellt aus
 * und war leer.
 *
 * Der Knopf ist ausserdem der einzige Weg zur vollstaendigen Pruefung: Das
 * feldweise Sichern kennt nur die Regeln des einzelnen Feldes,
 * CompanyController::update() prueft den ganzen Satz und benennt, was fehlt.
 */
.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); }
/* ---- Uebernommen, aber noch nicht gespeichert ----------------------------
   Ein Feld, dessen Wert nur in der Maske steht. Bewusst dieselbe Farbe wie
   die Warnung darueber, damit Feld und Hinweis als eine Aussage lesbar sind. */
.sd-offen {
    border-color: var(--dva-warning) !important;
    background-color: rgba(234, 179, 8, 0.10) !important;
}
.sd-offen-hinweis { margin-bottom: 0.75rem; }
.sd-offen-hinweis ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.sd-offen-hinweis .sd-offen-titel { font-weight: 600; }

/* ==========================================================================
   >>> 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; }


/* ==========================================================================
   SCHICHT „VARIANTE D" (2026-09-05) — Werkzeugleiste, Ansichtsschalter, Reiter

   Steht bewusst am DATEIENDE, hinter der Knopf-Schicht „Variante G" und
   hinter den Theme-Bloecken. Beim ersten Versuch lag dieser Abschnitt in
   der Mitte der Datei — und wurde von den spaeteren Regeln still
   ueberschrieben: Der aktive Reiter blieb im hellen Blau, ein rahmenloser
   Knopf trug im dunklen Schema dunkle Schrift auf dunklem Grund. Bei
   gleicher Spezifitaet gewinnt die spaetere Regel; deshalb gehoert eine
   Schicht, die vorhandene Formen ueberformt, ans Ende und nirgendwo sonst.
   ========================================================================== */

/* ---- Anzeigeschalter der Detailseite -------------------------------------
   Ein eingeschalteter Schalter bekommt Flaeche statt Rahmen (Knopf-Variante G)
   — aber eine LEISE. Voll gefuellt sahen die Schalter aus wie die wichtigsten
   Knoepfe der Zeile und liefen „Status" den Rang ab; ein Ansichtsschalter ist
   aber eine Nebensache. Getoente Flaeche plus Akzentfarbe sagt „an", ohne zu
   rufen.

   Gebaut aus --dva-primary-rgb statt aus einem festen Blau: Sonst leuchtet in
   „Dunkel" und „Cockpit" ein Fremdkoerper. */
.detail-actions .btn.ansicht-an {
    background: rgba(var(--dva-primary-rgb), 0.12);
    border-color: rgba(var(--dva-primary-rgb), 0.35);
    color: var(--dva-primary);
}
.detail-actions .btn.ansicht-an:hover {
    background: rgba(var(--dva-primary-rgb), 0.2);
    border-color: rgba(var(--dva-primary-rgb), 0.5);
    color: var(--dva-primary);
}
/* Der Ring-Knopf bleibt immer neutral: Seine Aussage ist die Ringfarbe,
   eine zweite Faerbung des Knopfes wuerde sie ueberdecken. */
.detail-marker-ring { padding: .15rem .3rem; line-height: 0; }
.detail-marker-ring.ansicht-an { background: transparent; color: inherit; }

/* Zaehler AM KNOPF (Merkmale, Wiedervorlage): `bg-light text-dark` war eine
   weisse Pille — auf dunklem Grund ein Fleck, auf hellem ein zweites Kaestchen
   neben einem rahmenlosen Knopf. Als blosse Zahl in der Farbe des Knopfes
   traegt sie dieselbe Auskunft und stoert nicht. */
.detail-actions .btn > .badge {
    background-color: transparent !important;
    color: inherit !important;
    font-size: .72rem;
    font-weight: 700;
    padding: 0 0 0 .1rem;
}

/* Aufklappfeld an einem Marker (Vorgangsreife, Merkmale). Breit genug fuer
   die sieben Fragen, aber nie breiter als der Bildschirm. */
.detail-marker-feld {
    min-width: 20rem;
    max-width: min(30rem, calc(100vw - 2rem));
    white-space: normal;
}
.detail-marker-feld .merkmal-box { margin: 0; }

/* ---- Werkzeugleiste, Variante D (2026-09-05) -----------------------------
   Vorher: eine Reihe gleich umrandeter Kaesten unter dem Titel — zehn Rahmen
   ohne Rang, und das Auge musste die ganze Zeile lesen. Jetzt sind die
   Nebensachen rahmenlos, genau eine Aktion ist gefuellt, und die Leiste steht
   rechts NEBEN dem Titel statt darunter. Das spart eine Zeile Hoehe. */
.btn-geist {
    border-color: transparent;
    background: transparent;
    color: var(--dva-text-muted, #64748b);
}
.btn-geist:hover,
.btn-geist:focus-visible {
    background: var(--dva-table-hover-bg, #f1f5f9);
    border-color: transparent;
    color: var(--dva-text, #0f172a);
}
/* Ein rahmenloser Knopf, der aufgeklappt ist, braucht trotzdem Halt. */
.btn-geist.show,
.btn-geist[aria-expanded="true"] {
    background: var(--dva-table-hover-bg, #f1f5f9);
    color: var(--dva-text, #0f172a);
}

/* Kopfzeile: Titelblock links, Werkzeuge rechts.
   `min-width:0` am Titelblock ist der Punkt — ohne ihn schiebt ein langer
   Vorgangstitel die Leiste unter sich, und genau das sollte aufhoeren. */
.detail-kopf-zeile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.detail-kopf-titel { flex: 1 1 22rem; min-width: 0; }
.detail-kopf-zeile > .detail-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    max-width: 22rem;
}
/* Zehn Bedienelemente passen in keine Zeile neben einem Titel. Der Umbruch
   soll deshalb nicht dem Zufall der Knopfbreiten folgen, sondern immer an
   derselben Stelle liegen: Marken oben, Handlungen darunter. Vorher stand
   „Status" mal in der ersten und mal in der zweiten Zeile — je nachdem, wie
   lang die Beschriftungen gerade waren.
   Bewusst ueber `flex-basis` und nicht ueber `order`: Die Reihenfolge im
   Markup bleibt die Reihenfolge beim Durchtabben. */
.detail-kopf-zeile > .detail-actions > .d-flex.gap-1 {
    flex-basis: 100%;
    justify-content: flex-end;
}
/* Unter 768 px faellt die Leiste wieder unter den Titel — nebeneinander
   bleibt dort fuer keins von beidem Platz. */
@media (max-width: 767.98px) {
    .detail-kopf-titel { flex-basis: 100%; }
    /* `width:100%` ist der Punkt: Ohne ihn wird die Leiste so breit wie ihr
       Inhalt und laeuft rechts aus der Karte — die Glocke war dort nicht
       mehr zu treffen. Und linksbuendig, weil auf dem Telefon der Daumen
       links liegt und rechts nichts anschliesst. */
    .detail-kopf-zeile > .detail-actions {
        max-width: none;
        width: 100%;
        justify-content: flex-start;
    }
    .detail-kopf-zeile > .detail-actions > .d-flex.gap-1 { justify-content: flex-start; }
}

/* Ansichts-Menue: Liste zum Abhaken statt drei geratener Sinnbilder. */
.detail-ansicht-feld { min-width: 15rem; }
.detail-ansicht-zeile { display: flex; align-items: center; gap: .1rem; }
.detail-ansicht-haken { width: 1.1rem; color: var(--dva-primary); opacity: 0; }
.detail-ansicht-zeile[aria-checked="true"] .detail-ansicht-haken { opacity: 1; }
.detail-ansicht-zeile[aria-checked="true"] { font-weight: 500; }

/* ---- Reiter, Variante D (2026-09-05) -------------------------------------
   Vorher: Kaestchen mit Rahmen und dunklen Zaehlmarken, die auf einem
   normalen Bildschirm in die zweite Zeile umbrachen. Der Kasten ahmt eine
   Karteikarte nach — eine Form von gestern; die schwarzen Marken zogen mehr
   Blick auf sich als die Woerter daneben.

   Jetzt: ein farbiger Strich unter dem aktiven Reiter, sonst nichts. Die
   Zahlen bleiben (sie sind der Grund hinzusehen), treten aber zurueck.

   Steht bewusst SPAETER in der Datei als die Theme-Bloecke — die setzen noch
   Hintergrund und Rahmen des Kaestchens und wuerden sonst dagegenhalten. */
.nav-tabs {
    border-bottom: 1px solid var(--dva-border);
    gap: .1rem;
}
.nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: .55rem .7rem;
    color: var(--dva-text-muted, #64748b);
}
.nav-tabs .nav-link:hover {
    border-color: transparent;
    border-bottom-color: var(--dva-border);
    color: var(--dva-text, #0f172a);
    background: transparent;
}
.nav-tabs .nav-link.active,
.theme-dark .nav-tabs .nav-link.active,
.theme-nature .nav-tabs .nav-link.active,
.theme-ocean .nav-tabs .nav-link.active {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--dva-primary);
    color: var(--dva-primary);
    font-weight: 600;
}
/* Zaehler leise: eine Zahl neben dem Wort, keine schwarze Marke.
   Hoehere Spezifitaet als `.badge.bg-secondary` — deshalb ohne !important. */
.nav-tabs .nav-link .badge {
    /* Zwei !important sind hier noetig, und beide sind fremdverschuldet:
       Bootstraps `.bg-secondary` ist eine Hintergrund-Hilfsklasse (immer
       !important), und app.css selbst setzt `.badge.bg-secondary` mit
       !important auf Farbe UND Grund. Ohne Gegengewicht bliebe die dunkle
       Marke mit weisser Schrift stehen — genau die war die Klage. */
    background-color: transparent !important;
    color: var(--dva-text-muted, #64748b) !important;
    font-size: .74rem;
    font-weight: 600;
    padding: 0 .1rem;
}
.nav-tabs .nav-link.active .badge { color: var(--dva-primary) !important; }

/* „Mehr" traegt dieselbe Form wie ein Reiter, ist aber ein Knopf. */
.reiter-mehr .nav-link { border: 0; border-bottom: 2px solid transparent; }
.reiter-mehr .nav-link::after { margin-left: .35rem; }
.reiter-zahl {
    font-size: .74rem; font-weight: 600;
    color: var(--dva-text-muted, #64748b);
}
.reiter-mehr-feld { min-width: 15rem; max-height: 70vh; overflow-y: auto; }
.reiter-mehr-zeile { display: flex; align-items: center; gap: .1rem; }
.reiter-mehr-zeile .badge {
    margin-left: auto;
    background: var(--dva-table-hover-bg, #f1f5f9);
    color: var(--dva-text-muted, #64748b);
    font-size: .74rem;
}

/* ==========================================================================
   Beziehungsnetz — Pfadkette und Satzform
   docs/Konzept-Beziehungsnetz.md, Abschnitt 7

   FARBE TRAEGT DIE ART DES KNOTENS, DIE STRICHART DIE SICHERHEIT
   Ein verdeckter Schritt ist gepunktet und traegt ein Schloss, nicht bloss
   einen blasseren Farbton. So bleibt die Unterscheidung im Ausdruck und bei
   Farbfehlsichtigkeit erhalten.

   Durchgehend --dva-*-Variablen mit Rueckfallwert: feste Bootstrap-Klassen
   wie .text-muted verschwinden im dunklen Schema und in „Cockpit".
   ========================================================================== */

.bez-kette {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .1rem;
}

.bez-knoten {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid var(--dva-border, #d8e0ea);
    border-radius: 8px;
    background: var(--dva-card-bg, #fff);
    color: var(--dva-text, #0f172a);
    text-decoration: none;
    font-size: .88rem;
    line-height: 1.3;
}
a.bez-knoten:hover {
    border-color: var(--dva-primary, #1d4ed8);
    color: var(--dva-text, #0f172a);
}
.bez-knoten .bez-zusatz {
    color: var(--dva-text-muted, #64748b);
    font-size: .8rem;
}

/* Knotenarten — der farbige Ruecken links, wie am Aktenruecken */
.bez-contact  { border-left: 3px solid var(--dva-primary, #1d4ed8); }
.bez-company  { border-left: 3px solid #6d28d9; }
.bez-project  { border-left: 3px solid #0f766e; }
.bez-task     { border-left: 3px solid var(--dva-warning, #b45309); }
.bez-app_user { border-left: 3px solid #0369a1; }

/* Der verdeckte Schritt: gepunktet, schraffiert, mit Schloss. Nie ein Link —
   er hat keine Id, auf die man springen koennte. */
.bez-knoten.bez-verdeckt {
    border: 1px dotted var(--dva-text-muted, #64748b);
    background: repeating-linear-gradient(
        135deg,
        var(--dva-table-hover-bg, #f4f6fa) 0 6px,
        var(--dva-card-bg, #eef1f6) 6px 12px
    );
    color: var(--dva-text-muted, #64748b);
    font-style: italic;
}

/* Das beschriftete Glied zwischen zwei Knoten */
.bez-glied {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0 .1rem;
    font-size: .77rem;
    color: var(--dva-text-muted, #64748b);
    white-space: nowrap;
}
.bez-glied .bez-li {
    width: .85rem;
    height: 0;
    border-top: 1.5px solid currentColor;
    opacity: .5;
}
.bez-glied .bi { font-size: .7rem; opacity: .75; }

/* Neben einem verdeckten Knoten wird auch das Glied gepunktet — die Kante
   selbst verraet dort nichts mehr. */
.bez-glied-verdeckt .bez-li {
    border-top-style: dotted;
    opacity: .9;
}

/* Satzform: aufklappbar unter der Kette */
.bez-satz > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.bez-satz > summary::-webkit-details-marker { display: none; }
.bez-satz > summary::before {
    content: "\F229";
    font-family: "bootstrap-icons";
    font-size: .7rem;
}
.bez-satz[open] > summary::before { content: "\F235"; }
.bez-satz code {
    background: var(--dva-table-hover-bg, #f1f5f9);
    border: 1px solid var(--dva-border, #d8e0ea);
    border-radius: 4px;
    padding: 0 .25rem;
}

/* Beziehungsnetz Stufe 3: der vermutete Schritt.
   Gestrichelt und bernstein — die Strichart traegt die Aussage, nicht die
   Farbe allein; im Schwarzweissdruck bleibt sie damit erkennbar. */
.bez-glied-vermutet {
    color: var(--dva-warning, #b45309);
}
.bez-glied-vermutet .bez-li {
    border-top-style: dashed;
    opacity: .9;
}

/* Personen-Buendelung am Ansprechpartner */
.buendel-liste .buendel-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .1rem;
    border-top: 1px solid var(--dva-border, #d8e0ea);
}
.buendel-liste .buendel-zeile:first-child { border-top: 0; }
.buendel-liste .buendel-anker {
    font-size: .78rem;
    color: var(--dva-text-muted, #64748b);
}
.buendel-liste .buendel-tat { margin-left: auto; display: flex; gap: .35rem; }

/* Beziehungsnetz Stufe 4: die Sternansicht.
   Feste Geometrie statt kraftgerichtetem Netz — der Ring ergibt sich aus der
   Entfernung, die Stelle im Ring aus der Nachbarschaft. Zweimal aufgerufen
   sieht es zweimal gleich aus. */
.bez-sternfeld {
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #d8e0ea);
    border-radius: var(--dva-card-radius, 10px);
    padding: .5rem;
    overflow-x: auto;
}
.bez-stern { position: relative; margin: 0 auto; }
.bez-stern svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.bez-ringlinie { fill: none; stroke: var(--dva-border, #e3e9f2); stroke-width: 1; }
.bez-ringtext {
    fill: var(--dva-text-muted, #9aa6b8);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-anchor: middle;
    /* Weisse Kontur, damit die Beschriftung auch ueber einer Linie lesbar
       bleibt — ohne sie verschwindet sie im Ring. */
    stroke: var(--dva-card-bg, #fff);
    stroke-width: 3.5;
    paint-order: stroke fill;
}
.bez-kante { stroke: var(--dva-border, #c3cedd); stroke-width: 1.5; fill: none; }
.bez-kante.vermutet { stroke: var(--dva-warning, #b45309); stroke-dasharray: 5 4; stroke-width: 2; }
.bez-kante.verdeckt { stroke: var(--dva-text-muted, #94a3b8); stroke-dasharray: 2 4; stroke-width: 2; }

.bez-sternknoten {
    position: absolute;
    transform: translate(-50%, -50%);
    max-width: 10rem;
    font-size: .76rem;
    padding: .28rem .55rem;
    white-space: normal;
    text-align: left;
}
.bez-sternknoten.mitte {
    font-size: .92rem;
    padding: .45rem .8rem;
    font-weight: 600;
    box-shadow: 0 0 0 4px rgba(var(--dva-primary-rgb, 29 78 216), .18);
}

/* Beziehungsnetz Stufe 5: die Kreuztabelle.
   Zeigt „wer hat mit wem zu tun", nie das „warum" — deshalb ist jede gefuellte
   Zelle ein Link in die gezielte Ansicht. */
.bez-matrixfeld {
    background: var(--dva-card-bg, #fff);
    border: 1px solid var(--dva-border, #d8e0ea);
    border-radius: var(--dva-card-radius, 10px);
    padding: .4rem;
    overflow-x: auto;
}
table.bez-matrix { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 640px; }
table.bez-matrix th {
    font-weight: 500;
    font-size: .8rem;
    color: var(--dva-text-muted, #55637a);
    text-align: left;
    padding: .35rem .5rem;
    vertical-align: bottom;
}
table.bez-matrix thead th { color: var(--dva-text, #0f172a); font-weight: 600; line-height: 1.25; }
table.bez-matrix tbody th { white-space: nowrap; }
table.bez-matrix th.bez-ecke { width: 13rem; }

.bez-zelle {
    position: relative;
    display: block;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: .78rem;
    padding: .4rem .3rem;
    text-align: center;
    line-height: 1.25;
    text-decoration: none;
    background: var(--dva-table-hover-bg, #f7f9fc);
    color: var(--dva-text-muted, #7b8798);
}
.bez-zelle .weit { display: block; font-weight: 600; font-size: .82rem; }
.bez-zelle .schloss { position: absolute; top: 2px; right: 4px; font-size: .62rem; opacity: .8; }
/* Naehe dunkler, Ferne blasser — die Farbe traegt die Entfernung. */
.bez-zelle.e0 { background: #d7e3fb; color: #12336f; border-color: #b8ccf5; }
.bez-zelle.e1 { background: #e5edfc; color: #1c4494; }
.bez-zelle.e2 { background: #eff3fb; color: #41567c; }
.bez-zelle.e3 { background: #f5f7fb; color: #61708c; }
/* Sicherheit schlaegt Entfernung: gestrichelt bzw. gepunktet, nicht nur blasser. */
.bez-zelle.vermutet {
    background: #fdf2e3; color: #8a5a05;
    border-style: dashed; border-color: #e8cfa4;
}
.bez-zelle.verdeckt {
    background: repeating-linear-gradient(135deg, #f4f6fa 0 5px, #e9edf4 5px 10px);
    color: #4a5668; border-style: dotted; border-color: #94a3b8;
}
.bez-zelle.leer { background: transparent; color: var(--dva-border, #c3cbd8); cursor: default; }
a.bez-zelle:hover { filter: brightness(.97); }

/* ==========================================================================
   Ablauf am Vorgangstyp — die Kette im Bauzustand
   Grundriss: docs/prototyp-ablauf-b.html („Die Schiene").

   Bewusst nur eine duenne Schicht ueber .statusschiene: die Editor-Kette IST
   die Schiene aus dem Vorgang, nicht ihre Nachbildung. Wer den Ablauf baut,
   soll ihn in derselben Figur sehen, in der der Anwender ihn spaeter liest.
   Alle Farben laufen ueber die --dva-Marken, damit die Maske auch im dunklen
   Schema und im Cockpit traegt.
   ========================================================================== */

/* Ein Kettenglied ist hier anklickbar (im Vorgang ist es das absichtlich nicht). */
.ablauf-glied { display: inline-flex; }
a.schiene-stufe { text-decoration: none; border-radius: 99px; }
a.schiene-stufe:hover { background: rgba(var(--dva-primary-rgb), .08); color: var(--dva-primary); }
.schiene-stufe.ablauf-endet .stufe-punkt {
    border-color: var(--dva-success);
    color: var(--dva-success);
}
.schiene-stufe.ablauf-endet.ist-hier .stufe-punkt {
    background: var(--dva-success);
    border-color: var(--dva-success);
    color: var(--dva-card-bg);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

/* Was an einer Stufe haengt, auf Schienenmass: gelb Bedingung, blau Unterstatus. */
.ablauf-punkte { display: inline-flex; gap: 2px; align-items: center; margin-left: .1rem; }
.ablauf-punkt { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.ablauf-punkt.ist-bed { background: var(--dva-warning); }
.ablauf-punkt.ist-sub { background: var(--dva-primary); }

/* Der Zwischenraum IST die Einfuegestelle — deshalb liegt der Knopf dort und
   nicht als „Neu anlegen" am Listenende. Sichtbar wird er erst unter der Maus,
   sonst zerfaellt die Kette optisch in lauter Knoepfe. */
.ablauf-luecke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex: 0 0 18px;
}
.ablauf-plus {
    border: 1px dashed var(--dva-border);
    background: var(--dva-card-bg);
    color: var(--dva-text-muted);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: .6rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .12s, border-color .12s, color .12s;
}
.ablauf-luecke:hover .ablauf-plus,
.ablauf-plus:focus-visible {
    opacity: 1;
    border-color: var(--dva-primary);
    color: var(--dva-primary);
}

/* Ziehen (Zugabe — die Pfeiltasten auf der Werkbank tun dasselbe). */
.ablauf-glied[draggable="true"] { cursor: grab; }
.ablauf-glied.ist-am-ziehen { opacity: .4; }
.ablauf-glied.ist-ziel { box-shadow: -2px 0 0 0 var(--dva-primary); }

/* ==========================================================================
   Vorgangsmaske: Kopf und Reiter bleiben stehen

   Wer in einem langen Vorgang scrollte, verlor als Erstes den Kopf — und
   damit die Auskunft, WORAN er gerade arbeitet — und als Zweites die
   Reiterleiste, also den Weg zu jedem anderen Teil der Mappe. Beides klebt
   jetzt unter der Topbar; alles Uebrige scrollt darunter weg.

   Bewusst EIN klebender Block statt zweier: Der Kopf ist verschieden hoch
   (der Titel bricht um, die Merkmalszeile kommt dazu). Zwei getrennte
   sticky-Elemente brauchten dafuer eine gerechnete Hoehe aus JavaScript und
   liefen bei jedem Umbruch aus dem Tritt.

   KEINE negativen Randmasse: Der Block ist ein Blockelement und deckt die
   Inhaltsbreite vollstaendig ab. Die seitliche Polsterung von .app-content
   traegt ohnehin keinen Inhalt — und sie ist je nach Bildschirmbreite
   verschieden gross (1.5rem, 1rem, 0). Ein fest verdrahteter Ausgleich waere
   auf zwei von drei Breiten falsch.
   ========================================================================== */
.vorgang-kopfblock {
    position: sticky;
    top: var(--dva-topbar-height);
    z-index: 1010;
    background: var(--dva-content-bg);
    padding-bottom: .75rem;
}

/* Der Abstand unter den Reitern gehoert IN den Block, sonst bliebe ein
   ungedeckter Streifen, durch den der scrollende Inhalt sichtbar waere.
   Zwei Klassen schlagen die Bootstrap-Hilfsklasse .mb-3 ohne !important. */
.vorgang-kopfblock .nav-tabs {
    margin-bottom: 0;
}

/* Am Telefon nicht: Dort ist der Bildschirm zu niedrig, als dass Kopf und
   Reiter dauerhaft ein Drittel davon belegen duerften. */
@media (max-width: 767.98px) {
    .vorgang-kopfblock {
        position: static;
        padding-bottom: 0;
    }
    .vorgang-kopfblock .nav-tabs {
        margin-bottom: 1rem;
    }
}

/* Die KI-Durchsicht liegt jetzt im klebenden Kopf. Ihr Ergebnis kann lang
   werden — ohne Deckel schoebe eine ausfuehrliche Antwort den halben
   Bildschirm dauerhaft zu. Gedeckelt wird nur das Ergebnis, nicht der Block:
   Ein `overflow` auf dem Kopf selbst wuerde das Aufklappmenue „Mehr" der
   Reiterleiste abschneiden. */
.vorgang-kopfblock #kiReviewErgebnis:not(:empty) {
    max-height: 32vh;
    overflow-y: auto;
    margin-top: .5rem;
}

/* Der klebende Kopf im geschrumpften Zustand (Klasse kommt aus app.js).
   Nur ab Tablet-Breite: darunter klebt der Block ohnehin nicht, dort waere
   ein wegfallender Kopf ein Verlust ohne Gegenwert. */
@media (min-width: 768px) {
    .vorgang-kopfblock .detail-header {
        transition: padding .12s ease, margin-bottom .12s ease;
    }
    .vorgang-kopfblock .detail-header h1 {
        transition: font-size .12s ease, margin-bottom .12s ease;
    }

    /* Firma, Typ, Status, Datum, „Gehoert zu" — sie aendern sich beim Lesen
       nicht und muessen deshalb nicht mitscrollen. */
    .vorgang-kopfblock.ist-kompakt .detail-meta {
        display: none;
    }
    .vorgang-kopfblock.ist-kompakt .detail-header {
        padding: .65rem 1rem;
        margin-bottom: .5rem;
    }
    .vorgang-kopfblock.ist-kompakt .detail-header h1 {
        font-size: 1.1rem;
        margin-bottom: 0;
    }
}

/* Wer Bewegung abbestellt hat, bekommt den Wechsel ohne Uebergang — der
   Zustand aendert sich trotzdem. */
@media (prefers-reduced-motion: reduce) {
    .vorgang-kopfblock .detail-header,
    .vorgang-kopfblock .detail-header h1 {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   `.vorgang-vorspann` — und warum hier keine Regel dazu steht

   Auf einer Arbeitsflaeche (Reiter „Angebot", „Aufgaben", „Dateien" … —
   alles ausser Uebersicht, E-Mails und Aktivitaeten) stehen
   Verkaufschance-Leiste, Statusschiene und KI-Durchsicht NICHT im klebenden
   Kopf, sondern in einem Vorspann darueber. Sie scrollen dort weg; kleben
   bleiben Titelkarte und Reiterleiste. Entschieden wird das in PHP, weil es
   am Reiter haengt und nicht an der Fensterbreite:
   inc/views/projects/detail.php, Abschnitt „Was sonst noch klebt".

   Der Vorspann braucht dafuer keine einzige eigene Eigenschaft: Er ist ein
   gewoehnlicher Block im Fluss, und die Karten darin tragen ihre Abstaende
   selbst. Die Klasse steht trotzdem im Markup — sie ist der Anker, falls
   dort spaeter doch etwas zu regeln ist, und sie macht beim Lesen der Seite
   sichtbar, warum die Leiste einmal im Kopf steht und einmal darueber.

   Eine Folge, die bewusst so bleibt: Der Deckel fuer das KI-Ergebnis oben
   (`max-height: 32vh`) haengt an `.vorgang-kopfblock` und greift im Vorspann
   nicht. Er war noetig, damit eine lange Antwort den klebenden Kopf nicht
   dauerhaft aufblaeht — im Vorspann scrollt sie ohnehin weg.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Listen: der Kopf bleibt stehen

   Wer eine lange Liste durchsieht, verliert zuerst die Spaltenueberschriften
   — und damit die Auskunft, was in der dritten Spalte eigentlich steht — und
   dann den Seitenkopf mit „Neu anlegen" und der Suche. Beides klebt jetzt.

   ERST AB 992 PIXEL. Darunter zeigt die Anwendung ohnehin Karten statt einer
   Tabelle (die Tabellen tragen `d-none d-md-block`), und ein dauerhaft
   belegter Kopf waere auf einem schmalen Schirm teurer als nuetzlich.

   WARUM .table-responsive DABEI AUFGEMACHT WIRD

   Bootstrap setzt darauf `overflow-x: auto`. Das macht den Kasten zu einem
   eigenen Scrollbereich — und ein `position: sticky` darin klebt am Kasten
   statt am Fenster. Nachgemessen: Der Spaltenkopf stand bei 600 Pixeln
   Scrollhoehe auf -403, also laengst ausserhalb des Bildes.

   Der Querlauf wird deshalb aufgemacht, ABER NUR, wenn die Tabelle auch
   hineinpasst. Ob sie das tut, misst app.js und setzt sonst die Klasse
   `braucht-querlauf` — dann bleibt es beim Querscrollen und der Spaltenkopf
   klebt eben nicht. Lieber keine klebende Ueberschrift als eine Spalte, die
   niemand mehr erreicht.

   `overflow: clip` statt `hidden` am Kasten: Beides schneidet die Ecken an
   der Rundung ab, aber `clip` macht KEINEN Scrollbereich auf — sonst waere
   das Problem nur eine Ebene hoeher gewandert.
   ========================================================================== */
@media (min-width: 992px) {
    .page-header {
        position: sticky;
        top: var(--dva-topbar-height);
        z-index: 1008;
        background: var(--dva-content-bg);
        /* Der Abstand muss INNEN liegen: Ein Aussenabstand waere ein Streifen
           ohne Grund, durch den die Zeilen darunter hindurchscrollen. */
        margin-bottom: 0;
        padding-bottom: 1.25rem;
    }

    .table-container {
        overflow: clip;
    }

    .table-container > .table-responsive {
        overflow: visible;
    }

    /* Zu breit fuer den Kasten — dann hat der Querlauf Vorrang. */
    .table-container > .table-responsive.braucht-querlauf {
        overflow-x: auto;
    }

    .table-container > .table-responsive:not(.braucht-querlauf) thead th {
        position: sticky;
        /* Unter dem Seitenkopf, dessen Hoehe app.js laufend nachfuehrt.
           Der Rueckfallwert gilt, solange das Skript nicht gelaufen ist. */
        top: var(--dva-listenkopf, var(--dva-topbar-height));
        z-index: 3;
        /* Die Trennlinie muss als Schatten kommen: Ein `border-bottom` an
           einer klebenden Zelle scrollt in manchen Browsern mit der Tabelle
           weg, weil Zellenraender zum Tabellenraster gehoeren. */
        box-shadow: inset 0 -1px 0 var(--dva-border);
    }

    /* ----------------------------------------------------------------------
       Ausnahme: die Arbeitsliste behaelt ihren eigenen Scrollkasten

       Die Rasteransicht ist kein mitlaufender Listenausschnitt, sondern ein
       Tabellenblatt fester Hoehe (`.grid-scroll` mit `max-height`), dessen
       Kopf am KASTEN klebt. Die beiden Regeln darueber nahmen ihr genau das:
       `overflow: visible` machte aus dem Kasten wieder einen offenen Block,
       und `overflow: clip` am Elternteil schnitt alles ab, was ueber die
       Hoehe hinausragte. Sichtbar blieben rund zehn Zeilen — der Rest war
       fort, ohne Scrollbalken und ohne jeden Hinweis, dass da noch etwas
       ist. Wer 50 Zeilen eingestellt hat und zehn sieht, liest die Liste als
       vollstaendig und zieht falsche Schluesse daraus.
       ---------------------------------------------------------------------- */
    .table-container > .table-responsive.grid-scroll {
        overflow: auto;
    }

    /* Der Kopf klebt hier am Kasten, nicht am Fenster — sonst stuende er um
       die Hoehe des Seitenkopfes versetzt mitten in der Liste. */
    .table-container > .table-responsive.grid-scroll thead th {
        top: 0;
    }
}

/* ==========================================================================
   Menue bearbeiten — Bearbeitungsmodus der Seitenleiste

   Prototyp B (docs/prototyp-menue.html): Das Menue wird dort gebaut, wo es
   steht. Alles Folgende ist im Normalbetrieb unsichtbar und wird erst durch
   die Klasse `menue-bearbeiten` am <body> geschaltet (assets/js/menue.js).

   Diese Schicht steht bewusst am DATEIENDE: Sie ueberformt die Seitenleiste,
   und spaetere Abschnitte duerfen sie nicht still ueberschreiben.
   ========================================================================== */

/* Der Einstieg unten in der Leiste — sieht aus wie ein Menuepunkt, ist aber
   ein Knopf. Ohne die Angleichung faellt er als Fremdkoerper auf. */
.menue-bearbeiten-knopf {
    width: 100%;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.75;
}
.menue-bearbeiten-knopf:hover {
    background: var(--dva-sidebar-hover);
    color: var(--dva-sidebar-text-active);
    opacity: 1;
}

/* Das Kreuz an einem Punkt und die Werkzeuge einer Gruppe: nur im Modus. */
.menue-punkt-weg,
.menue-gruppenwerkzeuge,
.menue-abwurf {
    display: none;
}
body.menue-bearbeiten .menue-punkt-weg {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0 0.15rem;
    color: var(--dva-sidebar-text);
    opacity: 0.55;
    font-size: 0.7rem;
    cursor: pointer;
}
body.menue-bearbeiten .menue-punkt-weg:hover { opacity: 1; color: #fca5a5; }

body.menue-bearbeiten .menue-gruppenwerkzeuge {
    display: flex;
    gap: 0.15rem;
    padding: 0 1.25rem 0.25rem;
}
.menue-gruppenwerkzeuge button {
    background: none;
    border: 0;
    color: var(--dva-sidebar-text);
    opacity: 0.6;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
    border-radius: 4px;
}
.menue-gruppenwerkzeuge button:hover {
    opacity: 1;
    background: var(--dva-sidebar-hover);
    color: var(--dva-sidebar-text-active);
}

/* Die Abwurfstelle. Eine leere Gruppe braucht sichtbaren Boden, sonst gibt
   es nichts, worauf man ziehen koennte. */
body.menue-bearbeiten .menue-abwurf {
    display: block;
    margin: 0.15rem 1rem 0.4rem;
    padding: 0.35rem;
    border: 1px dashed var(--dva-sidebar-border);
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--dva-sidebar-text);
    opacity: 0.5;
    text-align: center;
}
body.menue-bearbeiten .sidebar-section-items.ist-abwurfziel {
    box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.7);
    border-radius: 8px;
}
body.menue-bearbeiten .sidebar-nav-item.ist-ziehbar { cursor: grab; }
body.menue-bearbeiten .sidebar-nav-item.wird-gezogen { opacity: 0.4; }
/* Der Modus ist ein Zustand — er muss sichtbar sein, sonst wundert man sich
   ueber Kreuze an jedem Menuepunkt. */
body.menue-bearbeiten .app-sidebar { box-shadow: inset 0 0 0 2px var(--dva-primary); }

/* ---- Die Katalogschublade ---- */
.menue-schublade {
    position: fixed;
    /* Unter der Topbar, nicht darueber: Suchfeld und Kopfzeile der Anwendung
       bleiben waehrend des Umbaus bedienbar. */
    top: var(--dva-topbar-height, 56px);
    bottom: 0;
    left: var(--dva-sidebar-width);
    width: 310px;
    z-index: 1250;
    background: var(--dva-card-bg);
    border-right: 1px solid var(--dva-border);
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
}
.menue-schublade[hidden] { display: none; }
.menue-schublade-kopf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--dva-border);
}
.menue-schublade-kopf strong { flex: 1 1 auto; font-size: 0.95rem; }
.menue-schublade-suche { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--dva-border); }
.menue-schublade-liste { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 0.6rem 1.2rem; }
.menue-schublade-fuss {
    padding: 0.5rem 0.7rem;
    border-top: 1px solid var(--dva-border);
    font-size: 0.75rem;
    color: var(--dva-text-muted);
}
.menue-katalog-kopf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.7rem 0 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dva-text-muted);
}
.menue-katalog-kopf button { margin-left: auto; font-size: 0.75rem; text-transform: none; letter-spacing: 0; }
.menue-katalog-punkt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--dva-border);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.86rem;
    background: var(--dva-card-bg);
    cursor: grab;
}
.menue-katalog-punkt[hidden] { display: none; }
.menue-katalog-punkt.wird-gezogen { opacity: 0.4; }
.menue-katalog-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menue-katalog-plus {
    background: none;
    border: 0;
    color: var(--dva-primary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

/* Am Telefon nicht: Die Leiste ist dort ein Ueberblendmenue, und eine
   Schublade daneben haette keinen Platz. Der Knopf entfaellt mit. */
@media (max-width: 767.98px) {
    .menue-schublade { display: none !important; }
    .menue-bearbeiten-knopf { display: none; }
}

/* Rueckmeldung nach einer Aenderung. Kurz, unten rechts, ohne Bestaetigung. */
.menue-meldung {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2400;
    background: #0f172a;
    color: #fff;
    border-radius: 9px;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    max-width: 26rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}
.menue-meldung[hidden] { display: none; }

/* ==========================================================================
   Bildschirmfoto aus der Zwischenablage — Vorschau am Anhangfeld

   Gehoert zu assets/js/bild-einfuegen.js. Dieselben Klassennamen benutzt das
   Kundenportal (assets/css/portal.css); zwei getrennte Namen fuer dieselbe
   Sache waeren zwei Gelegenheiten, sie auseinanderlaufen zu lassen.
   ========================================================================== */
.bild-vorschau {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    /* In der Knopfreihe des Antwortformulars steht die Vorschau in einer
       eigenen Zeile — zwischen Dateifeld und „Senden" waere kein Platz. */
    flex: 1 0 100%;
}
.bild-vorschau:empty { display: none; }
.bild-vorschau-stueck {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--dva-border);
    border-radius: 8px;
    padding: .2rem .4rem .2rem .2rem;
    background: var(--dva-content-bg);
    font-size: .8rem;
    max-width: 22rem;
}
.bild-vorschau-stueck img {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: cover;
    border-radius: 6px;
    background: var(--dva-card-bg);
}
.bild-vorschau-stueck > i.bi {
    width: 2.4rem;
    text-align: center;
    color: var(--dva-text-muted);
}
.bild-vorschau-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dva-text);
}
.bild-vorschau-weg {
    border: 0;
    background: none;
    color: var(--dva-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .2rem;
    cursor: pointer;
}
.bild-vorschau-weg:hover { color: var(--dva-danger); }

.bild-meldung.ist-fehler { color: var(--dva-danger); }
.bild-einfuegehinweis kbd {
    background: var(--dva-content-bg);
    border: 1px solid var(--dva-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 .25rem;
    font-size: .75rem;
    color: var(--dva-text);
}

/* Beim Ziehen einer Datei ueber das Formular: sichtbares Ziel, sonst raet
   man, ob das Loslassen hier ueberhaupt etwas bewirkt. */
form.ist-abwurfziel {
    outline: 2px dashed var(--dva-primary);
    outline-offset: 4px;
    border-radius: 8px;
}

/* =========================================================================
   ABGESCHLOSSENE VORGAENGE (inc/VorgangAbschluss.php)

   Arbeitslisten zeigen nur Laufendes. Der Schalter darunter ist leise — er
   ist ein Ausweg, keine Handlung. Wo Abgeschlossene doch erscheinen (Suche,
   Sprungfeld, nach dem Einblenden), treten sie zurueck statt zu verschwinden:
   Wiederfinden bleibt moeglich, sie konkurrieren nur nicht mit der Arbeit.
   ========================================================================= */
.abgeschlossene-schalter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    padding: .4rem .6rem;
    text-decoration: none;
}
.abgeschlossene-schalter:hover,
.abgeschlossene-schalter:focus-visible {
    text-decoration: underline;
}
.ist-abgeschlossen {
    opacity: .6;
}
.ist-abgeschlossen:hover,
.ist-abgeschlossen:focus-within {
    opacity: 1;
}

/* Abschluss- und Wiederaufnahme-Dialog */
.abschluss-hinweise {
    border: 1px solid var(--dva-border);
    border-radius: 8px;
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.abschluss-hinweise ul {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
}
.abschluss-hinweise .abschluss-zeile + .abschluss-zeile {
    margin-top: .5rem;
}
.abschluss-hinweise .bi {
    margin-right: .35rem;
}

/* ==========================================================================
   Ablaufband — der Fortschritt ueber die Untervorgaenge
   docs/Konzept-Ablaufkette.md, L3 · inc/views/projects/_ablaufband.php

   Steht ans Dateiende, weil es die Karten- und Abzeichenregeln weiter oben
   ueberformt; stuende es davor, wuerden sie es still zurueckdrehen.

   Ausschliesslich --dva-Tokens, keine Bootstrap-Festwerte: .text-muted & Co.
   machen in Dunkel und Cockpit ganze Saetze unsichtbar.
   ========================================================================== */
.ablaufband {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    margin-bottom: 1rem;
    overflow: hidden;
}
.ablauf-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);
}
.ablauf-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;
}
.ablauf-zahl { font-variant-numeric: tabular-nums; }

.ablauf-liste { list-style: none; margin: 0; padding: 0; }
.ablauf-zeile {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .5rem .85rem;
    font-size: .88rem;
}
.ablauf-zeile + .ablauf-zeile { border-top: 1px solid var(--dva-border); }

/* Die laufende Nummer traegt die Reihenfolge — ohne sie liest sich das Band
   wie eine Menge, nicht wie eine Kette. */
.ablauf-nr {
    flex: 0 0 auto;
    width: 1.5rem; height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 99px;
    border: 1px solid var(--dva-border);
    font-size: .74rem; font-weight: 700;
    color: var(--dva-text-muted);
    font-variant-numeric: tabular-nums;
}
.ablauf-marke-typ {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .76rem; font-weight: 620;
    padding: .1rem .5rem;
    border-radius: 99px;
    border: 1px solid var(--ablauf-typ, var(--dva-border));
    color: var(--ablauf-typ, var(--dva-text-muted));
    white-space: nowrap;
}
.ablauf-mitte {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.ablauf-titel {
    font-weight: 620;
    color: var(--dva-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.ablauf-titel:hover { text-decoration: underline; }
.ablauf-stand {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .78rem;
    padding: .08rem .5rem;
    border-radius: 99px;
    border: 1px solid var(--ablauf-stufe, var(--dva-border));
    color: var(--ablauf-stufe, var(--dva-text-muted));
    white-space: nowrap;
}
.ablauf-stand.ist-fertig { border-color: var(--dva-success); color: var(--dva-success); }
.ablauf-stand.ohne, .ablauf-zustaendig .ohne { font-style: italic; }
.ablauf-unterstatus { font-size: .78rem; color: var(--dva-text-muted); }

.ablauf-rechts {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    font-size: .78rem;
    color: var(--dva-text-muted);
}
.ablauf-rechts > span { display: inline-flex; align-items: center; gap: .28rem; }
.ablauf-schritt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Erledigt wird leiser, nicht bunter: die Aufmerksamkeit gehoert dem, was
   noch laeuft. */
.ablauf-zeile.ist-fertig .ablauf-titel,
.ablauf-zeile.ist-fertig .ablauf-marke-typ { opacity: .72; }

/* Die Grenze soll als Grenze erkennbar sein, nicht als Fehler. Deshalb
   gedaempft und mit Schloss — aber vollstaendig sichtbar. */
.ablauf-zeile.ist-gesperrt { background: var(--dva-bg-subtle, transparent); }
.ablauf-gesperrt {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .82rem; font-style: italic;
    color: var(--dva-text-muted);
}

@media (max-width: 767.98px) {
    .ablauf-zeile { gap: .45rem; }
    .ablauf-rechts { margin-left: 0; width: 100%; gap: .7rem; }
    .ablauf-mitte { flex-basis: 100%; }
}

/* Durchlaufzeiten — „läuft noch" (docs/Konzept-Ablaufkette.md, L9).
   Eigene Klasse statt .text-warning-emphasis: Fuer die Bootstrap-Variante gibt
   es in app.css keine Ueberformung, und in Dunkel und Cockpit verschwindet sie. */
.dlz-laeuft { color: var(--dva-warning); font-weight: 600; }
.ablauf-zeiten {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--dva-text-muted);
    text-decoration: none;
}
.ablauf-zeiten:hover { color: var(--dva-primary); text-decoration: underline; }

/* ==========================================================================
   Ablaufbild — der Ablauf als Bild
   docs/Konzept-Werkstatt-Gesicht.md, Stufe 1

   Ausschliesslich --dva-Tokens, keine Bootstrap-Festwerte und keine festen
   Farben im SVG: Ein Bild, das in Dunkel und Cockpit die Haelfte verliert,
   ist schlimmer als kein Bild — man merkt ihm nicht an, dass etwas fehlt.
   ========================================================================== */
.ablaufbild { display: block; }

.ablaufbild-kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
    font-size: .8rem;
    color: var(--dva-text-muted);
}
.ablaufbild-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;
}
.ablaufbild-zeiten {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-left: auto; color: var(--dva-text-muted); text-decoration: none;
}
.ablaufbild-zeiten:hover { color: var(--dva-primary); text-decoration: underline; }

/* Das Bild wird NIE kleiner als seine natuerliche Groesse. Bis 2026-09-21
   schrumpfte es auf die Fensterbreite, und bei sieben Stufen kam die
   Beschriftung mit sieben, acht Pixeln an — lesbar nur mit dem Zoom des
   Browsers. Breite Bilder schieben sich jetzt seitlich. Wer den Ueberblick
   ueber alles will, schaltet auf „Ganz zeigen" (.ist-eingepasst). */
.ablaufbild-flaeche { overflow-x: auto; }
.ablaufbild-svg { display: block; max-width: none; }
.ablaufbild-flaeche.ist-eingepasst .ablaufbild-svg { width: 100%; height: auto; }
.ablaufbild-groesse {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .6rem; font-size: .85rem;
    color: var(--dva-text-muted); background: none;
    border: 1px solid var(--dva-border); border-radius: 99px; cursor: pointer;
}
.ablaufbild-groesse:hover { color: var(--dva-primary); border-color: var(--dva-primary); }

/* --- Die Kaesten ------------------------------------------------------- */
.bild-stufe rect,
rect.bild-stufe {
    fill: var(--dva-card-bg);
    stroke: var(--dva-border);
    stroke-width: 1;
}
.bild-stufenname { font-size: 14.5px; fill: var(--dva-text); }
.bild-stufenzusatz { font-size: 12.5px; fill: var(--dva-text-muted); }

/* Das Mengen-Plaettchen: die eine Zahl, die man im Vorbeigehen liest. */
.bild-plaettchen { fill: var(--dva-primary-light); stroke: none; }
.bild-plaettchen-text { font-size: 12px; font-weight: 650; fill: var(--dva-primary-dark); }
.bild-stufe.ist-erledigt .bild-plaettchen { fill: var(--dva-bg-subtle, #eef2f6); }
.bild-stufe.ist-erledigt .bild-plaettchen-text { fill: var(--dva-text-muted); }

/* erledigt: da, aber nicht mehr im Weg */
.bild-stufe.ist-erledigt rect {
    fill: color-mix(in srgb, var(--dva-success) 12%, var(--dva-card-bg));
    stroke: color-mix(in srgb, var(--dva-success) 45%, var(--dva-card-bg));
}
.bild-stufe.ist-erledigt .bild-stufenname { fill: var(--dva-success); }

/* laeuft: die eine Stufe, auf die es gerade ankommt */
.bild-stufe.ist-laeuft rect { fill: color-mix(in srgb, var(--dva-primary) 12%, var(--dva-card-bg)); stroke: var(--dva-primary); stroke-width: 2; }
.bild-stufe.ist-laeuft .bild-stufenname { fill: var(--dva-primary); font-weight: 600; }
.bild-stufe.ist-laeuft .bild-stufenzusatz { fill: var(--dva-primary); }

/* steht: wartet auf etwas, das anderswo passieren muss */
.bild-stufe.ist-steht rect { fill: color-mix(in srgb, var(--dva-warning) 16%, var(--dva-card-bg)); stroke: var(--dva-warning); stroke-width: 2; }
.bild-stufe.ist-steht .bild-stufenname { fill: var(--dva-warning); font-weight: 600; }
.bild-stufe.ist-steht .bild-stufenzusatz { fill: var(--dva-warning); }

/* Ruecklaeufer: war schon weiter und ist zurueckgefallen */
.bild-stufe.ist-ruecklauf rect { fill: color-mix(in srgb, var(--dva-danger) 12%, var(--dva-card-bg)); stroke: var(--dva-danger); stroke-width: 2; }
.bild-stufe.ist-ruecklauf .bild-stufenname { fill: var(--dva-danger); font-weight: 600; }
.bild-stufe.ist-ruecklauf .bild-stufenzusatz { fill: var(--dva-danger); }

/* kommt noch: leer, aber vorhanden — der Weg ist sichtbar */
.bild-stufe.ist-kommt rect { fill: none; stroke: var(--dva-border); stroke-dasharray: 0; }
.bild-stufe.ist-kommt .bild-stufenname { fill: var(--dva-text-muted); }

/* entsteht spaeter: den Schritt gibt es noch gar nicht */
.bild-stufe.ist-geplant rect { fill: none; stroke: var(--dva-border); stroke-dasharray: 4 3; }
.bild-stufe.ist-geplant .bild-stufenname { fill: var(--dva-text-muted); font-style: italic; }

/* kein Einblick: die Grenze wird gezeigt, nicht der Inhalt */
.bild-stufe.ist-gesperrt {
    fill: var(--dva-bg-subtle, #f1f5f9);
    stroke: var(--dva-border);
    stroke-dasharray: 3 3;
    opacity: .8;
}

/* --- Beschriftung und Linien ------------------------------------------ */
.bild-bahnname { font-size: 14.5px; fill: var(--dva-text); font-weight: 600; }
.bild-bahnname.ist-kopf { fill: var(--dva-info); }
.bild-bahnzusatz { font-size: 12.5px; fill: var(--dva-text-muted); }
.bild-mehr { font-size: 12.5px; fill: var(--dva-text-muted); }
.bild-trenner { stroke: var(--dva-border); stroke-width: 1; opacity: .5; }

/* Eine Wartekante ist blass, solange sie nur eine Regel ist — und tritt
   hervor, sobald sie gerade wirkt. Sonst saehe ein eingerichteter Ablauf
   aus wie ein blockierter. */
.bild-kante { stroke: var(--dva-border); stroke-width: 1.2; stroke-dasharray: 4 3; }
.bild-kante.ist-offen { stroke: var(--dva-warning); stroke-width: 1.8; stroke-dasharray: none; }

/* --- Legende und Hinweise --------------------------------------------- */
.ablaufbild-legende {
    list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem;
    margin: .7rem 0 0; padding: 0;
    font-size: .78rem; color: var(--dva-text-muted);
}
.ablaufbild-legende li { display: inline-flex; align-items: center; gap: .35rem; }
.bild-punkt {
    width: .7rem; height: .7rem; border-radius: 3px;
    border: 1.5px solid var(--dva-border); background: var(--dva-card-bg);
    display: inline-block;
}
.bild-punkt.ist-erledigt { background: color-mix(in srgb, var(--dva-success) 16%, var(--dva-card-bg)); border-color: var(--dva-success); }
.bild-punkt.ist-laeuft   { background: color-mix(in srgb, var(--dva-primary) 16%, var(--dva-card-bg)); border-color: var(--dva-primary); }
.bild-punkt.ist-steht    { background: color-mix(in srgb, var(--dva-warning) 20%, var(--dva-card-bg)); border-color: var(--dva-warning); }
.bild-punkt.ist-ruecklauf{ background: color-mix(in srgb, var(--dva-danger) 16%, var(--dva-card-bg)); border-color: var(--dva-danger); }
.bild-punkt.ist-kommt    { background: transparent; }
.bild-punkt.ist-geplant  { background: transparent; border-style: dashed; }
.bild-punkt.ist-gesperrt { background: var(--dva-bg-subtle, #f1f5f9); border-style: dashed; }

.ablaufbild-hinweis {
    margin: .6rem 0 0; font-size: .82rem; color: var(--dva-warning);
}
.ablaufbild-befund {
    margin: .4rem 0 0; font-size: .82rem;
}
.ablaufbild-befund.ist-warnung { color: var(--dva-warning); }
.ablaufbild-befund.ist-fehler  { color: var(--dva-danger); }

.ablaufbild-uebergaben { margin-top: .7rem; font-size: .82rem; color: var(--dva-text-muted); }
.ablaufbild-uebergaben summary { cursor: pointer; }
.ablaufbild-uebergaben ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ==========================================================================
   Station — der Arbeitsplatz an der Linie
   docs/Konzept-Werkstatt-Gesicht.md, Stufe 2

   Grosse Ziele, wenig Text. Wer hier steht, hat Handschuhe an und sieht den
   Bildschirm aus zwei Metern — deshalb 56px Knoepfe statt der ueblichen 38
   und Schriftgroessen, die im Rest der Anwendung zu gross waeren.
   ========================================================================== */
.station { max-width: 620px; margin: 0 auto; }

.station-seitenkopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.station-seitenkopf h1 { margin: 0; font-size: 1.5rem; }
.station-seitenkopf p { margin: .2rem 0 0; color: var(--dva-text-muted); font-size: .9rem; }
.station-wechseln { color: var(--dva-text-muted); text-decoration: none; font-size: .9rem; }
.station-wechseln:hover { color: var(--dva-primary); text-decoration: underline; }

/* Hinweis auf der Karte: gemeldetes Problem, laenger als ueblich. Dieselbe
   Farbe wie „steht" im Leitstand — aber die Knoepfe bleiben. */
.station-karte.hat-hinweis { box-shadow: inset 4px 0 0 var(--dva-warning); }
.station-hinweise {
    margin: .6rem 0 .4rem;
    padding: .55rem .75rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--dva-warning) 14%, var(--dva-card-bg));
    color: var(--dva-text);
}
.station-hinweise p { margin: 0 0 .2rem; font-weight: 600; }
.station-hinweise p i { color: var(--dva-warning); }
.station-hinweise .station-hinweise-klein { font-weight: 400; font-size: .85rem; color: var(--dva-text-muted); margin: .25rem 0 0; }
.station-kopf-hinweis { color: var(--dva-warning); }

/* Die Maschinenwahl: gross genug fuer Handschuhe, unauffaellig genug, um
   nicht mit den Meldeknoepfen zu konkurrieren. */
.station-maschine {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    background: var(--dva-card-bg);
}
.station-maschine label { color: var(--dva-text-muted); font-size: .95rem; margin: 0; }
.station-maschine select {
    flex: 1 1 auto;
    min-height: 2.75rem;
    font-size: 1.05rem;
    padding: .35rem .6rem;
    color: var(--dva-text);
    background: var(--dva-input-bg, var(--dva-card-bg));
    border: 1px solid var(--dva-border);
    border-radius: .5rem;
}

.station-gruppe {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--dva-text-muted); margin: 1.2rem 0 .5rem;
}
.station-gruppe span {
    font-variant-numeric: tabular-nums; background: var(--dva-bg-subtle, #f1f5f9);
    border-radius: 99px; padding: 0 .45rem; margin-left: .3rem;
}

.station-karte {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius);
    padding: 1rem;
    margin-bottom: .8rem;
}
/* Nur der laufende Auftrag traegt Farbe. Faerbte jede Karte, waere die
   Aufmerksamkeit gleich verteilt — und dann fuehrt sie niemanden mehr. */
.station-karte.ist-laeuft { border-color: var(--dva-primary); border-width: 2px; }
.station-karte.ist-steht  { opacity: .85; }

.station-kopf { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.station-nummer {
    font-size: 1.15rem; font-weight: 650; color: var(--dva-text); text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.station-nummer:hover { color: var(--dva-primary); text-decoration: underline; }
.station-titel { font-size: 1rem; margin-top: .1rem; }
.station-zusatz { font-size: .82rem; color: var(--dva-text-muted); margin-top: .15rem; }

.station-marke {
    flex: 0 0 auto; font-size: .78rem; padding: .15rem .6rem; border-radius: 99px;
    border: 1px solid var(--dva-border); color: var(--dva-text-muted); white-space: nowrap;
}
.station-marke.ist-laeuft { border-color: var(--dva-primary); color: var(--dva-primary); }
.station-marke.ist-bereit { border-color: var(--dva-success); color: var(--dva-success); }
.station-marke.ist-steht  { border-color: var(--dva-warning); color: var(--dva-warning); }

.station-mengen { margin: .6rem 0 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.station-wartet { margin: .7rem 0 0; font-size: .9rem; color: var(--dva-warning); }

.station-felder { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.station-felder label { flex: 1 1 8rem; font-size: .8rem; color: var(--dva-text-muted); }
.station-felder input {
    display: block; width: 100%; height: 48px; margin-top: .2rem;
    font-size: 1.1rem; padding: 0 .7rem;
    border: 1px solid var(--dva-border); border-radius: var(--dva-card-radius, 8px);
    background: var(--dva-input-bg, var(--dva-card-bg)); color: var(--dva-text);
}

.station-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; min-height: 56px; margin-top: .6rem;
    font-size: 1.05rem; font-weight: 600;
    border-radius: var(--dva-card-radius, 8px);
    border: 1px solid var(--dva-border); background: var(--dva-card-bg); color: var(--dva-text);
    cursor: pointer;
}
.station-knopf.ist-start  { border-color: var(--dva-success); color: var(--dva-success); }
.station-knopf.ist-fertig { border-color: var(--dva-primary); color: var(--dva-primary); }
.station-knopf.ist-problem { min-height: 44px; font-size: .95rem; border-color: var(--dva-warning); color: var(--dva-warning); }
/* Pruefstufe: i.O. gruen, n.i.O. rot und gleich gross */
.station-knopf.ist-io  { border-color: var(--dva-success); color: var(--dva-success); }
.station-nio { margin-top: .6rem; }
.station-nio > summary.station-knopf.ist-nio {
    list-style: none; display: flex; align-items: center; justify-content: center; gap: .5rem;
    border-color: var(--dva-danger); color: var(--dva-danger);
}
.station-nio > summary::-webkit-details-marker { display: none; }
.station-nio[open] > summary.station-knopf.ist-nio { background: color-mix(in srgb, var(--dva-danger) 10%, var(--dva-card-bg)); }
.station-nio select,
.station-nio input[type="text"] {
    display: block; width: 100%; height: 44px; margin-top: .5rem; padding: 0 .7rem;
    border: 1px solid var(--dva-border); border-radius: var(--dva-card-radius, 8px);
    background: var(--dva-input-bg, var(--dva-card-bg)); color: var(--dva-text);
}
.station-nio .station-knopf.ist-rueckgabe { margin-top: .5rem; }
.station-knopf.ist-rueckgabe { min-height: 44px; font-size: .95rem; border-color: var(--dva-danger); color: var(--dva-danger); }
.station-knopf:hover { filter: brightness(1.06); }
.station-rueckgabe-ziel { margin: .5rem 0 0; color: var(--dva-text); }

.station-problem { margin-top: .6rem; font-size: .9rem; color: var(--dva-text-muted); }
.station-problem summary { cursor: pointer; }
.station-problem select,
.station-problem input[type="text"] {
    display: block; width: 100%; height: 44px; margin-top: .5rem; padding: 0 .7rem;
    border: 1px solid var(--dva-border); border-radius: var(--dva-card-radius, 8px);
    background: var(--dva-input-bg, var(--dva-card-bg)); color: var(--dva-text);
}

.station-leer { color: var(--dva-text-muted); padding: 2rem 0; text-align: center; }

/* Bedingungen in der Stationskarte: Haken von Hand sind anklickbar, geprüfte
   stehen daneben. Grosse Kaestchen, weil hier mit Handschuhen getippt wird. */
.station-punkte { list-style: none; margin: .8rem 0 0; padding: 0; font-size: .92rem; }
.station-punkte li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.station-punkte li.ist-erfuellt { color: var(--dva-text-muted); }
.station-punkte label { display: flex; align-items: center; gap: .55rem; cursor: pointer; margin: 0; }
.station-punkte input[type="checkbox"] { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; cursor: pointer; }
.station-punkte em { font-style: normal; font-size: .78rem; color: var(--dva-text-muted); margin-left: auto; }
.station-punkte .bi-check-circle-fill { color: var(--dva-success); }
.station-punkte .bi-hourglass-split { color: var(--dva-warning); }

/* ==========================================================================
   Leitstand — alle Auftraege auf einen Blick
   docs/Konzept-Werkstatt-Gesicht.md, Stufe 2
   ========================================================================== */
/* ──────────────────────────────────────────────────────────────
   Leitstand. Gehoert nach assets/css/app.css.
   Farben ausschliesslich ueber --dva-Tokens: Bootstrap-Festwerte
   verschwinden in Dunkel und im Cockpit.
   ────────────────────────────────────────────────────────────── */
.leitstand-tafel { overflow-x: auto; }
.leitstand {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: .85rem;
    color: var(--dva-text);
}
.leitstand th,
.leitstand td {
    border-bottom: 1px solid var(--dva-border);
    padding: .3rem .45rem;
    vertical-align: middle;
}
.leitstand thead th {
    background: var(--dva-table-header-bg, var(--dva-bg-subtle));
    color: var(--dva-text);
    font-weight: 600;
    font-size: .76rem;
    line-height: 1.15;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
.leitstand thead th.leitstand-bahnkopf { text-align: center; }
/* Die Fuge zwischen zwei Bahnen. Ohne sie verschwimmen zwoelf gleich breite
   Spalten zu einem Band, und niemand sieht mehr, wo die Fertigung aufhoert. */
.leitstand th.ist-bahnstart,
.leitstand td.ist-bahnstart { border-left: 2px solid var(--dva-border); }
.leitstand thead th.leitstand-stufenkopf {
    /* Stufennamen sind lang und die Spalten schmal — der Umbruch ist
       billiger als eine Tafel, die man seitlich schieben muss. */
    white-space: normal;
    min-width: 5.5rem;
    max-width: 8rem;
    font-weight: 500;
}
.leitstand tbody tr:hover td { background: var(--dva-table-hover-bg, var(--dva-hover-bg)); }

/* Die Auftragsspalte bleibt stehen: Ohne sie weiss beim Schieben niemand
   mehr, zu welchem Auftrag eine Zelle gehoert. */
.leitstand .leitstand-auftrag {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--dva-card-bg);
    min-width: 13rem;
    border-right: 2px solid var(--dva-border);
}
.leitstand thead th.leitstand-auftrag { z-index: 3; background: var(--dva-table-header-bg, var(--dva-bg-subtle)); }
.leitstand-auftrag a { color: var(--dva-text); text-decoration: none; font-weight: 600; }
.leitstand-auftrag a:hover { color: var(--dva-primary); text-decoration: underline; }
.leitstand-nebensache { color: var(--dva-text-muted); font-size: .75rem; }
/* Der Unterstatus hebt sich in der Nebenzeile ab: Er ist der Grund,
   warum die Zeile steht, und damit das Gesuchte auf einer vollen Tafel. */
.leitstand-unterstatus { color: var(--us-farbe, var(--dva-primary)); font-weight: 600; }
.leitstand-termin { white-space: nowrap; }
.leitstand-termin.ist-faellig { color: var(--dva-danger); font-weight: 600; }

/* Die Zelle. Farbcode wie im Ablaufbild — dieselben sieben Zustaende,
   dieselben Woerter in der Legende. */
.leitstand-zelle { padding: 0; text-align: center; }
.leitstand-zelle > * {
    display: block;
    min-height: 2.4rem;
    padding: .45rem .25rem;
    line-height: 1.2;
    font-size: .9rem;
    text-decoration: none;
    color: inherit;
}
.leitstand-zelle a:hover { outline: 2px solid var(--dva-primary); outline-offset: -2px; }
/* JEDER ZUSTAND AUF DEN ERSTEN BLICK.
   Bis 2026-09-21 stand hier fuer „erledigt" var(--dva-bg-subtle) — ein Wert,
   der nirgends festgelegt ist. Der Browser zeichnete gar nichts, und eine
   erledigte Station sah aus wie eine, die noch kommt. Eine Tafel, die den
   Fortschritt nicht zeigt, zeigt nichts. Jetzt: erledigt gruen mit Haken,
   laeuft blau gefuellt, steht orange gefuellt — getoent aus den Farben des
   jeweiligen Designs, damit es auch im dunklen Modus stimmt. */
.leitstand-zelle.ist-erledigt  > * {
    background: color-mix(in srgb, var(--dva-success) 16%, var(--dva-card-bg));
    color: var(--dva-success);
    font-weight: 700;
}
.leitstand-zelle.ist-laeuft    > * {
    background: color-mix(in srgb, var(--dva-primary) 16%, var(--dva-card-bg));
    box-shadow: inset 0 0 0 2px var(--dva-primary);
    color: var(--dva-primary); font-weight: 700;
}
.leitstand-zelle.ist-steht     > * {
    background: color-mix(in srgb, var(--dva-warning) 20%, var(--dva-card-bg));
    box-shadow: inset 0 0 0 2px var(--dva-warning);
    color: var(--dva-warning); font-weight: 700;
}
.leitstand-zelle.ist-ruecklauf > * {
    background: color-mix(in srgb, var(--dva-danger) 16%, var(--dva-card-bg));
    box-shadow: inset 0 0 0 2px var(--dva-danger);
    color: var(--dva-danger); font-weight: 700;
}
.leitstand-zelle.ist-kommt     > * { background: transparent; color: var(--dva-text-muted); }
.leitstand-zelle.ist-geplant   > * { background: transparent; color: var(--dva-text-muted); font-style: italic; box-shadow: inset 0 0 0 1px var(--dva-border); }
.leitstand-zelle.ist-gesperrt  > * {
    background: var(--dva-bg-subtle);
    color: var(--dva-text-muted);
    /* Schraffur = „kein Einblick", dieselbe Aussage wie die gesperrte Bahn
       im Ablaufbild. */
    background-image: repeating-linear-gradient(45deg,
        transparent 0 4px, var(--dva-border) 4px 5px);
}
.leitstand-tage { font-variant-numeric: tabular-nums; }

.leitstand-legende {
    list-style: none; display: flex; flex-wrap: wrap; gap: .8rem;
    margin: .7rem 0 0; padding: 0;
    font-size: .78rem; color: var(--dva-text-muted);
}
.leitstand-legende li { display: inline-flex; align-items: center; gap: .35rem; }

.leitstand-wahl-karte {
    display: block; text-decoration: none; color: var(--dva-text);
    border: 1px solid var(--dva-border); border-radius: var(--dva-card-radius, .5rem);
    padding: .9rem 1rem; background: var(--dva-card-bg); height: 100%;
}
.leitstand-wahl-karte:hover { border-color: var(--dva-primary); color: var(--dva-primary); }

/* Wandmodus: dieselbe Tafel, nur gross genug fuer zehn Meter Abstand. */
.leitstand-wand .leitstand { font-size: 1.15rem; }
.leitstand-wand .leitstand thead th { font-size: 1rem; }
.leitstand-wand .leitstand-zelle > * { min-height: 3.2rem; font-size: 1rem; }
.leitstand-wand .leitstand-nebensache { font-size: .95rem; }
.leitstand-wand .leitstand-legende { font-size: 1rem; }

/* ==========================================================================
   Breite Flaechen: der Querlauf am Fensterrand
   (Leitstand-Tafel, Ablaufbild)

   Bis 2026-09-22 sass die waagerechte Bildlaufleiste am unteren Rand der
   Tafel — bei acht Auftraegen weit unter dem Fenster. Wer nach rechts
   wollte, musste erst ans Ende scrollen, dann seitlich, dann zurueck.

   Jetzt endet die Flaeche am Fensterrand: `max-height` begrenzt sie, und
   beide Bildlaufleisten liegen innen, also immer im Bild. Die Hoehe misst
   app.js (`--fensterhoch`), weil sie davon abhaengt, wie viel ueber der
   Flaeche steht — Filterleiste, Seitenkopf, Hinweise. Der Rueckfallwert
   gilt, solange das Skript nicht gelaufen ist.

   Nebenbei klebt damit der Spaltenkopf des Leitstands (`position: sticky`
   an den `th`): Er hatte bisher nichts, woran er kleben konnte, weil der
   Kasten nur quer scrollte.

   ERST AB 992 PIXEL, wie der klebende Seitenkopf. Darunter wischt man
   ohnehin quer, wo man steht, und ein Scrollbereich in der Seite waere auf
   dem Handy eine Falle, aus der der Daumen nicht mehr herausfindet.
   ========================================================================== */
@media (min-width: 992px) {
    [data-fensterhoch] {
        overflow: auto;
        max-height: var(--fensterhoch, calc(100vh - var(--dva-listenkopf, var(--dva-topbar-height)) - 3rem));
    }
}

/* Der Rueckgabe-Knopf in der Statusschiene: erkennbar, aber nicht so laut
   wie „Weiter". Vorwaerts ist der Normalfall (Stufe 3). */
.schiene-rueck {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--dva-warning); color: var(--dva-warning);
    background: transparent; border-radius: 99px;
    padding: .2rem .7rem; font-size: .85rem; white-space: nowrap;
}
.schiene-rueck:hover { background: var(--dva-warning); color: var(--dva-card-bg); }

/* ==========================================================================
   Der Ablaufbaum (docs/Konzept-Ablaufbaum.md, Teil 1)

   Eine eingerueckte Liste, kein Diagramm: Der Ablauf IST hierarchisch, und
   eine Liste bleibt auf dem Telefon bedienbar, mit der Tastatur erreichbar
   und druckbar. Das Auf- und Zuklappen macht <details> selbst — ohne
   JavaScript bleibt der Baum eine benutzbare Liste von Verweisen.
   ========================================================================== */
.ablaufbaum { font-size: .875rem; }
.ablaufbaum .baum-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .25rem .25rem .5rem; border-bottom: 1px solid var(--dva-border); margin-bottom: .35rem;
}
.ablaufbaum .baum-werkzeuge { display: flex; gap: .6rem; color: var(--dva-text-muted); }
.ablaufbaum .baum-werkzeuge .btn-link { color: var(--dva-text-muted); text-decoration: none; }
.ablaufbaum .baum-werkzeuge .btn-link:hover { color: var(--dva-primary); }

.ablaufbaum .baum-liste { list-style: none; margin: 0; padding-left: 0; }
/* Die Einrueckung traegt eine Leitlinie — bei sechs Schritten sieht man
   sonst nicht mehr, welche Stufe zu welchem Schritt gehoert. */
.ablaufbaum .baum-liste .baum-liste {
    padding-left: .85rem; margin-left: .45rem; border-left: 1px solid var(--dva-border);
}
.ablaufbaum .baum-ast { margin: 0; }
.ablaufbaum .baum-knoten > summary { list-style: none; cursor: pointer; }
.ablaufbaum .baum-knoten > summary::-webkit-details-marker { display: none; }
/* Eigenes Dreieck: Der Systempfeil sitzt je nach Browser woanders und
   dreht sich nicht ueberall mit. */
.ablaufbaum .baum-knoten > summary::before {
    content: ""; display: inline-block; width: 0; height: 0; margin-right: .35rem;
    border-left: .34rem solid currentColor; border-top: .26rem solid transparent;
    border-bottom: .26rem solid transparent; opacity: .55; transition: transform .12s ease;
}
.ablaufbaum .baum-knoten[open] > summary::before { transform: rotate(90deg); }

.ablaufbaum .baum-zeile {
    display: flex; align-items: baseline; gap: .4rem; flex-wrap: nowrap;
    padding: .18rem .35rem; border-radius: .25rem;
}
/* Titel, Marken und Zusatz umbrechen INNERHALB der Textspalte — sonst
   faellt „2 Bedingungen · 1 Rueckweg" in der schmalen Spalte an den linken
   Rand und sieht aus, als gehoere es zum Baum statt zur Stufe. */
.ablaufbaum .baum-text {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; min-width: 0;
}
.ablaufbaum .baum-zeile--blatt { padding-left: 1.05rem; }
.ablaufbaum .baum-zeile:hover { background: var(--dva-table-hover-bg); }
.ablaufbaum .baum-zeile.ist-aktiv { background: var(--dva-primary-light); }
.ablaufbaum .baum-symbol { color: var(--dva-text-muted); font-size: .8rem; }
.ablaufbaum .baum-nummer {
    color: var(--dva-text-muted); font-variant-numeric: tabular-nums;
    font-size: .78rem; min-width: 1.1rem;
}
.ablaufbaum .baum-titel { color: var(--dva-text); text-decoration: none; }
.ablaufbaum .baum-titel:hover { color: var(--dva-primary); text-decoration: underline; }
.ablaufbaum .baum-zusatz { color: var(--dva-text-muted); font-size: .78rem; }
.ablaufbaum .baum-marke {
    font-size: .7rem; padding: .05rem .4rem; border-radius: 99px;
    border: 1px solid var(--dva-border); color: var(--dva-text-muted); white-space: nowrap;
}
/* Die Stufe ist die Zeile, um die es geht — die Anhaenge daran sind leiser. */
.ablaufbaum .baum-ast--stufe > .baum-knoten > summary .baum-titel,
.ablaufbaum .baum-ast--schritt > .baum-knoten > summary .baum-titel { font-weight: 600; }
.ablaufbaum .baum-ast--sammel > .baum-knoten > summary .baum-titel {
    text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; color: var(--dva-text-muted);
}
.ablaufbaum .baum-ast--rueckweg .baum-symbol { color: var(--dva-warning); }
.ablaufbaum .baum-ast--folge .baum-symbol { color: var(--dva-primary); }

/* --- Die einblendbare Spalte ------------------------------------------- */
.baum-spalte {
    position: fixed; top: var(--dva-topbar-height); right: 0; bottom: 0; width: 360px;
    z-index: 1030; display: flex; background: var(--dva-card-bg);
    border-left: 1px solid var(--dva-border); box-shadow: -.4rem 0 1.2rem rgba(0,0,0,.08);
}
.baum-spalte[hidden] { display: none; }
.baum-spalte-inhalt { flex: 1 1 auto; overflow: auto; padding: .75rem .9rem 2rem; }
.baum-spalte-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem;
}
/* Solange die Spalte steht, rueckt der Inhalt nach — sie legt sich nicht
   ueber die Maske, an der gerade gearbeitet wird. Die Breite meldet das
   Skript als Variable; ohne sie gilt der Ausgangswert. */
@media (min-width: 992px) {
    body.hat-baumspalte .app-content { padding-right: var(--baum-breite, 360px); }
}
.baum-griff { flex: 0 0 6px; cursor: col-resize; background: transparent; }
.baum-griff:hover, body.baum-zieht .baum-griff { background: var(--dva-primary-light); }
body.baum-zieht { user-select: none; cursor: col-resize; }

/* Unter 992 Pixel liegt die Spalte ueber der Seite statt daneben — eine
   360 Pixel breite Spalte neben einem 400 Pixel breiten Fenster waere
   keine Hilfe, sondern eine Verdeckung. */
@media (max-width: 991.98px) {
    .baum-spalte { width: 100% !important; top: auto; height: 70vh; }
    .baum-griff { display: none; }
}

/* Gedruckt wird der Baum ohne Bedienelemente, alles sichtbar. */
@media print {
    .ablaufbaum .baum-werkzeuge { display: none; }
    .ablaufbaum .baum-knoten > summary::before { display: none; }
    .ablaufbaum .baum-zeile { padding: .05rem 0; }
}

/* --- Der Pruefblick: Befunde am Knoten (Konzept-Ablaufbaum, Teil 2) ------
   Ein Befund ist keine Einrichtung, sondern eine Anmerkung dazu. Er sitzt
   deshalb ausserhalb des <details> und bleibt sichtbar, auch wenn der Knoten
   zugeklappt ist — was zu melden ist, soll nicht hinter einem Dreieck liegen. */
.ablaufbaum .baum-befund {
    display: flex; align-items: baseline; gap: .4rem;
    margin: .1rem 0 .25rem 1.05rem; padding: .25rem .5rem;
    border-left: 3px solid currentColor; border-radius: .2rem;
    font-size: .78rem; line-height: 1.35;
}
.ablaufbaum .baum-befund i { flex: 0 0 auto; }
.ablaufbaum .baum-befund span:last-child { color: var(--dva-text); }
.ablaufbaum .baum-befund--fehler  { color: var(--dva-danger,  #dc2626); background: rgba(220, 38, 38, .07); }
.ablaufbaum .baum-befund--warnung { color: var(--dva-warning, #d97706); background: rgba(217, 119, 6, .08); }
.ablaufbaum .baum-befund--hinweis { color: var(--dva-text-muted); background: var(--dva-table-header-bg); }
/* Befunde des ganzen Typs stehen oben, vor dem ersten Knoten. */
.ablaufbaum > .baum-befund { margin-left: 0; }

.ablaufbaum .baum-zaehler { display: inline-flex; gap: .45rem; align-items: center; }
.ablaufbaum .baum-zaehler-teil {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .75rem; font-variant-numeric: tabular-nums;
}
.ablaufbaum .baum-zaehler--fehler  { color: var(--dva-danger,  #dc2626); }
.ablaufbaum .baum-zaehler--warnung { color: var(--dva-warning, #d97706); }
.ablaufbaum .baum-zaehler--hinweis { color: var(--dva-text-muted); }
.ablaufbaum .baum-zaehler--gut     { color: var(--dva-success, #16a34a); }

/* --- Suche, eigenes Fenster, Druckbild (Konzept-Ablaufbaum, Teil 3) ----- */
.ablaufbaum .baum-suche {
    display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem;
}
.ablaufbaum .baum-suche > i { color: var(--dva-text-muted); font-size: .8rem; }
.ablaufbaum .baum-suche input { font-size: .8rem; }
.ablaufbaum .baum-suche-stand {
    font-size: .72rem; color: var(--dva-text-muted); white-space: nowrap;
}
/* Kurz aufleuchten, wenn das Fenster sich nach einem Speichern erneuert hat —
   sonst weiss niemand, ob er den alten oder den neuen Stand vor sich hat. */
.ablaufbaum.ist-aufgefrischt { animation: baum-aufgefrischt 1.2s ease-out; }
@keyframes baum-aufgefrischt {
    from { background: var(--dva-primary-light); }
    to   { background: transparent; }
}

/* Das abgetrennte Fenster zeigt nur den Baum: Seitenleiste und Kopfzeile
   waeren dort dreimal so breit wie der Inhalt. Gesetzt wird die Klasse vom
   Skript — das Fenster entsteht ohnehin nur ueber window.open. */
body.ist-baumfenster .app-sidebar,
body.ist-baumfenster .app-topbar,
body.ist-baumfenster .app-mobile-nav,
body.ist-baumfenster .page-header .btn,
body.ist-baumfenster .sidebar-overlay { display: none !important; }
body.ist-baumfenster .app-main { margin-left: 0 !important; }
body.ist-baumfenster .app-content { padding: .75rem !important; }
body.ist-baumfenster .page-header h1 { font-size: 1.05rem; }

@media print {
    .ablaufbaum .baum-suche { display: none; }
    /* Sicherheitsnetz zum Skript (beforeprint klappt alles auf): Waere ein
       Knoten doch zu, fehlten auf dem Papier Zeilen, ohne dass es auffaellt. */
    .ablaufbaum details.baum-knoten > ul { display: block !important; }
    .ablaufbaum .baum-befund { break-inside: avoid; }
    .ablaufbaum .baum-ast { break-inside: avoid; }
}

/* --- Stufen ziehen und anhaengen (Konzept-Ablaufbaum, Teil 4) ----------- */
.ablaufbaum li[draggable="true"] > .baum-knoten > summary,
.ablaufbaum li[draggable="true"] > .baum-zeile { cursor: grab; }
.ablaufbaum li.ist-am-ziehen { opacity: .45; }
.ablaufbaum li.ist-ziel > .baum-knoten > summary,
.ablaufbaum li.ist-ziel > .baum-zeile {
    outline: 2px dashed var(--dva-primary); outline-offset: -2px;
}
/* Ein Link ist von sich aus ziehbar — hier soll die ganze Zeile wandern.
   Das Skript setzt zusaetzlich draggable=false; diese Regel ist die
   Vorsichtsmassnahme fuer den Fall, dass es nicht gelaufen ist. */
.ablaufbaum li[draggable="true"] .baum-titel { -webkit-user-drag: none; }

.ablaufbaum .baum-anfuegen { margin: .1rem 0 .3rem 1.05rem; }
.ablaufbaum .baum-anfuegen > summary {
    list-style: none; cursor: pointer; font-size: .75rem;
    color: var(--dva-text-muted); padding: .15rem .35rem; border-radius: .2rem;
    display: inline-flex; align-items: center; gap: .3rem;
}
.ablaufbaum .baum-anfuegen > summary::-webkit-details-marker { display: none; }
.ablaufbaum .baum-anfuegen > summary:hover { color: var(--dva-primary); background: var(--dva-table-hover-bg); }
.ablaufbaum .baum-anfuegen-form {
    display: flex; gap: .35rem; align-items: center; margin: .3rem 0 0 .35rem;
}
.ablaufbaum .baum-anfuegen-form input[type="text"] { max-width: 15rem; font-size: .8rem; }
@media print { .ablaufbaum .baum-anfuegen { display: none; } }

/* Stand des selbsttaetigen Sicherns im Notizbuch. Eigene Klassen statt
   .text-muted/.text-success: die Bootstrap-Festwerte tragen die dunklen
   Themes nicht mit (siehe .ticket-msg-fehler). */
.note-auto-stand {
    margin-left: .6rem;
    font-size: .8125rem;
    color: var(--dva-text-muted, #64748b);
}

.note-auto-stand.ist-gut::before {
    content: "\2713\00a0";
}

.note-auto-stand.ist-schlecht {
    padding: .1rem .4rem;
    border-radius: .25rem;
    border: 1px solid rgba(220, 53, 69, .35);
    background: rgba(220, 53, 69, .1);
}

/* Abhakliste aus dem Notizbuch — auch dort sichtbar, wo Quill nicht
   geladen ist. Notizen erscheinen an Vorgang, Firma, Auftrag, Geraet,
   Vertrag und Ticket; Quills eigenes Stilblatt liegt aber nur im
   Notizbuch-Reiter. Ohne diese Regeln stuenden die Haken dort als nackte
   Aufzaehlung ohne Kaestchen. */
li[data-list="checked"],
li[data-list="unchecked"] {
    list-style: none;
    position: relative;
    padding-left: 1.6em;
}

li[data-list="checked"]::before,
li[data-list="unchecked"]::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2em;
    text-align: center;
    font-size: 1em;
    line-height: inherit;
}

li[data-list="unchecked"]::before {
    content: "\2610";                 /* leeres Kaestchen */
    color: var(--dva-text-muted, #64748b);
}

li[data-list="checked"]::before {
    content: "\2611";                 /* Kaestchen mit Haken */
    color: var(--dva-primary, #2563eb);
}

/* Erledigtes leise stellen — der Blick soll auf dem Offenen haengen
   bleiben. Bewusst KEIN Durchstreichen: bei mehrzeiligen Punkten wird
   das schnell unleserlich. */
li[data-list="checked"] {
    color: var(--dva-text-muted, #64748b);
}

/* Anhaenge an einer Aktivitaet. Bildschirmfotos als Vorschau, alles
   andere als Verweis — bei einem Screenshot ist das Bild die Aussage. */
.aktivitaet-anhaenge {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-start;
}

.aktivitaet-bild img {
    max-height: 160px;
    max-width: 100%;
    border-radius: .375rem;
    border: 1px solid var(--dva-border, #e2e8f0);
    display: block;
}

.aktivitaet-datei {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    border-radius: .375rem;
    border: 1px solid var(--dva-border, #e2e8f0);
    font-size: .8125rem;
    text-decoration: none;
    color: inherit;
}

.aktivitaet-datei-groesse {
    margin-left: .35rem;
    color: var(--dva-text-muted, #64748b);
}

/* Posteingang: Typ am Treffer und an der Marke. Eine Firma muss sich vom
   gleichnamigen Vorgang unterscheiden lassen — „Meier GmbH" kann beides
   sein. Eigene Klassen statt .text-muted wegen der dunklen Themes. */
.ef-ptyp {
    margin-left: auto;
    padding-left: .5rem;
    font-size: .6875rem;
    color: var(--dva-text-muted, #64748b);
    white-space: nowrap;
}

.ef-marke.ist-firma {
    border-color: rgba(13, 110, 253, .35);
    background: rgba(13, 110, 253, .08);
}

/* ==========================================================================
   Posteingang: der Rueckweg nach einer Zuordnung

   Eine Leiste am unteren Rand mit genau einem Angebot — „Rueckgaengig".
   Sie steht dunkel in beiden Farbschemata: Sie ist kein Teil der Liste,
   sondern eine Meldung ueber etwas, das gerade geschehen ist.

   Unterhalb der Bootstrap-Dialoge (1055), damit ein geoeffneter Dialog sie
   verdeckt statt umgekehrt — sichtbar wird sie ohnehin erst, wenn der
   Ansprechpartner-Dialog zu ist.
   ========================================================================== */
.posteingang-rueckweg {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 1045;
    display: flex;
    align-items: center;
    max-width: calc(100vw - 2rem);
    padding: .6rem .85rem;
    border-radius: .5rem;
    background: #212529;
    color: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
    font-size: .9rem;
}

/* `d-none` muss gewinnen: Die Leiste wird ueber die Klasse geschaltet. */
.posteingang-rueckweg.d-none { display: none; }

@media (max-width: 575.98px) {
    .posteingang-rueckweg {
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        transform: none;
        max-width: none;
    }
}

/* ==========================================================================
   Adresserfassung aus einer E-Mail

   Die Maske (inc/views/emails/_adressdialog.php) wird an zwei Stellen
   benutzt und hat deshalb ihre eigene Schicht statt Formatierung im Skript.
   Alle Farben kommen aus den Themenvariablen: Feste Werte wie `text-muted`
   oder `#fff` verschwinden im dunklen Schema oder leuchten darin — hier
   stuende beides mitten in der Entscheidung, welcher Wert in die
   Stammdaten wandert.
   ========================================================================== */

/* ---- Schrittanzeige -------------------------------------------------- */
.adr-schritte {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
    font-size: .8rem;
    color: var(--dva-text-muted);
}
.adr-punkt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--dva-border);
    border-radius: 50%;
    font-size: .7rem;
    margin-right: .25rem;
}
.adr-schritt.adr-jetzt { color: var(--dva-text); font-weight: 600; }
.adr-schritt.adr-jetzt .adr-punkt {
    background: var(--dva-primary);
    border-color: var(--dva-primary);
    color: #fff;
}
.adr-schritt.adr-erledigt .adr-punkt {
    background: var(--dva-success);
    border-color: var(--dva-success);
    color: #fff;
}
.adr-pfeil { font-size: .75rem; opacity: .6; }

/* ---- Zwei Spalten: Arbeit links, Original rechts --------------------- */
/* Trefferliste im dritten Schritt: begrenzt, damit der Dialog nicht
   mitwaechst und der Ausgang unten sichtbar bleibt. */
.adr-vorgang-treffer {
    max-height: 15rem;
    overflow-y: auto;
}

.adr-spalten { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
    /* Nur am Rechner zweispaltig: Auf dem Telefon waere die Signatur neben
       den Feldern 150 Pixel breit und damit unlesbar. Dort steht sie
       darunter — sichtbar bleibt sie in jedem Fall. */
    .adr-spalten { grid-template-columns: 1fr 17rem; }
}
.adr-signatur {
    background: var(--dva-table-hover-bg);
    border: 1px solid var(--dva-border);
    border-radius: .5rem;
    padding: .7rem;
    align-self: start;
}
.adr-signatur-titel {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dva-text-muted);
    margin-bottom: .4rem;
}
.adr-signatur-text {
    font-size: .78rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    color: var(--dva-text);
    font-family: inherit;
}

/* ---- Bloecke --------------------------------------------------------- */
.adr-block {
    border: 1px solid var(--dva-border);
    border-radius: .55rem;
    padding: .8rem;
    margin-bottom: .7rem;
    background: var(--dva-card-bg);
}
.adr-block-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
}
.adr-firmazeile {
    font-size: .8rem;
    color: var(--dva-text-muted);
    margin-bottom: .5rem;
}
.adr-cb { margin: 0; }

/* ---- Felder ---------------------------------------------------------- */
.adr-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .55rem;
}
.adr-feld.adr-breit { grid-column: 1 / -1; }
.adr-quelle {
    font-size: .68rem;
    margin-top: .15rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.adr-q-signatur { color: var(--dva-success); }
.adr-q-geraten  { color: var(--dva-warning); }
.adr-q-stamm    { color: var(--dva-text-muted); }
.adr-aus-signatur input { border-color: var(--dva-success); }
.adr-q-ki       { color: var(--dva-ai); }
.adr-aus-ki input       { border-color: var(--dva-ai); }
.adr-aus-geraten input  { border-color: var(--dva-warning); }

/* ---- Firmenwahl ------------------------------------------------------ */
.adr-wahl { display: flex; flex-direction: column; gap: .35rem; }
.adr-wahl-zeile {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    border: 1px solid var(--dva-border);
    border-radius: .45rem;
    padding: .5rem .65rem;
    cursor: pointer;
    font-size: .85rem;
}
.adr-wahl-zeile:hover { background: var(--dva-table-hover-bg); }
.adr-wahl-zeile.adr-gewaehlt {
    border-color: var(--dva-primary);
    background: rgba(var(--dva-primary-rgb), .07);
}
.adr-wahl-zeile small { display: block; color: var(--dva-text-muted); font-size: .73rem; }
.adr-wahl-suche { margin-top: .5rem; }
.adr-treffer {
    border: 1px solid var(--dva-border);
    border-radius: .45rem;
    margin-top: .35rem;
    overflow: hidden;
}
.adr-treffer:empty { border: none; }
.adr-treffer-zeile {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--dva-border);
    background: transparent;
    color: var(--dva-text);
    padding: .4rem .65rem;
    font-size: .82rem;
    cursor: pointer;
}
.adr-treffer-zeile:last-child { border-bottom: none; }
.adr-treffer-zeile:hover,
.adr-treffer-zeile.adr-gewaehlt { background: var(--dva-table-hover-bg); }
.adr-treffer-zeile small { display: block; color: var(--dva-text-muted); font-size: .72rem; }

/* ---- Abgleich (was die Signatur nachtraegt) -------------------------- */
.adr-abgleich { display: flex; flex-direction: column; gap: .25rem; }
.adr-abgleich-zeile {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .35rem .15rem;
    border-bottom: 1px dashed var(--dva-border);
    font-size: .82rem;
    cursor: pointer;
}
.adr-abgleich-zeile:last-child { border-bottom: none; }
.adr-abgleich-bez {
    color: var(--dva-text-muted);
    font-size: .76rem;
    min-width: 5.5rem;
}
.adr-abgleich-neu { font-weight: 500; }
.adr-abgleich-alt { color: var(--dva-text-muted); font-size: .75rem; }

/* ---- Marken ---------------------------------------------------------- */
.adr-marke-neu,
.adr-marke-da,
.adr-marke-ab {
    font-weight: 500;
    font-size: .68rem;
    border: 1px solid;
    background: transparent;
}
.adr-marke-neu { color: var(--dva-warning); border-color: var(--dva-warning); }
.adr-marke-da  { color: var(--dva-success); border-color: var(--dva-success); }
.adr-marke-ab  { color: var(--dva-danger);  border-color: var(--dva-danger); }

/* ---- Adresserfassung: die Folge der Personen (Variante B) ------------- */
.adr-folge {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    font-size: .78rem;
}
.adr-folge-punkt {
    border: 1px solid var(--dva-border);
    border-radius: 1rem;
    padding: .15rem .6rem;
    color: var(--dva-text-muted);
    white-space: nowrap;
}
.adr-folge-punkt.adr-jetzt {
    border-color: var(--dva-primary);
    background: rgba(var(--dva-primary-rgb), .09);
    color: var(--dva-text);
    font-weight: 600;
}
.adr-folge-punkt.adr-fertig { color: var(--dva-success); border-color: var(--dva-success); }

/* ---- Beteiligte in Kopie --------------------------------------------- */
.adr-kopie { margin-top: .6rem; }
.adr-kopie > summary {
    font-size: .8rem;
    color: var(--dva-text-muted);
    cursor: pointer;
}
.adr-kopie-zeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .4rem .55rem;
    border: 1px solid var(--dva-border);
    border-radius: .45rem;
    margin-bottom: .3rem;
    font-size: .83rem;
}
.adr-kopie-zeile .btn { margin-left: auto; }

/* ---- Gegenueberstellung Signatur / Stamm (Variante D) ---------------- */
.adr-abgleich-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .15rem .25rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dva-text-muted);
}
.adr-abgleich-kopf .adr-abgleich-bez { min-width: 5.5rem; }
/* Der Platz des Kaestchens muss in der Kopfzeile mitlaufen, sonst stehen
   die Spaltentitel um eine Kaestchenbreite versetzt ueber ihren Werten. */
.adr-abgleich-kopf::before {
    content: '';
    width: 1rem;
    flex: 0 0 1rem;
}
.adr-abgleich-neu { flex: 1 1 9rem; min-width: 0; word-break: break-word; }
.adr-abgleich-alt { flex: 1 1 9rem; min-width: 0; word-break: break-word; }
.adr-abgleich-haken { width: 1rem; flex: 0 0 1rem; text-align: center; }

.adr-abgleich-zeile.adr-z-abweichung { background: rgba(220, 53, 69, .05); }
.adr-abgleich-zeile.adr-z-gleich { opacity: .65; }
.adr-abgleich-zeile.adr-z-gleich .adr-abgleich-neu { font-weight: 400; }

.adr-sammel {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .55rem;
}

/* ------------------------------------------------------------------
   Mitgeltende Unterlage — Leseansicht
   (inc/views/qm/dokumente/lesen.php)

   Der Inhalt einer Dokumentfassung ist frei geschriebenes HTML: Ueber-
   schriften, Listen, Tabellen (der Editor nennt genau diese). Ohne diese
   Schicht steht eine Matrix dort als Tabelle ohne Rahmen und ohne Abstand —
   lesbar nur fuer den, der sie geschrieben hat.

   Zwei bewusste Entscheidungen:
   - Alles unter `.qm-unterlage-inhalt` eingehaengt. Eine globale Regel fuer
     `table` oder `ul` greift sonst in Listen und Scrollkaesten hinein, die
     niemand angefasst hat.
   - Farben ueber die Themenvariablen DIESER Anwendung (`--dva-*`), nicht
     ueber `--bs-*`. Die Themes hier definieren `--dva-card-bg`, `--dva-border`
     und `--dva-text` neu, die Bootstrap-Variablen aber NICHT: `--bs-tertiary-bg`
     blieb im Cockpit-Theme nahezu weiss, und der Streifen stand als helles Band
     in einer dunklen Seite. Ein Festwert waere derselbe Fehler, nur offener.
   ------------------------------------------------------------------ */
.qm-unterlage-inhalt > :first-child { margin-top: 0; }
.qm-unterlage-inhalt > :last-child { margin-bottom: 0; }
.qm-unterlage-inhalt h1,
.qm-unterlage-inhalt h2,
.qm-unterlage-inhalt h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.25rem 0 .5rem;
}
.qm-unterlage-inhalt ul,
.qm-unterlage-inhalt ol { padding-left: 1.3rem; }
.qm-unterlage-inhalt table {
    width: 100%;
    margin: .75rem 0;
    border-collapse: collapse;
}
.qm-unterlage-inhalt th,
.qm-unterlage-inhalt td {
    border: 1px solid var(--dva-border);
    padding: .35rem .5rem;
    text-align: left;
    vertical-align: top;
}
.qm-unterlage-inhalt th {
    font-weight: 600;
    background: var(--dva-table-header-bg, var(--dva-card-bg));
    color: var(--dva-text);
}
.qm-unterlage-inhalt img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------
   Mitgeltende Unterlagen, kompakte Fassung
   (Reiter „Aufgaben" und „Dateien", inc/views/_partials/_qm-dokumente.php)

   Eine Zeile statt eines Abschnitts. Auf einem Arbeitsreiter ist die
   Unterlage Beiwerk: greifbar, aber ohne die Liste wegzudruecken, um die es
   dort geht. Farben ueber Bootstrap-Variablen, damit Dunkel und Cockpit
   tragen.
   ------------------------------------------------------------------ */
.qm-unterlagen-kompakt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .9rem;
    padding: .45rem .7rem;
    border: 1px solid var(--dva-border);
    border-radius: .4rem;
    background: var(--dva-card-bg);
    color: var(--dva-text);
    font-size: .875rem;
}
.qm-unterlagen-kompakt .qm-kompakt-marke {
    font-weight: 600;
    color: var(--dva-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
}
.qm-unterlagen-kompakt .qm-kompakt-zeile { min-width: 0; }
.qm-unterlagen-kompakt code { font-size: .8rem; }
/* Die Knoepfe sitzen in einer Zeile mit Text — sie duerfen sie nicht
   auseinanderziehen. */
.qm-unterlagen-kompakt .btn-sm {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .78rem;
}

/* =====================================================================
   NOTIZBUCH: EBENEN-KNOEPFE UND DIE SEITE, DIE GERADE ENTSTEHT
   (14.10.2026)

   Die Ebene einer Seite liess sich bis dahin nur durch Ziehen aendern —
   waagerecht, mit einem Griff, der erst beim Ueberfahren erscheint. Das
   war nicht zu erraten. Jetzt stehen zwei Pfeile daneben, und sie liegen
   UEBER dem Zeilenende statt in ihm: In einer 200 px schmalen Spalte
   kostet jeder dauerhaft sichtbare Knopf Titelbreite.
   ===================================================================== */

.notiz-zeilen-tat {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 1px;
    opacity: 0;
    background: var(--dva-card-bg);
    border-radius: 6px;
    padding: 1px;
}
.notebook-page-item:hover .notiz-zeilen-tat,
.notiz-zeilen-tat:focus-within { opacity: 1; }
.notebook-page-item.active .notiz-zeilen-tat { background: var(--dva-primary); }

.notiz-ebene,
.notiz-zeilen-tat .notiz-unterseite {
    position: static;
    opacity: 1;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 5px;
    color: var(--dva-text-muted);
    font-size: 0.75rem;
    padding: 0;
    text-decoration: none;
}
.notiz-ebene:hover,
.notiz-zeilen-tat .notiz-unterseite:hover {
    background: var(--dva-table-hover-bg, rgba(0,0,0,.08));
    color: var(--dva-primary);
}
.notebook-page-item.active .notiz-ebene,
.notebook-page-item.active .notiz-zeilen-tat .notiz-unterseite { color: #fff; }
.notebook-page-item.active .notiz-ebene:hover,
.notebook-page-item.active .notiz-zeilen-tat .notiz-unterseite:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* Die Seite, die gerade geschrieben wird: schon in der Liste, aber noch
   ohne Kennung — gestrichelt, damit der Unterschied zu den abgelegten
   Seiten zu sehen ist. */
.notebook-page-item.notiz-neu {
    outline: 1px dashed rgba(255,255,255,.55);
    outline-offset: -3px;
}

/* ==========================================================================
   Adresserfassung — der Block „Einordnung" im Firmenschritt
   ==========================================================================

   Steht am DATEIENDE, und zwar mit Absicht: Eine Ueberformschicht, die
   weiter oben steht, wird von jedem spaeteren Abschnitt still ueberschrieben.

   Alle Farben ueber die Theme-Variablen. Feste Bootstrap-Klassen wie
   `.text-muted` machen in Dunkel und Cockpit ganze Saetze unsichtbar — hier
   stuende sonst eine Rolle auf dunklem Grund in Dunkelgrau. */
.adr-einordnung {
    border: 1px solid var(--dva-border);
    border-radius: .5rem;
    background: var(--dva-card-bg);
}
.adr-einordnung > summary {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .5rem .75rem;
    cursor: pointer;
    color: var(--dva-text);
    font-size: .875rem;
}
.adr-einordnung > summary::marker { color: var(--dva-text-muted); }
.adr-einordnung-titel { font-weight: 600; }
/* Die Zusammenfassung sagt im zugeklappten Zustand, was drinsteht. Ein
   zugeklappter Block, der seinen Inhalt verschweigt, wird einmal uebersehen
   und danach nie wieder geoeffnet. */
.adr-einordnung-kurz {
    color: var(--dva-text-muted);
    font-size: .8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adr-einordnung[open] > summary { border-bottom: 1px solid var(--dva-border); }
.adr-einordnung-inhalt {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    padding: .75rem;
}
.adr-einordnung-feld { flex: 1 1 14rem; min-width: 0; }

/* Die Rollen als Flaeche, nicht als Kaestchenreihe (Variante G: Flaeche statt
   Rahmen). Angehakt wird die Flaeche eingefaerbt — am Telefon ist das der
   Unterschied zwischen treffen und danebentippen. */
.adr-rollen { display: flex; flex-wrap: wrap; gap: .35rem; }
.adr-rolle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--dva-bg);
    color: var(--dva-text);
    border: 1px solid var(--dva-border);
    font-size: .82rem;
    cursor: pointer;
    user-select: none;
}
.adr-rolle input { margin: 0; }
.adr-rolle-an {
    background: rgba(var(--dva-primary-rgb), .12);
    border-color: var(--dva-primary);
    color: var(--dva-primary-dark);
    font-weight: 600;
}

/* Am Telefon untereinander statt nebeneinander — zwei halbe Spalten sind
   dort zwei zu schmale Spalten. */
@media (max-width: 575.98px) {
    .adr-einordnung-inhalt { flex-direction: column; gap: .75rem; }
    .adr-einordnung-feld { flex: 1 1 auto; }
}

/* Die KI-Einschaetzung im Block „Einordnung" — sie klappt nach, wenn sie da
   ist, und bekommt deshalb eine eigene Flaeche statt einer weiteren Spalte. */
.adr-einschaetzung { flex: 1 1 100%; min-width: 0; }
.adr-einschaetzung-lauf {
    display: flex;
    align-items: center;
    padding: .4rem .1rem;
    color: var(--dva-text-muted);
    font-size: .82rem;
}
.adr-einschaetzung-kasten {
    border: 1px solid var(--dva-ai-border, var(--dva-border));
    border-radius: .45rem;
    background: var(--dva-ai-bg, var(--dva-bg));
    padding: .6rem .7rem;
}
.adr-einschaetzung-kopf {
    color: var(--dva-ai, var(--dva-text));
    font-size: .82rem;
    margin-bottom: .45rem;
}
.adr-einschaetzung-zeile {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .3rem 0;
    color: var(--dva-text);
    font-size: .84rem;
    cursor: pointer;
}
.adr-einschaetzung-zeile + .adr-einschaetzung-zeile {
    border-top: 1px solid var(--dva-border);
}
.adr-einschaetzung-zeile input { margin-top: .2rem; flex: 0 0 auto; }
.adr-kompetenzen { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.adr-kompetenz {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--dva-badge-outline-bg, var(--dva-bg));
    border: 1px solid var(--dva-border);
    color: var(--dva-text);
    font-size: .76rem;
}
/* Der Beleg: welche Adresse wann gelesen wurde. Leise, aber da — eine
   KI-Aussage ohne Quelle ist eine Behauptung. */
.adr-einschaetzung-quellen {
    margin-top: .5rem;
    padding-top: .4rem;
    border-top: 1px solid var(--dva-border);
    color: var(--dva-text-muted);
    font-size: .74rem;
    word-break: break-all;
}

/* =====================================================================
   Die kurze Sperre nach dem Nachruecken
   ---------------------------------------------------------------------
   Eine halbe Sekunde, in der die grossen Flaechen der neu aufgeklappten
   Karte nichts annehmen. Das ist keine Schoenheit, sondern die Antwort auf
   einen Vorfall vom 07.10.2026: Ein Nachklapper-Klick traf die nachgerueckte
   Karte und ordnete eine Mail zu, die niemand gesehen hatte.

   Sichtbar gemacht wird es, weil eine Sperre, die man nicht sieht, wie ein
   Fehler aussieht — wer klickt und nichts geschieht, klickt wieder.
   ===================================================================== */
.ef-mail.ef-frisch .ef-gross {
    opacity: .55;
    cursor: progress;
}

/* =====================================================================
   Der Rückgängig-Knopf in der Rückweg-Leiste
   ---------------------------------------------------------------------
   Er trug `btn-outline-light`: weisse Schrift auf weissem Rand. Auf der
   dunklen Leiste muesste das leuchten — tut es aber nicht, weil die
   Ueberformschicht der Knoepfe (Variante G) aus jedem Umriss eine Flaeche
   macht. Herausgekommen ist Grau auf Grau, und der Anwender meldete am
   07.10.2026 voellig zu Recht: „einen Rückgängig Button gibt es noch immer
   nicht."

   Deshalb bekommt er hier eigene Farben statt einer Bootstrap-Klasse, die
   eine andere Schicht umdeutet. Fest und nicht ueber Token, weil die Leiste
   in jedem Thema dunkel ist: Sie ist eine Einblendung, kein Seitenbereich.
   ===================================================================== */
.posteingang-rueckweg .rueckweg-knopf {
    background: #fff;
    border: 1px solid #fff;
    color: #212529;
    font-weight: 600;
    white-space: nowrap;
}

.posteingang-rueckweg .rueckweg-knopf:hover,
.posteingang-rueckweg .rueckweg-knopf:focus {
    background: #e9ecef;
    border-color: #e9ecef;
    color: #000;
}

.posteingang-rueckweg .rueckweg-knopf:disabled {
    opacity: .6;
}

/* Weggefiltert im Postfach-Stapel: nur verborgen, nicht entfernt — der
   Filter ist ein Blick, keine Handlung. */
.ef-mail.pf-weggefiltert { display: none; }

/* =====================================================================
   NOTIZBUCH: SEITENBAUM, BLATTKOPF, SCHREIBMODUS   (09.10.2026)

   Drei Dinge, die zusammengehoeren und deshalb beieinanderstehen:

     1. Der Seitenbaum — die Seiten koennen Unterseiten tragen.
     2. Der Blattkopf — Schalter fuer die Seitenspalte und der Pfad.
     3. Der Schreibmodus — die Maske verdichtet sich fuer das Schreiben.

   Die Reihenfolge im Markup bleibt flach: Der Baum entsteht aus
   `data-ebene` je Zeile, nicht aus verschachtelten Listen. Das macht das
   Ziehen einfach (eine Liste, eine Reihenfolge) und das Einruecken zu
   einer Rechnung statt zu einer Struktur.
   ===================================================================== */

/* ----- Seitenbaum ---------------------------------------------------- */

/* Je Ebene 18 Pixel. Mehr sah bei drei Ebenen nach Treppe aus, weniger
   liess die Ebenen verschwimmen. Der Wert steht in `--notiz-ebene` an der
   Zeile (0 = oberste Ebene). */
.notizbuch-baum .notebook-page-item {
    padding-left: calc(0.5rem + var(--notiz-ebene, 0) * 18px);
    position: relative;
}

/* Die senkrechte Linie zeigt, wohin eine eingerueckte Zeile gehoert.
   Nur ab Ebene 2 — auf der obersten waere sie ein Rahmen ohne Aussage. */
.notizbuch-baum .notebook-page-item[data-ebene="2"]::before,
.notizbuch-baum .notebook-page-item[data-ebene="3"]::before {
    content: "";
    position: absolute;
    left: calc(0.75rem + (var(--notiz-ebene, 0) - 1) * 18px);
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--dva-border);
}

.notiz-klapp {
    flex: none;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-right: 0.15rem;
    border: 0;
    background: transparent;
    color: var(--dva-text-muted);
    font-size: 0.7rem;
    line-height: 1;
    border-radius: 4px;
}
.notiz-klapp:hover { background: var(--dva-table-hover-bg, rgba(0,0,0,.06)); }
.notiz-klapp i { transition: transform .12s; display: inline-block; }
.notiz-klapp.notiz-klapp-zu i { transform: rotate(-90deg); }
.notiz-klapp-leer { display: inline-block; }
.notebook-page-item.active .notiz-klapp { color: rgba(255,255,255,.8); }
.notebook-page-item.active .notiz-klapp:hover { background: rgba(255,255,255,.18); }

/* „Unterseite anlegen" liegt UEBER der Zeile, nicht in ihr: In einer
   schmalen Spalte kostete der Knopf sonst dauerhaft Titelbreite, obwohl er
   nur beim Ueberfahren zu sehen ist. */
.notiz-unterseite {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--dva-text-muted);
    background: var(--dva-card-bg);
    font-size: 0.75rem;
    opacity: 0;
    text-decoration: none;
}
.notebook-page-item:hover .notiz-unterseite,
.notiz-unterseite:focus-visible { opacity: 1; }
.notiz-unterseite:hover { color: var(--dva-primary); }
.notebook-page-item.active .notiz-unterseite { background: var(--dva-primary); }

/* Der Griff erscheint erst beim Ueberfahren — er ist ein Werkzeug, keine
   Auskunft, und elf davon untereinander sind ein Muster ohne Inhalt. */
.notebook-page-item .note-drag-handle { opacity: 0; transition: opacity .1s; }
.notebook-page-item:hover .note-drag-handle { opacity: 1; }

/* Ein zugeklappter Ast verschwindet wirklich.

   Das Skript verbirgt eine Unterseite mit `item.hidden = true` — und das
   wirkte nicht: Die Zeile traegt `d-flex`, und Bootstraps Utilities setzen
   `display: flex !important`. Das `hidden`-Attribut hat dagegen nur die
   Vorgabe des Browsers; eine globale `[hidden]`-Regel gibt es in dieser
   Datei nicht. Der Pfeil drehte sich also, der Zustand wurde gemerkt, die
   Unterseiten blieben stehen.

   Deshalb hier `!important` — anders als bei `.sub-seit`, `.menue-schublade`
   oder `.baum-spalte` weiter oben, die dieselbe Regel ohne Nachdruck
   brauchen, weil sie keine `display`-Utility tragen. Wer kuenftig eine Zeile
   mit `d-flex` per `hidden` verbirgt, braucht denselben Nachtrag;
   `tests/struktur/NotizbuchKlappenTest.php` erinnert daran. */
.notizbuch-baum .notebook-page-item[hidden] { display: none !important; }

/* Eingeklappte Seitenliste: Das Blatt nimmt die frei gewordene Breite.
   Ohne diese Regel verschwindet die Spalte zwar, aber `col-md-9` behaelt
   seine 75 Prozent — und das Einklappen bringt genau nichts, was sein
   einziger Zweck war. Der Geschwisterselektor trifft die Editorspalte, weil
   sie unmittelbar auf die Liste folgt. */
.notizbuch .notebook-sidebar[hidden] + .col-md-9 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

/* ----- Blattkopf ----------------------------------------------------- */

.notiz-blattkopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    min-height: 32px;
}
.notiz-spalte-schalter { flex: none; }
.notiz-pfad {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--dva-text-muted);
    min-width: 0;
    overflow: hidden;
}
.notiz-pfad i { font-size: 0.6rem; }
.notiz-pfad-stufe { white-space: nowrap; }
.notiz-pfad-hier { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- Blatthoehe ---------------------------------------------------- */

/* Das Blatt waechst mit dem Fenster, statt bei 200 Pixeln stehen zu bleiben.
   Der Abzug ist der Rest der Maske darueber; `max()` haelt eine brauchbare
   Mindesthoehe fuer kleine Fenster.

   Die drei Klassen im Selektor sind kein Zufall: Quill setzt am selben
   Element `.ql-container.ql-snow`, und `.ql-editor-resizable.ql-container.ql-snow`
   weiter oben in dieser Datei gibt ihm `height: 200px`. Eine Regel mit nur
   einer Klasse verliert dagegen — das Blatt blieb 200 Pixel hoch, obwohl die
   Regel „griff". Deshalb hier dieselbe Spezifitaet und `height`, nicht
   `min-height`.

   `resize: vertical` von dort bleibt: Wer die Hoehe selbst zieht, behaelt
   sie — ein Inline-Stil schlaegt jede dieser Regeln. */
.notiz-blatt.ql-container.ql-snow {
    height: max(320px, calc(100vh - 430px));
}

/* ----- Schreibmodus --------------------------------------------------- */

/* Eingeschaltet wird er im Ansichts-Menue der Detailseite; die Klasse setzt
   PHP beim Aufbau (inc/views/layout.php) und assets/js/ansicht.js beim
   Umschalten.

   Am Telefon gilt er nicht: Dort klebt der Kopf ohnehin nicht, die Maske
   ist bereits verdichtet, und eine zweite Verdichtung darueber waere
   ungeprueft. */
@media (min-width: 768px) {
    html.ansicht-schreibmodus .detail-header { padding-top: .5rem; padding-bottom: .5rem; }
    html.ansicht-schreibmodus .detail-header h1 { font-size: 1.15rem; margin-bottom: .15rem; }
    html.ansicht-schreibmodus .detail-meta { font-size: .8rem; gap: .5rem .8rem; }
    html.ansicht-schreibmodus .detail-actions .btn { padding: .25rem .5rem; font-size: .82rem; }

    /* Reiterzeile schmaler — sie bleibt vollstaendig lesbar, nur flacher. */
    html.ansicht-schreibmodus .nav-tabs .nav-link { padding: .35rem .7rem; font-size: .88rem; }

    /* Was der Kopf an Hoehe abgibt, bekommt das Blatt. */
    html.ansicht-schreibmodus .notiz-blatt.ql-container.ql-snow {
        height: max(320px, calc(100vh - 330px));
    }
}

/* =====================================================================
   NOTIZBUCH: TABELLEN   (09.10.2026)

   Die Tabelle ist fuer Quill eine Einbettung (siehe _notizbuch.php). Ihr
   Aussehen kommt deshalb vollstaendig von hier — im gespeicherten HTML
   steht nur das nackte Geruest plus die Zellfarben als Inline-Stil.

   WARUM KEINE KLASSEN AN DER TABELLE

   `inc/HtmlSanitizer.php` erlaubt an keinem Tag ein `class`-Attribut. Jede
   Regel muss also ueber den Elementnamen im Editor greifen, nicht ueber
   eine Klasse am `<table>`.
   ===================================================================== */

.ql-editor table {
    border-collapse: collapse;
    margin: .6rem 0;
    width: auto;
    max-width: 100%;
}

/* Mindestbreite 5rem: Eine frisch eingefuegte, leere Tabelle bestand mit
   3rem nur aus schmalen Schlitzen, in die man kaum hineintraf. */
.ql-editor table td,
.ql-editor table th {
    border: 1px solid var(--dva-border);
    padding: .3rem .5rem;
    min-width: 5rem;
    vertical-align: top;
}

/* Kopfzeile: die erste Zeile als <th> (Schalter „Kopfzeile" in der Leiste).
   Eine Zellfarbe steht als Inline-Stil und gewinnt gegen diesen Grund. */
.ql-editor table th {
    background: var(--dva-table-header-bg, rgba(0, 0, 0, .05));
    font-weight: 600;
    text-align: left;
}

/* Eine Zelle ohne Inhalt muss trotzdem anklickbar sein — sonst kommt man
   an eine leere Tabelle nicht heran. */
.ql-editor table td:empty::after,
.ql-editor table th:empty::after {
    content: "";
    display: inline-block;
    min-height: 1.2em;
}

/* ----- Die Werkzeugleiste an der Zelle -------------------------------- */

.notiz-tabellen-leiste {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .25rem .35rem;
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: .4rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    max-width: 95vw;
    flex-wrap: wrap;
}

/* Beschriftete Knoepfe statt reiner Sinnbilder: „Plus-Kasten leer" und
   „Plus-Kasten gefuellt" fuer oben/unten verstand niemand, und der Tooltip,
   der es erklaerte, fehlt am Handy ganz. */
.notiz-tabellen-leiste button {
    border: 0;
    background: transparent;
    color: var(--dva-text);
    border-radius: 4px;
    padding: .25rem .4rem;
    line-height: 1.1;
    font-size: .8rem;
    white-space: nowrap;
}
.notiz-tabellen-leiste button:hover { background: var(--dva-table-hover-bg, rgba(0,0,0,.08)); }
.notiz-tabellen-leiste button[aria-pressed="true"],
.notiz-tabellen-leiste button[aria-expanded="true"] {
    background: rgba(var(--dva-primary-rgb, 13, 110, 253), .14);
    color: var(--dva-primary);
}

.notiz-tabellen-leiste .notiz-tabellen-loeschen { color: var(--dva-danger); }
.notiz-tabellen-leiste .notiz-tabellen-loeschen[data-sicher] {
    background: var(--dva-danger);
    color: #fff;
}

/* Die Farbzeile klappt unter den Knoepfen auf und nimmt die ganze Breite. */
.notiz-tabellen-farben {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-top: .2rem;
    padding-top: .3rem;
    border-top: 1px solid var(--dva-border);
}
.notiz-tabellen-farben[hidden] { display: none; }

.notiz-tabellen-hinweis {
    font-size: .78rem;
    color: var(--dva-text-muted);
}

.notiz-tabellen-umfang {
    display: inline-flex;
    border: 1px solid var(--dva-border);
    border-radius: 4px;
    overflow: hidden;
    margin-right: .3rem;
}
.notiz-tabellen-leiste .notiz-tabellen-umfang button {
    border-radius: 0;
    font-size: .76rem;
    padding: .2rem .45rem;
}

/* Rahmen um die aktive Zelle. Ein eigenes Element ueber der Zelle, keine
   Klasse an ihr — die stuende sonst im gespeicherten Inhalt. */
.notiz-tabellen-markierung {
    position: fixed;
    pointer-events: none;
    border: 2px solid var(--dva-primary);
    border-radius: 2px;
    z-index: 9998;
}

/* Das Groessenraster am Tabellenknopf. */
.notiz-tabellen-raster {
    background: var(--dva-card-bg);
    border: 1px solid var(--dva-border);
    border-radius: .4rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    padding: .45rem;
}
.notiz-tabellen-raster-feld {
    display: grid;
    grid-template-columns: repeat(8, 20px);   /* RASTER in _notizbuch.php */
    gap: 3px;
}
.notiz-tabellen-raster-feld button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--dva-border);
    border-radius: 2px;
    background: transparent;
}
.notiz-tabellen-raster-feld button.an {
    background: rgba(var(--dva-primary-rgb, 13, 110, 253), .3);
    border-color: var(--dva-primary);
}
.notiz-tabellen-raster-anzeige {
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--dva-text-muted);
    text-align: center;
}

/* Die Farbtupfer tragen ihre Farbe als Inline-Stil — dieselbe Farbe, die
   sie setzen. Der Rahmen macht helle Toene auf hellem Grund sichtbar. */
.notiz-tabellen-leiste .notiz-farbtupfer {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--dva-border);
    border-radius: 3px;
}
.notiz-tabellen-leiste .notiz-farbtupfer-ohne {
    background: transparent;
    color: var(--dva-text-muted);
    font-size: .7rem;
}

.notiz-tabellen-trenner {
    width: 1px;
    height: 18px;
    background: var(--dva-border);
    margin: 0 .2rem;
}

/* =====================================================================
   SUCHE: HILFE ZUR SYNTAX UND DIE GELESENE EINGABE   (09.10.2026)

   Die Volltextsuche versteht mehrere Begriffe (inc/Suchausdruck.php). Eine
   Syntax, die man nicht sieht, benutzt niemand — deshalb zwei sichtbare
   Teile: der Hilfeblock am Suchen-Knopf und die Zeile ueber den Treffern,
   die zeigt, wie die Eingabe gelesen wurde.
   ===================================================================== */

.suchhilfe-knopf { line-height: 1; }

.suchhilfe {
    margin-top: .75rem;
    padding: .75rem .9rem;
    border: 1px solid var(--dva-border);
    border-radius: var(--dva-card-radius, .5rem);
    background: var(--dva-card-bg);
}
.suchhilfe table { border-collapse: collapse; font-size: .88rem; }
.suchhilfe td { padding: .15rem .8rem .15rem 0; vertical-align: baseline; }
.suchhilfe td:first-child { white-space: nowrap; }
.suchhilfe code {
    background: var(--dva-table-hover-bg, rgba(0,0,0,.05));
    border-radius: 4px;
    padding: .1rem .35rem;
    color: var(--dva-text);
}
.suchhilfe td:last-child { color: var(--dva-text-muted); }
.suchhilfe-fuss {
    margin: .6rem 0 0;
    font-size: .82rem;
    color: var(--dva-text-muted);
    max-width: 80ch;
}

/* Die gelesene Eingabe: die Begriffe als Marken, dazwischen die
   Verknuepfung. Bewusst keine Farbe fuer „und"/„oder" — der Unterschied
   steht als Wort da und muss nicht zusaetzlich gefaerbt werden. */
.such-lesart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .6rem 0 .2rem;
    font-size: .86rem;
    color: var(--dva-text-muted);
}
.such-begriff {
    background: var(--dva-table-hover-bg, rgba(0,0,0,.05));
    border: 1px solid var(--dva-border);
    border-radius: 999px;
    padding: .1rem .55rem;
    color: var(--dva-text);
}
.such-verknuepfung { font-style: italic; }
.such-lesart-text { margin-left: .4rem; }
.such-lesart.ist-hinweis { color: var(--dva-text-muted); }