/* ============================================================
   VeltoCare Flex — Globales Stylesheet
   Quelle: DESIGN_SYSTEM.md (zwingende Referenz)
   Änderungen NUR im Einvernehmen mit dem Design-System.
   ============================================================ */

/* --- Inter Font (self-hosted, DSGVO-konform — keine Google CDN) --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Custom Properties (DESIGN_SYSTEM §2.1) --- */
:root {
    /* UI-Neuaufbau 29.09.2026: Arbeitsflaechen und gemeinsame Bedienwerte. */
    --ui-bg: var(--body-bg);
    --ui-surface: #ffffff;
    --ui-header: #14253F;
    --ui-ink: #162941;
    --ui-muted: #4D627B;
    --ui-line: #D7E0EA;
    --ui-action: #225ED8;
    --ui-action-hover: #194CAF;
    --ui-selected: #E9F1FF;
    --ui-danger: #B42318;
    --ui-warning: #9A5B00;
    --ui-success: #15704A;
    --ui-focus: #225ED8;
    --ui-radius: 6px;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-12: 48px;
    /* Layout */
    --sidebar-width: 250px;
    --topbar-height: 56px;

    /* Frist-Ampel — eigene Werte (Spec), nicht semantisch dieselben wie
       --success/--warning/--danger (pink/orange/teal). */
    --frist-rot:   #dc2626;
    --frist-gelb:  #d97706;
    --frist-gruen: #16a34a;

    /* Hintergrund */
    --sidebar-bg: #1D1E33;
    --body-bg: #e8effb;
    --card-bg: #ffffff;
    --surface-alt: #f8fafc;

    /* Navigation (Sidebar) */
    --nav-bg: #121528;
    --nav-item-hover: #1B2140;
    --nav-item-selected: #232B52;
    --nav-text: #EAF0FF;
    --nav-text-muted: #B7C2E6;
    --nav-accent: #5AA7FF;
    --nav-divider: rgba(255,255,255,0.12);

    /* Akzent */
    --accent-blue: #3B82F6;
    --accent-blue-hover: #2563EB;
    --accent-blue-pressed: #1D4ED8;
    --accent-blue-light: #60a5fa;
    --accent-purple: #8B5CF6;
    --accent-teal: #14B8A6;
    --accent-orange: #FFAB00;
    --accent-pink: #FC5286;

    /* Semantisch */
    --success-color: #00C9A7;
    --warning-color: #FFAB00;
    --danger-color: #FC5286;
    --info-color: #3B82F6;

    /* Text */
    --text-dark: #111827;
    --text-secondary: #374151;
    --text-light: #4b5563;
    --text-muted: #6B7280;
    --text-white: #ffffff;

    /* Rahmen */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-strong: #cbd5e1;

    /* Zustand */
    --hover-bg: #f1f5f9;
    --selected-bg: #e0f2fe;
    --pressed-bg: #dbeafe;

    /* Fachbereich (Tabellen, Berechnungszellen) */
    --calc-area-bg: #EFF6FF;
    --calc-area-text: #1E40AF;
    --result-area-bg: #F0FDF4;
    --result-area-text: #166534;
    --override-area-bg: #FFFBEB;
    --override-area-text: #92400E;
    --error-area-bg: #FEF2F2;
    --error-area-text: #DC2626;

    /* Tabelle */
    --table-header-bg: #f1f5f9;
    --table-header-text: #1E293B;
    --table-border: #e2e8f0;
    --table-row-alt: #f8fafc;
}

/* --- Basis (DESIGN_SYSTEM §3) --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--ui-bg);
    color: var(--text-dark);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'tnum' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    margin: 0 0 8px 0;
    color: var(--text-dark);
    font-weight: 600;
}
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

a {
    color: var(--accent-blue);
    text-decoration: none;
}
a:hover {
    color: var(--accent-blue-hover);
    text-decoration: underline;
}

.numeric {
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
}

.negative { color: var(--danger-color); }
.positive { color: var(--success-color); }

/* --- Layout (DESIGN_SYSTEM §4.1) --- */
.vc-layout {
    display: grid;
    /* Dritte Spalte "auto" fuer den Hilfe-Seitenbereich (Aufgabe 6): seine eigene Breite
       (340px/48px, siehe .vc-hilfe-panel weiter unten) bestimmt die Spaltenbreite. Unterhalb
       der Breitenschwelle wird der Bereich position: fixed und verlaesst den Grid-Fluss —
       die Spalte faellt dann von selbst auf 0 zusammen. */
    grid-template-columns: var(--sidebar-width) 1fr auto;
    min-height: 100vh;
}

.vc-sidebar {
    background: var(--sidebar-bg);
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    /* Eigenständig scrollbar: bei kleinem Fenster / vielen Nav-Einträgen bleibt der Footer
       (Support, Benutzer, Abmelden) per Scrollen IN der Leiste erreichbar — statt unter den
       sichtbaren Bereich zu rutschen, während nur das Hauptfenster scrollt. */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.vc-sidebar::-webkit-scrollbar {
    width: 8px;
}
.vc-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
.vc-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.vc-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 16px;
}
.vc-brand-logo {
    width: 140px;
    height: auto;
    object-fit: contain;
}
.vc-brand-flex {
    color: var(--nav-text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 4px;
}

.vc-sidebar-divider {
    height: 1px;
    background: var(--nav-divider);
    margin: 12px 16px;
}

.vc-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vc-sidebar-footer {
    margin-top: auto;
    padding: 0 8px 16px;
    display: flex;
    flex-direction: column;
}

.vc-sidebar-rechtliches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 12px 0;
    font-size: 12px;
}
.vc-sidebar-rechtliches a { color: var(--nav-text-muted); }
.vc-sidebar-rechtliches a:hover { color: var(--nav-text); }

.vc-support-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 4px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--nav-text-muted);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    transition: background 150ms, color 150ms;
}
.vc-support-btn:hover {
    background: var(--nav-item-hover);
    color: var(--nav-text);
}
.vc-support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    font-size: 13px;
    font-weight: 600;
    color: var(--nav-text-muted);
}
.vc-support-btn:hover .vc-support-icon {
    background: rgba(90, 167, 255, 0.18);
    color: var(--nav-accent);
}

.vc-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 4px 12px;
    color: var(--nav-text);
}
.vc-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nav-item-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--nav-text);
    flex-shrink: 0;
}
.vc-user-info {
    flex: 1 1 auto;
    min-width: 0;
}
.vc-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--nav-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vc-user-role {
    font-size: 11px;
    color: var(--nav-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}
.vc-logout {
    display: block;
    margin: 8px 4px 0;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--nav-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
.vc-logout:hover {
    background: var(--nav-item-hover);
    color: var(--nav-text);
    text-decoration: none;
}

.vc-main {
    background: var(--body-bg);
    padding: 24px 32px;
    overflow-y: auto;
    min-height: 100vh;
}

.vc-fullscreen {
    background: var(--body-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* --- Sidebar-Navigation (DESIGN_SYSTEM §4.4) --- */
.vc-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    margin: 2px 8px;
    color: var(--nav-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
.vc-nav-item:hover {
    background: var(--nav-item-hover);
    color: var(--nav-text);
    text-decoration: none;
}
.vc-nav-item.active {
    background: var(--nav-item-selected);
    color: var(--nav-accent);
}
.vc-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    font-size: 12px;
    font-weight: 600;
    color: var(--nav-text-muted);
}
.vc-nav-item.active .vc-nav-icon {
    background: rgba(90, 167, 255, 0.18);
    color: var(--nav-accent);
}
.vc-nav-label {
    flex: 1 1 auto;
}

/* --- Page Header --- */
.vc-page-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}
.vc-page-header h1 {
    margin: 0;
}
.vc-page-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

/* --- Cards (DESIGN_SYSTEM §4.3) --- */
.vc-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 24px;
    margin-bottom: 24px;
    transition: box-shadow 150ms;
}
.vc-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.vc-card--table {
    padding: 0;
}
.vc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-light);
}
.vc-card-header h2 {
    margin: 0;
}
.vc-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* --- Buttons (DESIGN_SYSTEM §5.1) --- */
.btn-primary {
    background: var(--accent-blue);
    color: var(--text-white);
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    /* T-058 (Rudi, 24.10.2026): wie .btn-secondary zentriert, damit auch ein <a class="btn-primary">
       seinen Text mittig traegt (Stelle besetzen in der Mitarbeiterkarte). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    transition: background 150ms;
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-blue-hover);
    color: var(--text-white);
    text-decoration: none;
}
.btn-primary:active:not(:disabled) {
    background: var(--accent-blue-pressed);
}
.btn-primary:disabled {
    background: var(--accent-blue-light);
    cursor: not-allowed;
}

.btn-secondary {
    background: transparent;
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    border-radius: 10px;
    padding: 10px 20px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    transition: background 150ms, color 150ms;
}
.btn-secondary:hover {
    background: var(--selected-bg);
    color: var(--accent-blue);
    text-decoration: none;
}
.btn-secondary.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-neutral {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 20px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms;
}
.btn-neutral:hover {
    background: var(--hover-bg);
    color: var(--text-secondary);
    text-decoration: none;
}
/* Die Hover-Regeln der Knöpfe setzen ihre Schrift selbst: Sonst färbte die allgemeine
   a:hover-Regel einen Link in Knopfgestalt in --accent-blue-hover — beim primären Knopf
   genau die Hover-Hintergrundfarbe, die Beschriftung verschwand (Testbefund 26.09., Nr. 1). */

/* Ruecklink der Buchungen-&-Belege-Werkzeugseiten zum Hub (Block 5) */
.vc-back-link {
    display: inline-block;
    margin-bottom: 12px;
}
/* T-064: zwei Ruecklinks nebeneinander (z. B. Lernregeln: Buchungen & Belege und Einstellungen). */
.vc-back-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vc-back-links .vc-back-link { margin-bottom: 0; }

/* --- Forms --- */
.vc-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.vc-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}
.vc-input {
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-dark);
    transition: border-color 150ms, box-shadow 150ms;
}
.vc-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.vc-input::placeholder {
    color: var(--text-muted);
}
.vc-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.vc-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* Radio-Gruppe (Phase 2C, Ersatz für MudRadioGroup/MudRadio). */
.vc-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vc-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* --- Alerts --- */
.vc-alert {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}
/* ValidationSummary (Blazor-Standardkomponente) rendert eine <ul> — hier auf den vc-alert-Look
   eingepasst (Bestandskonvention: Feldfehler bleiben formular-global, kein Pro-Feld-Slot). */
.vc-alert ul {
    margin: 0;
    padding-left: 18px;
}
.vc-alert li + li {
    margin-top: 4px;
}
.vc-alert--error {
    background: var(--error-area-bg);
    color: var(--error-area-text);
    border: 1px solid #FECACA;
}
.vc-alert--info {
    background: var(--calc-area-bg);
    color: var(--calc-area-text);
    border: 1px solid #BFDBFE;
}

/* --- Login (zentriert) --- */
.vc-login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 24px;
}
.vc-login-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 40px;
    width: 100%;
    max-width: 420px;
}
.vc-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    text-align: center;
}
.vc-login-logo {
    width: 220px;
    height: auto;
    object-fit: contain;
    margin-bottom: 8px;
}
.vc-login-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 1px;
}
/* Anmeldeseite (24.10.2026): Das Logo zeigt „VeltoCare Flex“; die Überschrift bleibt nur für Vorleseprogramme. */
.vc-login-title--vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.vc-login-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}
.vc-login-submit {
    width: 100%;
    margin-top: 8px;
}
.vc-login-footer {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
}
.vc-login-footer a {
    color: var(--text-muted);
}
.vc-login-footer a:hover {
    color: var(--accent-blue);
}
/* „Passwort vergessen" (10.10.2026): Einleitung über dem Formular, Hilfelinks darunter. */
.vc-login-hinweis {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px;
}
.vc-login-hilfe {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
}

/* --- Tabellen (DESIGN_SYSTEM §5.2) --- */
.vc-table-wrapper {
    width: 100%;
    overflow-x: auto;
}
/* Ein offenes Aktionsmenü (VcAktionsMenue) ragt über die Zeile hinaus. overflow-x:auto macht die Hülle
   auch senkrecht zum Scrollbereich und schnitte es ab — solange es offen ist, darf es überstehen
   (Prüf-Tor 11.10.2026, Kassenblatt mit ein bis drei Zeilen). */
.vc-table-wrapper:has(.vc-aktionsmenue-liste) {
    overflow: visible;
}
.vc-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: lining-nums tabular-nums;
    /* Grundfarbe an der Tabelle, NICHT an jeder Zelle (11.10.2026): `.vc-table tbody td { color }`
       hatte Spezifität (0,1,2) und schlug jede Farbklasse an der Zelle (`.negative`,
       `.vc-row-amount-*`, `.vc-text-muted`) — jede brauchte einen eigenen Zwilling. Geerbt verliert
       die Grundfarbe gegen jede Klasse. Wächter: HilfsklassenWirksamkeitTests. */
    color: var(--text-dark);
}
.vc-table thead th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--table-border);
    position: sticky;
    top: 0;
    z-index: 1;
}
.vc-table thead th.numeric {
    text-align: right;
}
.vc-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    vertical-align: middle;
}
.vc-table tbody td.numeric {
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
}
.vc-table tbody tr:nth-child(even) {
    background: var(--table-row-alt);
}
.vc-table tbody tr:hover {
    background: var(--hover-bg);
}
.vc-table tfoot td,
.vc-table tbody tr.sum-row td {
    /* 11.10.2026: tfoot hatte kein Polster und klebte am Kartenrand (tbody td: 8px 12px). */
    padding: 8px 12px;
    font-weight: 600;
    border-top: 2px solid var(--border-strong);
    background: var(--table-header-bg);
}
.vc-table-empty {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 20px !important;
}

/* --- KPI-Karten (DESIGN_SYSTEM §5.3) --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}
.kpi-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 150ms;
}
.kpi-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.kpi-card .kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-dark);
    font-variant-numeric: lining-nums tabular-nums;
}
.kpi-card .kpi-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}
.kpi-card .kpi-trend {
    font-size: 12px;
    font-weight: 500;
}
.kpi-card .kpi-trend.positive { color: var(--success-color); }
.kpi-card .kpi-trend.negative { color: var(--danger-color); }

/* --- Status-Badges (DESIGN_SYSTEM §5.5) --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.badge-success { background: #ecfdf5; color: #059669; }
.badge-warning { background: #fffbeb; color: #b45309; }
.badge-danger  { background: #fef2f2; color: #dc2626; }
.badge-info    { background: #eff6ff; color: #2563eb; }
.badge-neutral { background: #f1f5f9; color: #475569; }
.badge-kasse   { background: #f0fdfa; color: #0d9488; }


/* --- Blazor Error UI --- */
#blazor-error-ui {
    color-scheme: light only;
    background: #fffbeb;
    color: #92400e;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13px;
    font-weight: 500;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 8px;
}
#blazor-error-ui .reload {
    color: var(--accent-blue);
    font-weight: 600;
    margin-left: 8px;
}

/* --- Responsive (DESIGN_SYSTEM §9) — Drawer-Muster für Mobile --- */

/* Hamburger-Button: nur auf Mobile sichtbar */
.vc-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    background: var(--sidebar-bg);
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--nav-text);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Backdrop-Overlay für Drawer */
.vc-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
}
.vc-drawer-overlay.vc-drawer-overlay--offen {
    display: block;
}

@media (max-width: 768px) {
    html, body { background: var(--body-bg); }
    .vc-layout {
        grid-template-columns: 1fr;
    }
    /* Sidebar als off-canvas Drawer — standardmäßig versteckt */
    .vc-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: var(--sidebar-width);
        z-index: 1060;
        transform: translateX(-100%);
        transition: transform 150ms ease-in-out;
    }
    /* Sidebar sichtbar wenn Drawer offen */
    .vc-sidebar--offen {
        transform: translateX(0);
    }
    .vc-main {
        padding: 16px;
        padding-top: 56px; /* Platz für Hamburger-Button */
    }
    .vc-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   Paket 1 — Ergänzungen (Kostenarten, Buchungen, Kostenstelle)
   ============================================================ */

/* --- Page-Header Aktions-Zeile --- */
.vc-page-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Sidebar: Section-Labels (DESIGN_SYSTEM §4.4 Gruppen-Labels) --- */
.vc-nav-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--nav-text-muted);
    padding: 16px 20px 6px 20px;
    margin-top: 8px;
    border-top: 1px solid var(--nav-divider);
}

/* --- Akkordeon (Kostenarten) --- */
.vc-accordion-item {
    padding: 0;
    margin-bottom: 16px;
}
.vc-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    cursor: pointer;
    user-select: none;
}
.vc-accordion-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.vc-accordion-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.vc-accordion-chevron {
    display: inline-block;
    color: var(--text-muted);
    font-size: 14px;
    transition: transform 150ms;
}
.vc-accordion-chevron.open {
    transform: rotate(90deg);
}
.vc-accordion-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}
.vc-accordion-content {
    border-top: 1px solid var(--border-light);
    padding: 0;
}
.vc-accordion-content .vc-table-wrapper {
    padding: 0;
}
.vc-accordion-content .vc-table thead th {
    position: static;
}
.vc-accordion-footer {
    padding: 12px 24px 20px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt);
}

/* --- Icon-Buttons (Edit / Delete in Listen) --- */
.vc-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.vc-icon-btn:hover {
    background: var(--hover-bg);
    color: var(--text-dark);
}
.vc-icon-btn--danger:hover {
    background: #FEE2E2;
    color: #B91C1C;
    border-color: #FCA5A5;
}

/* --- Text-Aktionsbutton ---------------------------------------------------
   Ersetzt die frueheren Icon-only-Buttons in Tabellenzeilen (Stift/Papierkorb).
   DESIGN_SYSTEM.md: „Icons MIT Text daneben" — ein Wort ist fuer Laien eindeutig,
   ein Piktogramm nicht. Kein fester Kasten wie .vc-icon-btn, damit der Text passt. */
.vc-text-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.vc-text-btn:hover {
    background: var(--hover-bg);
    color: var(--text-dark);
}

.vc-text-btn--danger:hover {
    background: #FEE2E2;
    color: #B91C1C;
    border-color: #FCA5A5;
}

/* --- Status-Anzeige mit Punkt + Wort --------------------------------------
   Ersetzt die frueheren Ampel-Emojis. Die Farbe allein traegt die Aussage NICHT
   (DESIGN_SYSTEM.md: „Farbcodierung ohne Legende" ist verboten) — das Wort steht
   immer daneben und bleibt fuer Farbfehlsichtige und Screenreader lesbar. */
.vc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.vc-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.vc-status-dot--gruen { background: var(--frist-gruen); }
.vc-status-dot--gelb  { background: var(--frist-gelb); }
.vc-status-dot--rot   { background: var(--frist-rot); }

/* --- Danger-Button --- */
.btn-danger {
    background: transparent;
    color: #DC2626;
    border: 1px solid #EF4444;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.btn-danger:hover {
    background: #EF4444;
    color: var(--text-white);
}

/* --- Export-Buttons: Excel (grün) / PDF (blau) --- */
/* Konsistenter Stil für alle Download-Buttons (Api.DownloadAsync), app-weit. */
/* Gemeinsame Basis beider Export-Buttons — nur Akzentfarbe/Hover unterscheiden sich. */
.btn-export-excel,
.btn-export-pdf {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 10px 20px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.btn-export-excel:disabled,
.btn-export-pdf:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--card-bg);
}
.btn-export-excel {
    color: #16A34A;
    border: 1px solid #16A34A;
}
.btn-export-excel:hover:not(:disabled) {
    background: #F0FDF4;
}
.btn-export-pdf {
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
}
.btn-export-pdf:hover:not(:disabled) {
    background: var(--calc-area-bg);
}

/* --- Filter-Bar (Buchungen) --- */
.vc-filter-bar {
    padding: 16px 24px;
}
.vc-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr auto;
    gap: 16px;
    align-items: end;
}
.vc-filter-grid .vc-form-group {
    margin-bottom: 0;
}
.vc-filter-actions .btn-neutral {
    height: 40px;
}
@media (max-width: 900px) {
    .vc-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Tabellen-Zellen mit Sekundär-Text (Kostenart + Hauptgruppe) --- */
.vc-cell-primary {
    display: block;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
}
.vc-cell-secondary {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* --- Tabellen: Klickbare Zeilen --- */
.vc-table tbody tr.clickable {
    cursor: pointer;
}

/* --- Beträge in Tabellen (positiv / negativ) --- */
.vc-row-amount-negative {
    color: var(--danger-color);
}
.vc-row-amount-positive {
    color: var(--success-color);
}

/* --- Pill-Tabs (Kostenstelle-Detail) --- */
.vc-pill-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.vc-pill-tab {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.vc-pill-tab:hover:not(:disabled) {
    background: var(--hover-bg);
    color: var(--text-dark);
}
.vc-pill-tab.active {
    background: var(--accent-blue);
    color: var(--text-white);
    border-color: var(--accent-blue);
}
.vc-pill-tab:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}


/* ============================================================
   Paket 2 — Ergänzungen (Import, BankProfil, Lernregeln)
   ============================================================ */

/* --- Filter-Grid mit File-Upload (Import-Tab) --- */
.vc-filter-grid--import {
    grid-template-columns: 1fr 1fr auto;
}
@media (max-width: 900px) {
    .vc-filter-grid--import {
        grid-template-columns: 1fr;
    }
}

/* --- Zweite Filterzeile der Buchungsliste: Zeitraum (Monat oder von/bis) und Beleg --- */
.vc-filter-grid--zeile2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
}
@media (max-width: 900px) {
    .vc-filter-grid--zeile2 {
        grid-template-columns: 1fr;
    }
}

/* --- Sortierbarer Spaltenkopf (Knopf im <th>, Richtung per aria-sort am <th>) --- */
.vc-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.vc-th-sort:hover { color: var(--accent-blue); }
.vc-th-sort:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

/* --- Mehrere Buttons nebeneinander --- */
.vc-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- 2-Spalten Grid für Dialog-Formulare --- */
.vc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .vc-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* --- File-Input: gleiche Höhe wie andere vc-inputs --- */
.vc-file-input {
    padding: 8px 10px;
    background: var(--card-bg);
}

/* --- Fortschrittsbalken --- */
.vc-progressbar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--border-light);
    overflow: hidden;
    margin-bottom: 4px;
}
.vc-progressbar--lg {
    height: 12px;
}
.vc-progressbar--sm {
    height: 6px;
}
.vc-progressbar-fill {
    height: 100%;
    background: var(--accent-blue);
    transition: width 200ms ease-out;
}

/* --- Import-Fortschritts-Card --- */
.vc-import-progress {
    padding: 16px 20px;
}
.vc-import-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 16px;
    flex-wrap: wrap;
}
.vc-import-progress-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}
.vc-import-progress-stats {
    font-size: 13px;
    color: var(--text-secondary);
}

/* --- Two-Panel-Layout (Zuordnung) --- */
.vc-import-two-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 1024px) {
    .vc-import-two-panel {
        grid-template-columns: 1fr;
    }
}

.vc-import-panel {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 320px);
    min-height: 480px;
}
.vc-import-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.vc-import-panel-head h2 {
    margin: 0;
}
.vc-import-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
}

/* --- Einzelne Import-Zeile (linke Spalte, draggable) --- */
.vc-import-zeile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: background 150ms, border-color 150ms, box-shadow 150ms, opacity 150ms;
    cursor: grab;
}
.vc-import-zeile:hover {
    border-color: var(--accent-blue-light);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.vc-import-zeile.is-dragging {
    opacity: 0.55;
    cursor: grabbing;
    border-color: var(--accent-blue);
    background: var(--selected-bg);
}
.vc-import-zeile.is-suggested {
    border-left: 3px solid var(--accent-blue);
}
.vc-import-zeile.is-done {
    background: var(--result-area-bg);
    border-color: #BBF7D0;
    cursor: default;
}
.vc-import-zeile.is-ignored {
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: default;
}
.vc-import-zeile.is-an-kasse {
    background: #f0fdfa;
    border-color: #99f6e4;
    cursor: default;
}
.vc-import-zeile[draggable="false"] {
    cursor: default;
}

.vc-import-zeile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.vc-import-zeile-date {
    color: var(--text-secondary);
}
.vc-import-zeile-amount {
    font-weight: 600;
}
.vc-import-zeile-verwendung {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 6px;
}
.vc-import-zeile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.vc-import-zeile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vc-confidence-badge {
    font-variant-numeric: tabular-nums;
}

.vc-link-btn {
    background: transparent;
    border: none;
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 500;
    padding: 2px 4px;
    cursor: pointer;
    text-decoration: none;
}
.vc-link-btn:hover {
    color: var(--accent-blue-hover);
    text-decoration: underline;
}
.vc-link-btn--muted {
    color: var(--text-muted);
}
.vc-link-btn--muted:hover {
    color: var(--text-secondary);
}

/* Kompaktes Inline-Select zur Kassen-Auswahl in der Zeilen-Action-Reihe (Bank-Brücke §8.8) */
.vc-kasse-select {
    width: auto;
    max-width: 220px;
    padding: 2px 8px;
    font-size: 12px;
    height: auto;
    border-radius: 8px;
}

/* --- Kostenarten-Baum (rechte Spalte) --- */
.vc-import-hg {
    margin-bottom: 8px;
}
.vc-import-hg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 4px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    border-radius: 8px;
    transition: background 150ms;
}
.vc-import-hg-head:hover {
    background: var(--hover-bg);
}
.vc-import-hg-title {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}
.vc-import-hg-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 8px 24px;
}

/* --- Drop-Target (Unterart) --- */
.vc-drop-target {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    font-size: 13px;
    color: var(--text-dark);
    transition: background 150ms, border-color 150ms, transform 100ms;
}
.vc-drop-target.is-drag-over {
    background: rgba(59, 130, 246, 0.10);
    border-color: var(--accent-blue);
    border-style: solid;
    transform: scale(1.01);
}
.vc-drop-target-num {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    min-width: 36px;
}
.vc-drop-target-name {
    flex: 1 1 auto;
}

/* --- Schritt-Indikator (Wizard, optional/zukünftig) --- */
.vc-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.vc-step-indicator .step {
    flex: 1 1 0;
    height: 4px;
    border-radius: 999px;
    background: var(--border-color);
}
.vc-step-indicator .step.active {
    background: var(--accent-blue);
}
.vc-step-indicator .step.done {
    background: var(--success-color);
}

/* ============================================================
   Paket 3 — Personalplanung
   Zeitstrahl, Wizard, Einstellungen
   ============================================================ */

/* --- Einstellungen-Seite: zweispaltiges Form-Grid --- */
.vc-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px 24px;
}
@media (max-width: 720px) {
    .vc-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Einstellungen-Seite: Subsection-Header innerhalb eines Settings-Grids (Block 8) ---
   `grid-column: 1 / -1` laesst die Ueberschrift ueber alle Spalten des umgebenden
   .vc-settings-grid hinweg laufen, damit thematisch zusammengehoerige Felder
   (z.B. Sozialversicherung + Beitragsbemessungsgrenzen) sichtbar gruppiert werden,
   ohne das Grid in mehrere Container aufzuteilen. */
.vc-settings-subhead {
    grid-column: 1 / -1;
    margin: 8px 0 4px;
}
.vc-settings-subhead h3 {
    margin: 0 0 4px 0;
}
.vc-settings-subhead p {
    margin: 0;
}

/* --- Hilfetexte unter Form-Feldern --- */
.vc-form-help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

/* --- Header-Actions in Card-Header (Jahr-Dropdown + Plus-Button) --- */
.vc-card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vc-input--inline {
    width: auto;
    min-width: 96px;
    padding: 6px 10px;
    font-size: 13px;
}

/* --- Inline-Edit-Input direkt in Tabellenzelle --- */
.vc-input--cell {
    width: 100%;
    min-width: 60px;
    padding: 4px 6px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--accent-blue);
    background: #ffffff;
}

/* --- Warning-Alert --- */
.vc-alert--warning {
    background: var(--override-area-bg);
    color: var(--override-area-text);
    border: 1px solid #FED7AA;
}

/* --- Card mit Einsatz-Look (Hellgrau, kleinerer Padding) --- */
.vc-card--inset {
    background: var(--surface-alt);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: none;
    margin-bottom: 12px;
}

/* --- Form-Row als Multi-Spalten-Grid (Wizard, Settings) --- */
.vc-form-row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
    margin-bottom: 12px;
}

/* --- Text-Muted Utility --- */
.vc-text-muted {
    color: var(--text-muted);
}

/* --- Export-Buttons-Container (Dashboard, BWA) --- */
.export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.btn-neutral:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}

/* --- Zeitstrahl-Tabelle --- */
.vc-zeitstrahl-table {
    min-width: 1200px;
}
.vc-zeitstrahl-name-col   { width: 200px; }
.vc-zeitstrahl-notiz-col  { width: 240px; }
.vc-zeitstrahl-monat-col  { width: 76px; }
.vc-zeitstrahl-summe-col  { width: 120px; }

.vc-zeitstrahl-notiz {
    color: var(--text-secondary);
    font-size: 13px;
    max-width: 240px;
    white-space: normal;
    word-break: break-word;
}

.vc-zeitstrahl-monat {
    padding: 6px 8px;
    vertical-align: top;
    line-height: 1.25;
    border-left: 1px solid var(--border-light);
}
/* Stundenwert + Eurowert zentriert untereinander (überschreibt .numeric rechtsbündig
   NUR für diese Zellen — betrifft keine andere Tabelle).
   WICHTIG: KEIN display:flex auf der <td> — das zerstört das Tabellen-Layout (alle
   Zellen würden in eine Spalte stapeln). Zentrierung über text-align: die Stunden-
   Zelle ist inline-block (zentriert sich damit), der Euro-Wert ist block. */
.vc-zeitstrahl-monat.numeric {
    text-align: center;
}
.vc-zeitstrahl-monat.is-inactive {
    background: var(--border-light);
    color: var(--text-muted);
}
.vc-zeitstrahl-stunden {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
}
.vc-zeitstrahl-kosten {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    text-align: center;
}
.vc-zeitstrahl-jahressumme {
    font-weight: 600;
    color: var(--text-dark);
    display: block;
}
.vc-zeitstrahl-jahressumme-mittel {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #6B7280);
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

/* Name-Spalte als klickbarer Button */
.vc-zeitstrahl-name-btn {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vc-zeitstrahl-name-btn:hover .vc-cell-primary {
    color: var(--accent-blue);
    text-decoration: underline;
}

/* Aktionen unter dem Namen (Sichtpruefung Rudi, 27.09.2026): als Textlinks mit Abstand statt zweier
   aneinanderklebender Rahmenknoepfe — der Name bleibt das Hauptelement der Zelle. */
.vc-zeitstrahl-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    margin: 6px 0 0 -6px;
}
.vc-zeitstrahl-aktionen .btn-text {
    padding: 2px 6px;
    text-align: left;
    white-space: nowrap;
}

/* Stunden-Zelle als klickbarer Button (Edit-Trigger) */
.vc-zeitstrahl-stunden-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: text;
    color: inherit;
    font: inherit;
    width: 100%;
    text-align: right;
    border-radius: 4px;
    transition: background 100ms;
}
.vc-zeitstrahl-stunden-btn:hover {
    background: var(--hover-bg);
}

/* Honorar-Akzent: linker Border in Teal */
.vc-honorar-akzent td:first-child {
    border-left: 3px solid var(--accent-teal);
}

/* Summen-Zeile mit doppelter Oberlinie */
.vc-zeitstrahl-summen-row td {
    font-weight: 600;
    border-top: 2px solid var(--border-strong) !important;
    background: var(--table-header-bg);
}

/* Zweizeiliger Monatsspaltenkopf: Name + Einheit "Std / €" */
.vc-zeitstrahl-monat-head {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
/* Monats-Headerzellen: zentriert (passend zu den zentrierten Monatszellen darunter),
   dezente Trennlinie zur vorherigen Spalte. Jahressumme-Header bleibt rechtsbündig. */
.vc-zeitstrahl-monat-col {
    border-left: 1px solid var(--border-light);
}
.vc-zeitstrahl-monat-col .vc-zeitstrahl-monat-head {
    align-items: center;
    text-align: center;
}
.vc-zeitstrahl-monat-head-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}
.vc-zeitstrahl-monat-head-unit {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Inline-Edit-Stundenzelle: sieht wie ein Eingabefeld aus (Display und Input visuell
   identisch), damit erkennbar ist, dass hier getippt werden kann. */
.hours-cell {
    display: inline-block;
    box-sizing: border-box;
    width: 54px;
    height: 28px;
    line-height: 24px;
    padding: 0 6px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14px;
    font-variant-numeric: lining-nums tabular-nums;
    text-align: center;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, box-shadow 150ms;
}
.hours-cell:hover {
    border-color: var(--accent-blue);
    background: var(--hover-bg);
}
.hours-cell.hours-cell--editing,
input.hours-cell {
    border: 1px solid var(--accent-blue);
    background: var(--card-bg);
    cursor: text;
    outline: none;
}
.hours-cell:focus,
.hours-cell.hours-cell--editing:focus,
input.hours-cell:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
input.hours-cell.is-invalid {
    border-color: var(--danger-color);
}
input.hours-cell::-webkit-inner-spin-button,
input.hours-cell::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.hours-cell {
    -moz-appearance: textfield;
}

/* --- Wizard-Stepper (Nummern-Dots oben) --- */
.vc-wizard-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}
.vc-wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    opacity: 0.55;
    transition: opacity 150ms;
}
.vc-wizard-step.active,
.vc-wizard-step.done {
    opacity: 1;
}
.vc-wizard-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--border-color);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.vc-wizard-step.active .vc-wizard-step-dot {
    background: var(--accent-blue);
    color: var(--text-white);
}
.vc-wizard-step.done .vc-wizard-step-dot {
    background: var(--success-color);
    color: var(--text-white);
}
.vc-wizard-step-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 720px) {
    .vc-wizard-step-label {
        display: none;
    }
}

/* --- Personalplanung: KST-Auswahl-Cards --- */
.vc-kst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.vc-kst-card {
    display: block;
    text-align: left;
    padding: 20px 24px;
    background: var(--card-bg);
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: box-shadow 150ms, transform 150ms;
    font-family: inherit;
}
.vc-kst-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.vc-kst-card-number {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.vc-kst-card-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.vc-kst-card-financing {
    font-size: 12px;
    color: var(--text-muted);
}


/* --- SpaltenmappingWizard: klickbare Vorschau-Tabelle --- */
.mapping-preview {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: lining-nums tabular-nums;
}
.mapping-preview th,
.mapping-preview td {
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-dark);
}
.mapping-preview th {
    background: var(--table-header-bg);
    font-weight: 500;
    color: var(--table-header-text);
    text-align: left;
}
.mapping-preview td {
    cursor: pointer;
    background: var(--card-bg);
    transition: background 120ms;
}
.mapping-preview td:hover {
    background: var(--hover-bg);
}
.mapping-preview td.col-selected {
    background: var(--selected-bg);
    font-weight: 500;
}
.mapping-preview th.col-datum,
.mapping-preview td.col-datum {
    background: #dbeafe;
    color: #1e40af;
}
.mapping-preview th.col-betrag,
.mapping-preview td.col-betrag {
    background: #dcfce7;
    color: #166534;
}
.mapping-preview th.col-verwendung,
.mapping-preview td.col-verwendung {
    background: #fef3c7;
    color: #92400e;
}
.mapping-preview th.col-valuta,
.mapping-preview td.col-valuta {
    background: #e0e7ff;
    color: #3730a3;
}
.mapping-preview th.col-gegenkonto,
.mapping-preview td.col-gegenkonto {
    background: #fce7f3;
    color: #9d174d;
}
.mapping-preview th.col-endtoend,
.mapping-preview td.col-endtoend {
    background: #ccfbf1;
    color: #115e59;
}
.mapping-preview th.col-empfaenger,
.mapping-preview td.col-empfaenger {
    background: #ede9fe;
    color: #5b21b6;
}
.mapping-preview .row-selected td {
    border-top: 2px solid var(--accent-blue);
}

/* --- SpaltenmappingWizard: neuer 2-Schritt-Flow --- */
/* Recognition-Labels (Vorschau-Modus) */
.recognition-labels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.recognition-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.recognition-label.datum    { border-left: 4px solid #3b82f6; }
.recognition-label.verwendung { border-left: 4px solid #f59e0b; }
.recognition-label.betrag   { border-left: 4px solid #10b981; }
.recognition-label.empfaenger { border-left: 4px solid var(--accent-purple); }
/* Fix E (Sichtpruefung 27.08.2026): Karten sind anklickbar (Einzelkorrektur je Feld) und
   zeigen einen deutlichen Warnzustand, wenn die zugeordnete Spalte nichts Lesbares liefert
   oder gar keine Spalte zugeordnet ist — kein gruener Haken mehr fuer "— / — / —". */
.recognition-label.clickable {
    cursor: pointer;
}
.recognition-label.clickable:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.recognition-label.clickable:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}
.recognition-label.unlesbar {
    border-left-color: var(--danger-color);
    background: var(--error-area-bg);
}
/* Folgeauftrag Empfänger/Sender (27.08.2026): eigener neutraler Zustand, kein Warnzustand —
   ein Kontoauszug ohne Empfängerspalte ist vollkommen in Ordnung. Steht bewusst NACH
   .empfaenger, damit die neutrale Randfarbe die Feld-Akzentfarbe ueberschreibt, wenn beide
   Klassen gleichzeitig am Element stehen. */
.recognition-label.neutral {
    border-left-color: var(--border-strong);
    background: var(--surface-alt);
}
.recognition-label .label-check.neutral {
    color: var(--text-muted);
}
.recognition-label .label-icon { font-size: 18px; }
.recognition-label .label-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.recognition-label .label-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.recognition-label .label-preview {
    font-size: 13px;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.recognition-label .label-check {
    color: var(--success-color);
    font-weight: 600;
}
.recognition-label .label-check.warnung {
    color: var(--danger-color);
}

/* Formatpruefung im Import-Wizard (Block 8b, N20).
   Die Summe ist das wirksamste Element des Blocks: Ein Faktor 100 faellt hier sofort auf,
   auch ohne dass jemand ueber Trennzeichen nachdenkt. Deshalb steht sie prominent und
   tabellarisch — nicht als Randnotiz. */
.format-pruefung {
    margin-top: 16px;
}
.format-summe {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.format-summe-text {
    font-size: 13px;
    color: var(--text-muted);
}
.format-summe-wert {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
    white-space: nowrap;
}
.format-summe-wert.negativ {
    color: var(--danger-color);
}
/* Zweite Zeile: der Zeitraum der Datei. Bewusst ruhiger als die Summe — sie ist der
   Hauptanker, er die Ergaenzung fuer die Datumsspalte. */
.format-zeitraum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px 0;
}
.format-zeitraum-wert {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
    white-space: nowrap;
}
/* Kein Fehler, sondern ein Vorbehalt: neutral-blau statt rot oder gelb. Rot hier waere
   falsch — die Datei ist in Ordnung, sie gibt nur ueber ihr Zahlenformat nichts her. */
.format-hinweis {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: #eff6ff;
    border-left: 3px solid var(--accent-blue);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #1e40af;
}

/* Korrektur-Chips */
.korrektur-chips {
    display: flex;
    gap: 8px;
    margin: 16px 0 12px;
    flex-wrap: wrap;
}
.korrektur-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    background: var(--border-color);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.korrektur-chip.pending {
    background: var(--border-light);
    color: var(--text-muted);
}
.korrektur-chip.active {
    background: var(--accent-blue);
    color: #ffffff;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.korrektur-chip.done {
    background: var(--success-color);
    color: #ffffff;
    border-color: var(--success-color);
}
.korrektur-chip-col {
    font-size: 11px;
    opacity: 0.9;
}
.korrektur-chip.clickable {
    cursor: pointer;
}
.korrektur-chip-optional {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.7;
}

/* Korrektur-Highlight fuer Tabellen-Header */
.mapping-preview th.col-datum-target,
.mapping-preview th.col-verwendung-target,
.mapping-preview th.col-betrag-target,
.mapping-preview th.col-endtoend-target,
.mapping-preview th.col-empfaenger-target {
    background: var(--hover-bg);
    cursor: pointer;
    border-top: 2px dashed var(--accent-blue);
}
.mapping-preview th {
    cursor: pointer;
}
.mapping-preview tr.row-header td {
    color: var(--text-muted);
    font-style: italic;
}

/* Section-Titel im Wizard */
.vc-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 6px 0;
}

/* Erklaerender Absatz unter einer Abschnittsueberschrift — fuer Erlaeuterungen, die
   laenger sind als ein Feld-Hinweis (etwa die Minijob-Parameter in den
   Berechnungsparametern). Bewusst KEIN Warnton wie .vc-select-hint: Das hier ist
   Erklaerung, keine Meldung. Farbe und Groesse entsprechen .vc-page-subtitle,
   damit erklaerender Text im Produkt ueberall gleich aussieht. */
.vc-section-hint {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 68ch;
    margin: 0 0 12px 0;
}

/* Lade-Indikator */
.vc-loading {
    display: flex;
    align-items: center;
    padding: 32px;
    justify-content: center;
}

/* Unbestimmter Ladekreis (Phase 2C, Ersatz für MudProgressCircular). */
.vc-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: vc-spin 0.7s linear infinite;
}
@keyframes vc-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .vc-spinner { animation-duration: 2s; }
}

/* btn-text */
.btn-text {
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
}
/* Der Korrektur-Ausweg im CSV-Assistenten: Blau ging neben dem blauen
   Hauptknopf unter (Sichtpruefung Rudi). Amber wie badge-warning, mit
   Unterstreichung als Link-Affordanz. */
.btn-text--korrektur {
    color: #b45309;
    text-decoration: underline;
}

.btn-text:hover:not(:disabled) {
    background: var(--hover-bg);
}
.btn-text:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ===== Import-Zuordnung: Onboarding, Progress, Drag&Drop-Feedback ===== */

/* --- Onboarding-Banner --- */
.onboarding-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--calc-area-bg);
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    position: relative;
}
.onboarding-banner-icon {
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}
.onboarding-banner-body {
    flex: 1;
    color: var(--text-dark);
    font-size: 14px;
}
.onboarding-banner-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
}
.onboarding-banner-body ol {
    margin: 4px 0 0 18px;
    padding: 0;
    color: var(--text-secondary);
}
.onboarding-banner-body ol li {
    margin-bottom: 2px;
}
.onboarding-banner-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.onboarding-banner-close:hover {
    color: var(--text-dark);
}

/* --- Progress-Card (neu, prominenter) --- */
.import-progress-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.import-progress-bar {
    height: 10px;
    background: var(--border-light);
    border-radius: 5px;
    overflow: hidden;
}
.import-progress-fill {
    height: 100%;
    background: var(--accent-blue);
    transition: width 200ms ease-out;
}
.import-progress-text {
    font-size: 14px;
    color: var(--text-dark);
}
.import-progress-percent {
    color: var(--text-muted);
    margin-left: 8px;
}
.import-progress-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* --- Done-Banner --- */
.import-done-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--result-area-bg);
    border: 1px solid #86EFAC;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.import-done-icon {
    font-size: 24px;
    line-height: 1;
}
.import-done-body {
    flex: 1;
}
.import-done-body strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--result-area-text);
}
.import-done-body p {
    margin: 2px 0 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* --- Selektions-Zustand der Buchungs-Card (Klick-Zuordnung) --- */
.vc-import-zeile.is-selected {
    border-color: var(--accent-blue);
    background: var(--selected-bg);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* --- Rechtes Panel: Drop-Zone-Hinweis während Drag --- */
.vc-import-panel.is-drop-zone-active {
    outline: 2px dashed var(--border-strong);
    outline-offset: -6px;
}

/* --- Drop-Target-Klassen erweitern --- */
.vc-drop-target.is-receivable {
    border-style: dashed;
    border-color: var(--accent-blue-light);
}
.vc-drop-target.is-receivable:hover {
    background: var(--hover-bg);
}
.vc-drop-target.is-drag-over {
    background: var(--selected-bg) !important;
    border: 2px solid var(--accent-blue) !important;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    transition: all 100ms ease;
}
.vc-drop-target.is-drag-over .vc-drop-target-name {
    font-weight: 600;
    color: var(--accent-blue);
}
.vc-drop-target.is-click-receivable {
    cursor: pointer;
}
.vc-drop-target.is-click-receivable:hover {
    background: var(--hover-bg);
    border-color: var(--accent-blue-light);
}
.vc-drop-target.just-dropped {
    background: var(--result-area-bg) !important;
    border: 2px solid var(--success-color) !important;
    animation: vc-flash-success 600ms ease;
}
.drop-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent-blue);
    font-weight: 500;
    white-space: nowrap;
}
@keyframes vc-flash-success {
    0%   { background: var(--result-area-bg); }
    50%  { background: #86EFAC; }
    100% { background: var(--result-area-bg); }
}

/* --- Select-Hint (Toast unter Progress-Card, wenn Buchung selektiert) --- */
.vc-select-hint {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    color: #92400E;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vc-select-hint .vc-link-btn {
    color: #92400E;
    text-decoration: underline;
}


/* ==========================================================================
   BWA — Betriebswirtschaftliche Auswertung (Paket 4 / Korrektur)
   ========================================================================== */

.vc-budget-header-card {
    margin-bottom: 16px;
}

.vc-budget-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
}

/* View-Toggle (Jahres-/Monatsansicht) */
.bwa-view-toggle {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.bwa-view-toggle-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font: inherit;
    cursor: pointer;
    color: #475569;
    font-size: 13px;
}

.bwa-view-toggle-btn:not(:last-child) {
    border-right: 1px solid #d1d5db;
}

.bwa-view-toggle-btn.active {
    background: #3B82F6;
    color: #ffffff;
}

/* Scrollender Container — Voraussetzung für sticky thead.
   Ohne overflow-y: auto greift `position: sticky; top: 0;` nicht. */
.bwa-table-container {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* BWA-Tabelle */
.bwa-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Spaltenbreiten: Kostenart 32 %, vier Zahlenspalten je 17 %.
   Toggle ist 40 px absolut. */
.bwa-col-name   { width: 32%; }
.bwa-col-num    { width: 17%; }
.bwa-col-toggle { width: 40px; }

/* Zahlenspalten: Überschrift + Werte rechtsbündig mit gleichem rechten Padding. */
.bwa-table th.numeric,
.bwa-table td.numeric {
    text-align: right;
    padding-right: 20px;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.bwa-table th.label,
.bwa-table td.label {
    text-align: left;
    padding-left: 12px;
}

.bwa-table thead th {
    color: #475569;
    font-weight: 600;
    border-bottom: 2px solid #cbd5e1;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Gruppen-Header (z.B. "2 — Sachkosten") */
.bwa-group-row td {
    background: #f8fafc;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #1d1e33;
}

/* Daten-Zeile */
.bwa-zeile td {
    border-top: 1px solid #f1f5f9;
    padding-top: 8px;
    padding-bottom: 8px;
}

.bwa-zeile.is-pk {
    background: #fbfdff;
}

/* Gruppen-Summe (Σ Personalkosten etc.) */
.bwa-group-sum td {
    font-weight: 600;
    background: #f1f5f9;
    border-top: 1px solid #cbd5e1;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Gesamtsumme (SUMME AUSGABEN / EINNAHMEN) */
.bwa-total-sum td {
    font-weight: 600;
    background: #f8fafc;
    border-top: 2px solid #94a3b8;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
}

.bwa-total-sum td.label {
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Ergebnis-Zeile — helles Design, doppelte Trennlinie */
.bwa-ergebnis-row {
    background: #ffffff;
    border-top: 3px double #475569;
}

.bwa-ergebnis-row td {
    font-weight: 600;
    font-size: 15px;
    padding-top: 14px;
    padding-bottom: 14px;
    background: #ffffff;
    border-top: 3px double #475569;
}

.bwa-ergebnis-row td.label {
    color: #1d1e33;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bwa-ergebnis-row .ergebnis-positiv {
    color: #00C9A7;
}

.bwa-ergebnis-row .ergebnis-negativ {
    color: #FC5286;
}

/* Monats-Aufklappung (▸) */
.bwa-toggle-col {
    text-align: center;
}

.bwa-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    padding: 4px 8px;
}

.bwa-toggle:hover {
    color: #1d1e33;
}

.bwa-monat-row td {
    background: #fafbfc;
    color: #475569;
    font-size: 13px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 6px;
    padding-bottom: 6px;
}

.bwa-monat-row td.label {
    padding-left: 40px;
}

.bwa-monat-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bwa-mode-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.bwa-mode-badge.is-ist {
    background: #ecfdf5;
    color: #047857;
}

.bwa-mode-badge.is-plan {
    background: #eff6ff;
    color: #1e40af;
}

/* Cell-Value: identischer Aufbau in editierbaren und nicht-editierbaren Zellen.
   Kein eigenes Padding — der td trägt das gesamte horizontale Padding,
   damit die Zahlen aus allen vier Spalten exakt an der gleichen rechten Kante enden. */
.bwa-table .cell-value {
    display: inline;
    padding: 0;
    margin: 0;
}

/* Editierbare Zelle: nur Hover-Effekt, kein Padding-Unterschied. */
.bwa-table td.editable {
    cursor: pointer;
    position: relative;
}

.bwa-table td.editable:hover {
    background: #eff6ff;
}

/* Subtiler Stift-Indikator in der Ecke (nur on hover). */
.bwa-table td.editable::after {
    content: '✎';
    position: absolute;
    top: 4px;
    left: 6px;
    color: #93c5fd;
    font-size: 10px;
    opacity: 0;
    transition: opacity 150ms;
    pointer-events: none;
}

.bwa-table td.editable:hover::after {
    opacity: 1;
}

/* Edit-Modus: Input füllt die Zelle, gleiche Position wie der Text vorher. */
.bwa-table td.editing {
    padding-top: 4px;
    padding-bottom: 4px;
}

.bwa-edit-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #3b82f6;
    border-radius: 4px;
    font: inherit;
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
    outline: none;
    box-sizing: border-box;
}

/* PK-/Forecast-/Quelle-Farben */
.bwa-pk-cell {
    background: #eff6ff;
    color: #1e40af;
}

.bwa-cell-verteilt {
    color: #64748b;
}

.bwa-fc-plan {
    color: #64748b;
    font-style: italic;
}

.bwa-fc-danger {
    color: #FC5286;
    font-weight: 600;
}

.bwa-fc-ok {
    color: #00C9A7;
}

/* Forecast-Monat mit manuellem Override (statt verteiltem Wert) */
.bwa-forecast-manuell {
    border-left: 2px solid #3B82F6;
}

.vc-pk-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
}

/* Erklärtext beim Überfahren (Rudi 11.10.2026, BWA-Spaltenköpfe): Das title-Attribut trägt
   den Text; gepunktete Unterstreichung und Hilfe-Zeiger zeigen, dass es eine Erklärung gibt. */
.vc-erklaerung {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--text-muted);
    text-underline-offset: 3px;
    cursor: help;
}

/* Rudi 11.10.2026: Die Kostenart führt zu ihren Buchungen (Jahreshochrechnung, BWA) — ruhig im
   Text, Farbe und Unterstreichung erst beim Zeigen bzw. bei Tastaturfokus. */
a.vc-kostenart-link {
    color: var(--text-dark);
    text-decoration: none;
}

a.vc-kostenart-link:hover,
a.vc-kostenart-link:focus-visible {
    color: var(--accent-blue);
    text-decoration: underline;
}


/* ==========================================================================
   BWA — Monatsansicht (Zeitstrahl mit 12 Monatsspalten)
   ========================================================================== */

.bwa-monthview-wrapper {
    max-height: calc(100vh - 320px);
    overflow: auto;       /* sowohl x als auch y */
    position: relative;
}

.bwa-monthview {
    table-layout: fixed;
    min-width: 1100px;
}

.bwa-monthview .bwa-sticky-col {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 2;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    box-shadow: 1px 0 0 #e2e8f0;
}

.bwa-monthview thead .bwa-sticky-col {
    background: #ffffff;
    z-index: 20;     /* doppelt sticky: top + left, muss über anderen THs liegen */
    top: 0;
    left: 0;
}

.bwa-monthview .bwa-monat-col {
    width: 80px;
    min-width: 80px;
}

.bwa-monthview .bwa-gesamt-col {
    width: 110px;
    min-width: 110px;
    background: #f8fafc;
    font-weight: 600;
}

.bwa-monthview thead th.numeric {
    font-size: 12px;
    text-align: right;
    padding-right: 10px;
    font-weight: 500;
}

.bwa-monthview thead th.numeric .bwa-monat-jahr {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 400;
}

/* Cutoff-Monat: dezentere rechte Trennlinie als visuelles Ende der IST-Daten */
.bwa-monthview .bwa-monat-col.is-cutoff {
    border-right: 2px solid #3B82F6;
}

/* Monatsansicht: kompakte Zellen ohne €-Zeichen, einheitlich rechtsbündig */
.bwa-monthview td.numeric {
    padding-right: 10px;
    font-size: 13px;
    text-align: right;
}

/* Editierbare PLAN-Zelle in der Monatsansicht */
.bwa-monthview .bwa-plan-cell-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: right;
    width: 100%;
    font-variant-numeric: lining-nums tabular-nums;
}

.bwa-monthview .bwa-plan-cell-btn:hover {
    background: #eff6ff;
    border-color: #c7d2fe;
}

.bwa-monthview .bwa-plan-input {
    width: 100%;
    padding: 1px 4px;
    border: 1px solid #3b82f6;
    border-radius: 3px;
    font: inherit;
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
}

/* IST-Zelle: explizit nicht editierbar */
.bwa-monthview .bwa-cell-readonly {
    cursor: default;
}

/* Kostenart-Gruppen: Zebra auf Gruppenebene (PLAN + IST teilen sich den Hintergrund).
   Die sticky-Spalte erbt den Background von der jeweiligen TR via inherit weiter unten. */
.bwa-monthview tr.kostenart-odd td  { background: #ffffff; }
.bwa-monthview tr.kostenart-even td { background: #f8fafc; }

/* Trennlinie NUR über der PLAN-Zeile (Beginn der nächsten Kostenart-Gruppe). */
.bwa-monthview tr.plan-row td {
    color: #64748b;
    border-top: 1px solid #e2e8f0;
    padding-top: 6px;
    padding-bottom: 2px;
}

/* KEINE Trennlinie zwischen PLAN und IST der gleichen Kostenart. */
.bwa-monthview tr.ist-row td {
    color: #1d1e33;
    font-weight: 500;
    border-top: none;
    padding-top: 2px;
    padding-bottom: 8px;
}

/* PLAN- und IST-Zeile: identisches Flexbox-Layout in der Sticky-Spalte,
   damit die Badges in beiden Zeilen exakt an der gleichen X-Position sitzen. */
.bwa-monthview tr.plan-row .bwa-sticky-col,
.bwa-monthview tr.ist-row .bwa-sticky-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-left: 16px;
    padding-right: 12px;
}

.bwa-monthview tr.plan-row .bwa-sticky-col {
    font-weight: 500;
    color: #1d1e33;
}

.bwa-monthview tr.ist-row .bwa-sticky-col {
    font-weight: 400;
}

.bwa-sticky-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PLAN/IST-Badges: gleiche Größe, gleiche rechte Kante. */
.bwa-row-type-badge {
    flex: 0 0 auto;
    display: inline-block;
    min-width: 44px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bwa-row-type-badge.plan-badge {
    color: #1e40af;
    background: #eff6ff;
}

.bwa-row-type-badge.ist-badge {
    color: #047857;
    background: #ecfdf5;
}

/* Hauptgruppen-Header in Monatsansicht: kräftiger als die normale Gruppen-Row. */
.bwa-monthview tr.bwa-group-row td,
.bwa-monthview tr.bwa-group-row .bwa-sticky-col {
    font-weight: 600;
    font-size: 14px;
    background: #f1f5f9;
    border-top: 2px solid #94a3b8;
    padding: 10px 12px;
    color: #1d1e33;
}

.bwa-monthview .bwa-cell-empty {
    color: #cbd5e1;
}

/* IST > Plan: Überschreitung im Monat. */
.bwa-monthview td.ist-over-plan {
    color: #FC5286;
    font-weight: 600;
}

.bwa-monthview .bwa-group-row .bwa-sticky-col {
    background: #f8fafc;
}

.bwa-monthview .bwa-total-sum .bwa-sticky-col,
.bwa-monthview .bwa-total-sum td {
    background: #f1f5f9;
}

.bwa-monthview .bwa-ergebnis-row .bwa-sticky-col,
.bwa-monthview .bwa-ergebnis-row td {
    background: #ffffff;
}

/* ==========================================================================
   Abweichungsanalyse (eigener Tab)
   ========================================================================== */

.abw-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 16px;
    background: #f8fafc;
    border-radius: 8px;
}

.abw-controls .vc-label {
    margin: 0;
}

.abw-meta {
    margin-top: 8px;
    padding-left: 4px;
    font-size: 13px;
}

.abw-col-name  { width: 28%; }
.abw-col-num   { width: 15%; }
.abw-col-delta { width: 30%; }
.abw-col-quote { width: 12%; }

.abw-delta-cell {
    padding-right: 16px;
}

.abw-delta-container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.abw-bar-wrapper {
    width: 80px;
    height: 10px;
    background: #f1f5f9;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}

.abw-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 300ms ease;
}

/* Zwei-Farben-Logik: echtes Grün bzw. Rot — gilt nur in der Abweichungsanalyse,
   die globalen --success-color/--danger-color (Pink) bleiben unverändert. */
.abw-bar.bar-positive { background: #16a34a; }
.abw-bar.bar-negative { background: #dc2626; }
.abw-bar.bar-neutral  { background: #e2e8f0; }

.abw-delta-value {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
    min-width: 90px;
    text-align: right;
}

.abw-delta-value.positive { color: #16a34a; }
.abw-delta-value.negative { color: #dc2626; }
.abw-delta-value.neutral  { color: #64748b; }

.abw-quote {
    font-size: 13px;
    font-variant-numeric: lining-nums tabular-nums;
    color: #475569;
    padding-right: 16px;
}

.abw-quote.ok   { color: #64748b; }
.abw-quote.over { color: #dc2626; font-weight: 600; }

/* EndToEndId / Zahlungsreferenz in der Rechnungsfreigabe-Liste — klein, monospace,
   per Ein-Klick komplett selektierbar (zum Übernehmen in die Auszugs-Referenzspalte). */
.vc-e2e {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    user-select: all;
    -webkit-user-select: all;
    word-break: break-all;
}

/* Bankkonten-Verwaltung (Phase 4): Formular-Grid + Aktionen + inaktive Zeile */
.vc-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.vc-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.vc-table tbody tr.vc-row-inactive td {
    color: var(--text-muted);
    background: var(--surface-alt);
}

/* ===========================================================================
   Monats-Kassenbuch (Jahres-/Monatsansicht + Erfassungs-Grid)
   =========================================================================== */
/* Monatsübersicht: ganze Zeile klickbar (Akkordeon auf/zu) */
.kasse-monatszeile {
    cursor: pointer;
    user-select: none;
}
/* aufgeklapptes Kassenblatt: kein Zebra/Hover, randlos eingebettet */
.kasse-blatt-zeile > td {
    padding: 0;
    background: var(--surface-alt);
}
.kasse-blatt-zeile:hover > td {
    background: var(--surface-alt);
}
.kasse-blatt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px 10px 24px;
    font-size: 13px;
}
.kasse-blatt-kopf .numeric {
    font-size: 15px;
    font-weight: 600;
}
.kasse-blatt-table {
    background: var(--card-bg);
}
/* stornierte Buchungszeile: durchgestrichen */
.kasse-storniert td {
    text-decoration: line-through;
}
.kasse-storniert td .badge {
    text-decoration: none;
}
/* Eingabezeilen: ruhiger Hintergrund, kein Zebra */
.kasse-draft-zeile > td {
    background: var(--card-bg);
}
.kasse-draft-zeile:hover > td {
    background: var(--card-bg);
}
.kasse-draft-fehler > td {
    background: var(--error-area-bg);
}
.kasse-zeile-fehler {
    color: var(--error-area-text);
    font-size: 12px;
}
/* Selects in der Kassenblatt-Tabelle: Platz für den nativen Dropdown-Pfeil reservieren,
   damit der Options-Text (z.B. „— Kostenart —") nicht unter dem Pfeil liegt. */
.kasse-blatt-table select {
    padding-right: 26px;
}

/* Onboarding-Hinweis (wenn alle Plan-Werte 0) */
.bwa-onboarding {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: #78350f;
    font-size: 14px;
    line-height: 1.4;
}

.bwa-onboarding-icon {
    font-size: 20px;
    flex: 0 0 auto;
}

.bwa-onboarding-text {
    flex: 1 1 auto;
}

.bwa-onboarding-text em {
    font-style: normal;
    font-weight: 600;
}

.bwa-onboarding-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #78350f;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    flex: 0 0 auto;
}

.bwa-onboarding-close:hover {
    background: #fde68a;
}

/* ==========================================================================
   Dashboard (Paket 5)
   ========================================================================== */

.kpi-card .kpi-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.kpi-bar-wrapper {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.kpi-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 500ms ease;
}

.kpi-bar.green   { background: #16a34a; }
.kpi-bar.yellow  { background: #d97706; }
.kpi-bar.red     { background: #dc2626; }
.kpi-bar.blue    { background: #3B82F6; }

.kpi-value-green { color: #16a34a; }
.kpi-value-red   { color: #dc2626; }

.kpi-status-green  { color: #16a34a; font-weight: 500; }
.kpi-status-yellow { color: #d97706; font-weight: 500; }
.kpi-status-red    { color: #dc2626; font-weight: 500; }

/* Chart: Plan vs. Ist Monatsverlauf */
.chart-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 24px;
}

.chart-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d1e33;
    margin-bottom: 16px;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 4px;
}

.chart-month {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.chart-bar-group {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    width: 100%;
    justify-content: center;
}

.chart-bar {
    width: 14px;
    border-radius: 3px 3px 0 0;
    transition: height 500ms ease;
    cursor: help;
}

.chart-bar.ist { background: #16a34a; }
.chart-bar.plan { background: #3B82F6; }
.chart-bar.plan.plan-future {
    background: rgba(59, 130, 246, 0.35);
    border: 1px dashed #3B82F6;
}

.chart-label {
    font-size: 11px;
    color: #64748b;
    text-align: center;
}

.chart-month.cutoff-month {
    border-right: 2px dashed #3B82F6;
    padding-right: 4px;
}

.chart-month.forecast-month .chart-label {
    color: #94a3b8;
}

.chart-legend {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    font-size: 12px;
    color: #64748b;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-dot.ist { background: #16a34a; }
.legend-dot.plan { background: #3B82F6; }
.legend-dot.plan-future {
    background: rgba(59, 130, 246, 0.35);
    border: 1px dashed #3B82F6;
}

/* Top-Kostenarten-Tabelle im KST-Dashboard */
.dashboard-kostenarten-card {
    margin-bottom: 24px;
}

.dashboard-kostenarten-table tbody tr {
    cursor: pointer;
    transition: background-color 120ms;
}

.dashboard-kostenarten-table tbody tr:hover {
    background: #f8fafc;
}

.dashboard-quote-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.dashboard-quote-bar-wrapper {
    width: 100px;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.dashboard-quote-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 400ms ease;
}

.dashboard-quote-bar.ok      { background: #16a34a; }
.dashboard-quote-bar.warning { background: #d97706; }
.dashboard-quote-bar.over    { background: #dc2626; }

.dashboard-quote-value {
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 500;
    min-width: 60px;
    text-align: right;
}

.dashboard-quote-value.over { color: #dc2626; font-weight: 600; }
.dashboard-quote-value.ok   { color: #64748b; }

/* Kostenarten-Liste (Befund B-11, 20.09.2026): EINE Karte mit Zeilen statt einer eigenen
   Karte je Hauptgruppe. Vorher: .vc-accordion-item mit 16px/24px Polsterung plus 16px
   Abstand und eigenem Schatten — rund 72px je Gruppe, also ~1.000px fuer vierzehn Gruppen;
   sichtbar waren acht. Jetzt 48px je Zeile (Tablet-Mass, Rudi 20.09.) und Trennlinien statt
   vierzehn Schatten.
   Bewusste Abweichung vom Muster: KEINE Zebrastreifen. Aufgeklappte Unterarten schieben
   sich zwischen die Zeilen, damit haette :nth-child() eine Faerbung ergeben, die beim
   Aufklappen springt. Trennlinien fuehren genauso sicher. */
.kostenarten-liste {
    padding: 0;
}
.kostenarten-kopf,
.kostenarten-zeile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
}
.kostenarten-kopf {
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--table-header-bg);
    font-size: 12px;
    font-weight: 500;
    color: var(--table-header-text);
}
.kostenarten-zeile {
    min-height: 48px;
    border-bottom: 1px solid var(--border-light);
}
.kostenarten-zeile.ist-offen {
    background: var(--selected-bg);
    border-bottom-color: transparent;
}
/* Die ganze linke Haelfte ist der Aufklapp-Schalter — ein echtes <button>, damit die
   Tastatur ihn erreicht und ein Screenreader den Zustand ansagt (aria-expanded). */
.kostenarten-zeile-haupt {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.kostenarten-spalte-nummer {
    flex: 0 0 56px;
    text-align: right;
    color: var(--text-muted);
}
.kostenarten-spalte-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-dark);
}
.kostenarten-spalte-unterarten {
    flex: 0 0 240px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.kostenarten-spalte-aktion {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
/* 44px Trefferflaeche fuer die Tablet-Nutzung, ohne die Zeile hoeher zu machen:
   die Schaltflaeche ist 44px hoch, die Zeile 48px. */
.kostenarten-knopf {
    min-height: 44px;
    padding-inline: 4px;
}
/* Hinweisleiste „Gruppen ohne Unterart" (Nachtrag 21.09.2026): Text links, Handlung rechts.
   Auf schmalen Geräten rutscht der Knopf unter den Text, statt ihn zu quetschen. */
.kostenarten-luecken {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kostenarten-luecken-knopf {
    min-height: 44px;
    flex-shrink: 0;
}

/* Leerzustand der Kostenarten-Seite (E-1): zwei Wege nebeneinander, beide 44px hoch. */
.kostenarten-leer-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.kostenarten-leer-aktionen > button {
    min-height: 44px;
}
.kostenarten-unterarten {
    padding: 4px 20px 12px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-light);
}
@media (max-width: 900px) {
    .kostenarten-kopf {
        display: none;
    }
    .kostenarten-zeile {
        flex-wrap: wrap;
        padding-block: 8px;
    }
    .kostenarten-spalte-unterarten,
    .kostenarten-spalte-aktion {
        flex: 1 1 auto;
        justify-content: flex-start;
    }
}

/* Kostenstelle anlegen (Befund B-2/B-3, 20.09.2026): Die Nummer ist eine kurze Zahl und
   braucht keine halbe Kartenbreite, die Finanzierungsart keine volle. Die Karte selbst wird
   ueber die vorhandene Utility vc-maxw-640 begrenzt — kein eigenes Breitenmass hier.
   Feldhoehe/Trefferflaeche bleiben bei .vc-input bzw. .btn-primary: die Tablet-Masse
   (Eingabe 40 px, Schaltflaeche 44 px) gelten projektweit, nicht seitenweise. */
.kst-anlegen-zeile {
    display: flex;
    gap: 16px;
}
.kst-anlegen-zeile > .kst-anlegen-nummer {
    flex: 0 0 140px;
}
.kst-anlegen-zeile > .kst-anlegen-name {
    flex: 1 1 auto;
    min-width: 0;
}
.kst-anlegen-auswahl {
    max-width: 320px;
}
@media (max-width: 560px) {
    .kst-anlegen-zeile {
        flex-direction: column;
        gap: 0;
    }
    .kst-anlegen-zeile > .kst-anlegen-nummer {
        flex: 1 1 auto;
    }
}

/* Haupt-Dashboard: KST-Status-Cards */
/* B-4 (20.09.2026): auto-FILL statt auto-FIT. auto-fit klappt leere Spuren zusammen und
   dehnt die verbleibende Karte auf die volle Zeilenbreite — bei genau EINER Kostenstelle
   lief die Karte deshalb ueber den ganzen Bildschirm. auto-fill haelt die Spurbreite; die
   Obergrenze 380px verhindert zusaetzlich, dass zwei Karten unnoetig breit werden.
   justify-content: start laesst die Karten linksbuendig stehen statt zu zentrieren. */
.kst-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 380px));
    justify-content: start;
    gap: 20px;
}

.kst-status-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: box-shadow 150ms, transform 150ms;
    border: none;
    text-align: left;
    font: inherit;
    color: inherit;
}

.kst-status-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.kst-status-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.kst-status-name {
    flex: 1;
}

.kst-status-name .number {
    font-size: 12px;
    color: #64748b;
}

.kst-status-name .name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1d1e33;
}

/* Kein `white-space: nowrap`: Das Schildchen sitzt in einer Flex-Zeile neben dem
   Kostenstellen-Namen. Mit nowrap kann es nicht unter seine volle Textbreite schrumpfen
   und ragt bei langen Statustexten aus der Karte heraus. Statt dessen bricht der Text
   innerhalb des Schildchens um, begrenzt auf die halbe Kartenbreite. */
.kst-status-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    max-width: 50%;
    text-align: center;
}

.kst-status-badge.green  { background: #ecfdf5; color: #047857; }
.kst-status-badge.yellow { background: #fef3c7; color: #92400e; }
.kst-status-badge.red    { background: #fee2e2; color: #b91c1c; }
.kst-status-badge.gray   { background: #f1f5f9; color: #64748b; }

.kst-status-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    font-variant-numeric: lining-nums tabular-nums;
}

.kst-status-kpi-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.kst-status-kpi-value {
    font-size: 15px;
    font-weight: 600;
    color: #1d1e33;
}

.kst-status-progress-wrapper {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.kst-status-progress {
    height: 100%;
    border-radius: 3px;
    transition: width 500ms ease;
}

.kst-status-progress.green  { background: #16a34a; }
.kst-status-progress.yellow { background: #d97706; }
.kst-status-progress.red    { background: #dc2626; }

/* Nächste Termine (Rudi, 28.09.2026): eigene Spalte rechts neben den Kennzahlen — in der ersten
   Zeile also direkt neben „Forecast“. Ist die Karte schmal (Handy, enges Raster), rutscht die
   Spalte unter die Kennzahlen. Gemessen wird die Karte selbst (Container-Abfrage), nicht der
   Bildschirm: Dieselbe Karte steht in Rastern unterschiedlicher Breite. */
.kst-status-card {
    container-type: inline-size;
}

.kst-status-inhalt.mit-terminen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 10px 16px;
}

/* Die Terminspalte besteht aus <span> (im Knopf nur Phrasing-Content, Review 28.09.2026) —
   Überschrift, Leer-Hinweis und „+N weitere“ stehen deshalb ausdrücklich als Block. */
.kst-status-termine,
.kst-status-termine > .kst-status-kpi-label {
    display: block;
}

.kst-status-termine {
    border-left: 1px solid var(--border-color);
    padding-left: 12px;
    min-width: 0;
}

.kst-termine-liste {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kst-termin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
}

.kst-termin-datum {
    font-weight: 600;
    color: var(--text-dark);
    font-variant-numeric: lining-nums tabular-nums;
}

.kst-termin-art {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Farbe nie allein (DESIGN_SYSTEM §7): Rot und Orange tragen zusätzlich das Wort. */
.kst-termin-hinweis {
    font-weight: 500;
    margin-left: 4px;
}

.kst-termin.ueberfaellig .kst-termin-datum,
.kst-termin.ueberfaellig .kst-termin-hinweis {
    color: var(--danger-color);
}

.kst-termin.bald .kst-termin-datum,
.kst-termin.bald .kst-termin-hinweis {
    color: #b45309;
}

.kst-termin.bald,
.kst-termin.ueberfaellig {
    border-left: 3px solid var(--warning-color);
    padding-left: 6px;
}

.kst-termin.ueberfaellig {
    border-left-color: var(--danger-color);
}

.kst-termin-leer,
.kst-termine-weitere {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

@container (max-width: 319px) {
    .kst-status-inhalt.mit-terminen {
        grid-template-columns: minmax(0, 1fr);
    }

    .kst-status-termine {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border-color);
        padding-top: 8px;
    }
}

/* ==========================================================================
   Nachweis-Tab (Paket 7) — Akkordeon + Buchungs-Checkboxen
   ========================================================================== */

.nachweis-akkordeon {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nachweis-hauptgruppe {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.nachweis-hauptgruppe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    background: #F1F5F9;
    font-weight: 600;
}

.nachweis-hauptgruppe-header .chevron {
    width: 16px;
    display: inline-block;
}

.nachweis-hauptgruppe-header .sum {
    color: var(--text-muted, #6B7280);
    font-weight: 500;
}

.nachweis-kostenart {
    padding: 12px 18px 16px 18px;
    border-top: 1px solid #e2e8f0;
}

.nachweis-kostenart-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
    font-weight: 600;
    gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}

.nachweis-kostenart-header .title {
    flex: 1 1 240px;
    min-width: 200px;
}

.nachweis-kostenart-header .chevron {
    width: 16px;
    display: inline-block;
}

.nachweis-kostenart-header .sum {
    font-weight: 500;
}

.nachweis-kostenart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 999px;
    user-select: none;
}

.nachweis-kostenart-toggle.is-on {
    background: #dcfce7;
    border-color: #86efac;
    color: #15803d;
}

.nachweis-kostenart-toggle.is-on:hover {
    background: #bbf7d0;
}

.nachweis-kostenart-toggle.is-off {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.nachweis-kostenart-toggle.is-off:hover {
    background: #fecaca;
}

.nachweis-buchung {
    display: grid;
    grid-template-columns: 24px 100px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 4px 0;
}

.nachweis-buchung.excluded {
    opacity: 0.5;
    text-decoration: line-through;
}

.nachweis-buchung.excluded .betrag {
    color: var(--text-muted, #6B7280);
}

.nachweis-buchung .datum {
    color: var(--text-muted, #6B7280);
    font-variant-numeric: tabular-nums;
}

.nachweis-buchung .betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.nachweis-controls {
    padding: 4px 0;
}

/* Hauptgruppen-Header: Title links, Sum mittig, Status-Badge rechts */
.nachweis-hauptgruppe-header .title {
    flex: 1 1 240px;
    min-width: 200px;
}

.nachweis-hauptgruppe-header {
    gap: 12px;
    flex-wrap: wrap;
}

/* Status-Indikator (✅ ⚠ ❌ X/Y) — Farben aus Spec Korrektur */
.nachweis-status {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nachweis-status.all-relevant {
    color: #16a34a;
    font-weight: 500;
}
.nachweis-status.partial {
    color: #d97706;
    font-weight: 600;
}
.nachweis-status.none-relevant {
    color: #dc2626;
    font-weight: 600;
}

/* "Weitere X Buchungen laden" — dezenter Link-Button am Listenende */
.nachweis-mehr-laden {
    display: inline-flex;
    background: none;
    border: 1px dashed #cbd5e1;
    color: #3B82F6;
    cursor: pointer;
    padding: 6px 12px;
    margin-top: 8px;
    font-size: 13px;
    border-radius: 6px;
}
.nachweis-mehr-laden:hover {
    background: #F1F5F9;
    border-style: solid;
}

/* Download-Karten (Variante A): finaler Nachweis + getrennter, gewarnter Entwurf */
.nachweis-download-card h3,
.nachweis-entwurf-card h4 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nachweis-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.nachweis-entwurf-warnung {
    color: #b45309;
}

/* KPI-Karten: kleine "von X €"-Untersumme */
.kpi-card .kpi-sub-of {
    font-size: 12px;
    color: var(--text-muted, #6B7280);
}

/* Jahres-Auswahl: wiederverwendbares Jahr-Dropdown in den Tabs (BWA, Personal, …) */
.jahres-auswahl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.jahres-auswahl .jahr-select {
    min-width: 90px;
    font-weight: 500;
}

/* BWA: Empty-State, wenn fuer das gewaehlte Jahr noch kein Zeitraum existiert */
.bwa-empty-jahr {
    text-align: center;
    padding: 32px 20px;
}

.bwa-empty-jahr h3 {
    margin: 0 0 8px 0;
    font-weight: 600;
}

.bwa-empty-jahr p {
    margin: 8px 0;
    color: var(--text-muted, #6B7280);
}

.bwa-empty-jahr .vc-text-muted {
    font-size: 13px;
}

.bwa-empty-jahr-actions {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}

/* Sub-Auswahl wenn mehrere Zeitraeume im selben Jahr existieren */
.zeitraum-sub-auswahl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.weiteren-zeitraum-link {
    background: none;
    border: none;
    color: #3B82F6;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
    text-decoration: underline;
}

.weiteren-zeitraum-link:hover {
    color: #1D4ED8;
}

/* BWA-Monatsansicht: Dual-Range-Zeitschieber */
.bwa-monthrange-card {
    padding: 14px 18px;
}

.bwa-monthrange-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.bwa-monthrange-label {
    color: var(--text-muted, #6B7280);
}

.bwa-monthrange-reset {
    margin-left: auto;
    background: none;
    border: 1px solid #e2e8f0;
    color: #3B82F6;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.bwa-monthrange-reset:hover {
    background: #F1F5F9;
    border-color: #cbd5e1;
}

.bwa-monthrange-reset.is-active {
    background: #dbeafe;
    border-color: #3B82F6;
    color: #1D4ED8;
}

/* BWA-Monatsansicht: Außerhalb des Zuwendungszeitraums liegende Monatsspalten
   werden mit grauem Hintergrund + kleinerer Schrift markiert, damit klar wird,
   dass dort nur PK-Vorschau bzw. Ist-Buchungen erscheinen, kein Plan. */
.bwa-monthview th.is-ausserhalb,
.bwa-monthview td.is-ausserhalb {
    background: #f8fafc;
    color: #94a3b8;
}
.bwa-monthview th.is-ausserhalb {
    border-top: 2px dashed #cbd5e1;
}

/* BWA-Jahresansicht: Quartals-Filter Pill-Toggle */
.bwa-quartal-card {
    padding: 10px 18px;
}

.bwa-quartal-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bwa-quartal-label {
    color: var(--text-muted, #6B7280);
    font-size: 13px;
    margin-right: 4px;
}

.bwa-quartal-btn {
    background: none;
    border: 1px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
}

.bwa-quartal-btn:hover {
    background: #F1F5F9;
}

.bwa-quartal-btn.active {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #ffffff;
}

.bwa-quartal-info {
    margin-left: 12px;
    font-size: 12px;
    font-style: italic;
}

.bwa-monthrange-slider {
    position: relative;
    height: 28px;
    margin: 4px 8px 0 8px;
}

.bwa-monthrange-slider .slider-track-bg,
.bwa-monthrange-slider .slider-track-active {
    position: absolute;
    top: 12px;
    height: 4px;
    border-radius: 2px;
    pointer-events: none;
}

.bwa-monthrange-slider .slider-track-bg {
    left: 0;
    right: 0;
    background: #e2e8f0;
}

.bwa-monthrange-slider .slider-track-active {
    background: #3B82F6;
}

/* Beide range-Inputs übereinander, transparente Tracks; pointer-events nur auf die Thumbs */
.bwa-monthrange-slider .slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    pointer-events: none;
}

.bwa-monthrange-slider .slider-thumb::-webkit-slider-runnable-track {
    background: transparent;
    height: 28px;
}

.bwa-monthrange-slider .slider-thumb::-moz-range-track {
    background: transparent;
    height: 28px;
    border: none;
}

.bwa-monthrange-slider .slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #3B82F6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: grab;
    margin-top: 5px;
}

.bwa-monthrange-slider .slider-thumb::-webkit-slider-thumb:active {
    cursor: grabbing;
    background: #3B82F6;
}

.bwa-monthrange-slider .slider-thumb::-moz-range-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #3B82F6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: grab;
}

.bwa-monthrange-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted, #6B7280);
    margin: 4px 8px 0 8px;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Mehrjahresvergleich-Tab
   ========================================================================== */

.mjv-jahre-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 18px 12px 18px;
}

.jahr-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #1D1E33;
    transition: all 150ms;
    user-select: none;
}

.jahr-pill.active {
    background: #3B82F6;
    color: white;
    border-color: #3B82F6;
}

.jahr-pill.available {
    background: #ffffff;
    color: #1D1E33;
    border-color: #e2e8f0;
}

.jahr-pill.available:hover {
    border-color: #3B82F6;
    background: #F1F5F9;
}

.jahr-pill.unavailable {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #f1f5f9;
    cursor: default;
    opacity: 0.5;
}

.jahr-pill:disabled {
    cursor: default;
}

.mjv-delta-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}

.delta-positive-expense { color: #dc2626; font-weight: 600; }
.delta-negative-expense { color: #16a34a; font-weight: 600; }
.delta-positive-income  { color: #16a34a; font-weight: 600; }
.delta-negative-income  { color: #dc2626; font-weight: 600; }
.delta-neutral          { color: var(--text-muted, #6B7280); }

/* ============================================================
   Fristen
   ============================================================ */

.vc-fristen-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.frist-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 24px 0 8px;
}
.frist-section-title--rot   { color: var(--frist-rot); }
.frist-section-title--gelb  { color: var(--frist-gelb); }
.frist-section-title--gruen { color: var(--frist-gruen); }

.frist-card {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 14px 18px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow 150ms;
    border-left: 4px solid var(--border-color, #e5e7eb);
}
.frist-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.frist-card.ueberfaellig { border-left-color: var(--frist-rot); }
.frist-card.erinnerung   { border-left-color: var(--frist-gelb); }
.frist-card.anstehend    { border-left-color: var(--frist-gruen); }
.frist-card.erledigt {
    opacity: 0.6;
}
.frist-card.erledigt .frist-bezeichnung { text-decoration: line-through; }

.frist-hauptinfo { flex: 1; min-width: 0; }
.frist-bezeichnung {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}
.frist-details {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.frist-trenner { margin: 0 4px; opacity: 0.6; }

.frist-datum {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    min-width: 90px;
    text-align: right;
}
.frist-tage {
    font-size: 13px;
    min-width: 110px;
    text-align: right;
}
.frist-card.ueberfaellig .frist-tage { color: var(--frist-rot); font-weight: 600; }
.frist-card.erinnerung   .frist-tage { color: var(--frist-gelb); font-weight: 500; }

.frist-betrag {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    min-width: 110px;
    text-align: right;
    color: var(--text-dark);
}

.frist-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}
.btn-mini {
    font-size: 12px;
    padding: 4px 10px;
}
.btn-danger-text {
    color: var(--frist-rot);
}

/* Sidebar-Badge an der NavMenu-Frist-Zeile */
.vc-nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    padding: 0 6px;
}
.vc-nav-badge--urgent  { background: var(--frist-rot); }
.vc-nav-badge--warning { background: var(--frist-gelb); }

/* Dashboard-Sektion */
.anstehende-fristen-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.anstehende-frist {
    display: grid;
    grid-template-columns: 1fr 100px 110px;
    gap: 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    align-items: center;
    background: var(--surface-alt);
}
.anstehende-frist .frist-bezeichnung { font-size: 13px; }
.anstehende-frist .frist-datum { font-size: 13px; }
.anstehende-frist .frist-tage  { font-size: 13px; }
.anstehende-frist.ueberfaellig { border-left-color: var(--frist-rot); }
.anstehende-frist.ueberfaellig .frist-tage { color: var(--frist-rot); font-weight: 600; }
.anstehende-frist.erinnerung   { border-left-color: var(--frist-gelb); }
.anstehende-frist.erinnerung   .frist-tage { color: var(--frist-gelb); }
.anstehende-frist.anstehend    { border-left-color: var(--frist-gruen); }

.vc-card-action {
    margin-left: auto;
    font-size: 13px;
    color: var(--accent-blue);
    text-decoration: none;
}
.vc-card-action:hover { text-decoration: underline; }

/* ==========================================================================
   VcToast — Benachrichtigungen (Phase 2B, Ersatz für MudBlazor-Snackbar)
   Overlay oben rechts, Auto-Dismiss ~5 s, Hover pausiert (Timer im VcToastHost).
   Farben strikt aus dem Design-System: Erfolg #16a34a, Fehler #dc2626,
   Warnung --warning-color, Info --info-color. Radius/Shadow wie Cards.
   ========================================================================== */
.vc-toast-host {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    pointer-events: none; /* leere Fläche klickt durch; einzelne Toasts reaktivieren */
}

.vc-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    border-radius: 12px;
    border-left: 4px solid var(--_vc-toast-akzent, var(--info-color));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 12px 14px;
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.4;
    animation: vc-toast-in 160ms ease-out;
}

.vc-toast--erfolg  { --_vc-toast-akzent: #16a34a; }
.vc-toast--fehler  { --_vc-toast-akzent: #dc2626; }
.vc-toast--warnung { --_vc-toast-akzent: var(--warning-color); }
.vc-toast--info    { --_vc-toast-akzent: var(--info-color); }

.vc-toast-icon {
    flex: 0 0 auto;
    color: var(--_vc-toast-akzent, var(--info-color));
    font-weight: 600;
}

.vc-toast-text {
    flex: 1 1 auto;
    font-weight: 500;
    word-break: break-word;
}

.vc-toast-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.vc-toast-close:hover { color: var(--text-dark); }

@keyframes vc-toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .vc-toast { animation: none; }
}

/* ==========================================================================
   VcDialog — modaler Dialog-Host (Phase 2C, Ersatz für MudDialog/MudDialogProvider)
   Karte + Backdrop; Stapel/Fokus/ESC im VcDialogHost + app.js. Optik: Design-System.
   ========================================================================== */
.vc-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1300;
}
/* Der oberste (aktive) Dialog liegt über den darunterliegenden. */
.vc-dialog-backdrop--aktiv { z-index: 1310; }

.vc-dialog-card-wrap {
    display: flex;
    width: 100%;
    max-width: 640px; /* Medium (Default) */
}
.vc-dialog--small  { max-width: 420px; }
.vc-dialog--medium { max-width: 640px; }
.vc-dialog--large  { max-width: 900px; }
.vc-dialog--xlarge { max-width: min(1240px, calc(100vw - 48px)); }

/* Nur im XL-Dialog (heute allein der CSV-Assistent): mehr Innenabstand und ein
   fester Zeilenabstand zwischen den Bloecken — Vorschau, Karten, Summe standen
   zu dicht (Sichtpruefung Rudi, 27.08.2026). */
.vc-dialog--xlarge .vc-dialog-body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vc-dialog-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 40px);
    outline: none;
    animation: vc-dialog-in 160ms ease-out;
}

.vc-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 0;
}
.vc-dialog-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
}
.vc-dialog-x {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.vc-dialog-x:hover { color: var(--text-dark); }

.vc-dialog-body {
    padding: 16px 20px;
    overflow-y: auto;
}
.vc-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 20px 16px;
}

@keyframes vc-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .vc-dialog-card { animation: none; }
}

/* ==========================================================================
   VcAutocomplete — Freitext-Feld mit Vorschlags-Dropdown (Phase 2D, Ersatz für
   MudAutocomplete). Natives Input und Vorschläge in der Popover-Top-Layer.
   ========================================================================== */
.vc-autocomplete {
    position: relative;
    min-width: 0;
}
.vc-kostenart-auswahl { width: 100%; }
.vc-autocomplete-leer, .vc-kostenart-gruppe { padding: 8px 10px; color: var(--ui-muted); font-size: 12px; }
.vc-kostenart-gruppe { font-weight: 600; }
.vc-autocomplete-liste {
    position: fixed;
    inset: auto;
    z-index: 20;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.vc-autocomplete-option {
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
}
.vc-autocomplete-option:hover {
    background: var(--hover-bg);
}
/* T-041 (Rudi, 22.10.2026): Die per Tastatur angewählte Option war mit dem Hover-Grau kaum vom Rest zu
   unterscheiden. Aktiv = heller Primärton, dunkle Schrift, Linksbalken in Primärblau, SemiBold (max. 600). */
.vc-autocomplete-option--aktiv,
.vc-autocomplete-option--aktiv:hover {
    background: #DBEAFE;
    color: var(--text-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary, #3B82F6);
}

/* ===========================================================================
   Hilfsklassen statt style="…"-Attribute   (P2-7, Schritt 2, ab 02.08.2026)
   ---------------------------------------------------------------------------
   Zweck: Die CSP soll `style-src 'unsafe-inline'` verlieren. Diese Direktive ist
   BINÄR — solange auch nur EIN style="…"-Attribut im Markup steht, muss die
   Erlaubnis bleiben und ein Teilumbau bringt sicherheitstechnisch nichts.

   ZWEI SORTEN, und die Unterscheidung ist der Kern:

   (a) Freistehende Hilfsklassen (Abstände, Schriftgrößen). Sie wirken dort, wo
       keine spezifischere Regel dieselbe Eigenschaft setzt — das ist bei den
       allermeisten <div>/<p> der Fall.

   (b) Modifier IM Kontext, wenn eine Bestandsregel dieselbe Eigenschaft belegt.
       Beispiel: `.vc-table thead th` setzt `text-align: left`. Eine freistehende
       `.vc-text-center` hätte die niedrigere Spezifität und würde LAUTLOS
       verlieren — Markup sauber, Spalte trotzdem linksbündig. Deshalb folgen
       Tabellenzellen dem Muster, das der Bestand schon kennt (`.numeric`), statt
       über `!important` oder doppelte Selektoren gewonnen zu werden.

   Nachgewiesen wird jede Ersetzung mit LayoutRegressionTests (VC_LAYOUT=1): der
   Vergleich meldet jede Verschiebung auf den halben Pixel. Kein Verlass auf
   Sichtprüfung — 4px fallen niemandem auf, dem Vergleich schon.
   =========================================================================== */

/* --- Abstände: ausschliesslich Stufen des 4px-Grids (DESIGN_SYSTEM §4.2) --- */
.vc-m-0    { margin: 0; }
.vc-mt-8   { margin-top: 8px; }
.vc-mt-12  { margin-top: 12px; }
.vc-mt-16  { margin-top: 16px; }
.vc-mt-24  { margin-top: 24px; }
.vc-mb-8   { margin-bottom: 8px; }
.vc-mb-16  { margin-bottom: 16px; }
/* .vc-mb-24 gestrichen am 03.08.2026: Jede der zwoelf Fundstellen sass auf einer
   `.vc-card`, und die setzt `margin-bottom: 24px` bereits selbst — die Klasse war dort
   wirkungslos. Schon das ersetzte `style="margin-bottom:24px"` war es. Wer sie wieder
   braucht, legt sie neu an; auf Vorrat steht hier nichts. */
.vc-ml-8   { margin-left: 8px; }

/* --- Schriftgrössen: nur die im Markup tatsächlich vorkommenden Stufen --- */
.vc-fs-11  { font-size: 11px; }
.vc-fs-12  { font-size: 12px; }
.vc-fs-13  { font-size: 13px; }

/* --- Textausrichtung AUSSERHALB von Tabellen ---
   In Tabellen NICHT verwenden: dort gewinnt `.vc-table thead th`. Für Zellen
   die Modifier weiter unten nehmen. --- */
.vc-text-left   { text-align: left; }
.vc-text-center { text-align: center; }
.vc-text-right  { text-align: right; }

/* --- Tabellenzellen: gleiche Bauart wie das vorhandene `.numeric` ---
   `.numeric` (rechtsbündig) gibt es bereits und wird weiterverwendet; hier kommt
   nur die zentrierte Variante dazu. Spezifität identisch zu `.numeric`, damit sie
   `.vc-table thead th { text-align: left }` sicher schlägt. --- */
.vc-table thead th.zentriert,
.vc-table tbody td.zentriert { text-align: center; }

/* --- Karten-Zwischenüberschrift ---
   Ersetzt das mehrfach kopierte `font-size:16px; font-weight:600; margin-bottom:16px`.
   Bewusst benannt statt aus drei Hilfsklassen zusammengesetzt: es ist ein
   wiederkehrendes Gestaltungselement, kein zufälliges Bündel. --- */
.vc-card-subhead { font-size: 16px; font-weight: 600; margin-bottom: 16px; }

/* ===========================================================================
   Etappe 2 (02.08.2026) — Spaltenbreiten, Abstände, Zustandsfarbe
   =========================================================================== */

/* --- Spaltenbreiten in Tabellen ---
   Freistehend zulässig, und das ist GEMESSEN, nicht vermutet: Keine Bestandsregel setzt
   `width` auf `.vc-table`-Zellen. Die vorhandenen Breitenregeln (`.bwa-col-*`, `.abw-col-*`,
   `.vc-zeitstrahl-*-col`) sind über ihren Tabellen-Präfix auf andere Tabellen begrenzt und
   können hier nicht gewinnen. Damit gilt hier NICHT die Spezifitätsfalle, die bei
   `text-align` und `color` zuschlägt.

   Die Werte sind exakt die des bisherigen Markups. Sie liegen teilweise neben dem
   4px-Grid (z.B. 110, 130, 170) — bewusst unverändert übernommen: Spaltenbreiten aufs
   Grid zu ziehen wäre eine Gestaltungsänderung, und die gehört nicht in einen
   CSP-Umbau. Angelegt ist nur, was diese Etappe braucht. --- */
.vc-w-40  { width: 40px; }
.vc-w-60  { width: 60px; }
.vc-w-80  { width: 80px; }
.vc-w-90  { width: 90px; }
.vc-w-110 { width: 110px; }
.vc-w-120 { width: 120px; }
.vc-w-130 { width: 130px; }
.vc-w-140 { width: 140px; }
.vc-w-160 { width: 160px; }
.vc-w-170 { width: 170px; }
.vc-w-200 { width: 200px; }
.vc-w-210 { width: 210px; }
.vc-w-230 { width: 230px; }
.vc-w-260 { width: 260px; }

/* --- Weitere Abstände ---
   `.vc-mb-0` ist das Gegenstück zu Bestandsregeln, die einen Abstand SETZEN: `.vc-form-row`
   bringt `margin-bottom: 16px` mit derselben Spezifität (0,1,0) mit. Gewonnen wird das
   allein über die Reihenfolge — dieser Block steht am Dateiende — nicht über `!important`.
   `.vc-mb-10` liegt neben dem 4px-Grid; der Bestand hat dort 10px, und das Angleichen auf
   8 oder 12 wäre eine Gestaltungsänderung. --- */
.vc-mb-0  { margin-bottom: 0; }
.vc-mb-10 { margin-bottom: 10px; }

/* --- Anzeige-Modus --- */
.vc-inline-block { display: inline-block; }
.vc-hidden       { display: none; }

/* --- Kennzahl im Seitenkopf (Kassenbestand) --- */
.vc-kennzahl { font-size: 1.6rem; }

/* --- Modifier zu `.vc-action-row` (setzt gap:8px und flex-wrap:wrap) ---
   Gleiche Spezifität wie die Grundregel, gewinnen über die Reihenfolge. `--eng` ist die
   6px-Variante, die im Bestand mehrfach inline stand. --- */
.vc-action-row--eng      { gap: 6px; }
.vc-action-row--rechts   { justify-content: flex-end; }
.vc-action-row--verteilt { justify-content: space-between; }

/* --- Kompakte Auswahl in einer Tabellenzelle ---
   Als Modifier zu `.vc-input`, weil er dessen Polsterung und Schriftgröße überschreibt. --- */
.vc-input--kompakt {
    display: inline-block;
    max-width: 180px;
    padding: 6px 26px 6px 8px;
    font-size: 13px;
}

/* --- Detailzeile: Zelle ohne Polsterung ---
   Kontext-Modifier, kein freistehendes `.vc-p-0`: `.vc-table tbody td` setzt `padding`
   mit Spezifität (0,1,2) und schlüge jede Einzelklasse. --- */
.vc-table tbody td.detailzelle { padding: 0; }



/* ===========================================================================
   Etappe 3 (02.08.2026) — die SuperAdmin-Verwaltungsseiten
   =========================================================================== */

/* --- Fortsetzung der Breiten und Abstände ---
   6px und 10px liegen neben dem 4px-Grid; der Bestand hat dort diese Werte und ein
   Angleichen waere eine Gestaltungsaenderung. --- */
.vc-w-100 { width: 100px; }
.vc-w-150 { width: 150px; }
.vc-w-180 { width: 180px; }
.vc-mt-6  { margin-top: 6px; }
.vc-mt-10 { margin-top: 10px; }
.vc-mb-12 { margin-bottom: 12px; }
.vc-fs-14 { font-size: 14px; }
.vc-nowrap { white-space: nowrap; }

/* --- Höchstbreiten der Formularkarten --- */
.vc-maxw-560 { max-width: 560px; }
.vc-maxw-620 { max-width: 620px; }
.vc-maxw-640 { max-width: 640px; }

/* --- Rücklink über der Seitenüberschrift --- */
.vc-ruecklink { font-size: 13px; color: #3B82F6; text-decoration: none; }

/* --- Reiterleiste der Mandanten-Detailseite ---
   `.vc-tab` traegt den INAKTIVEN Zustand, `--aktiv` ueberschreibt drei Eigenschaften.
   Gleiche Spezifitaet, gewonnen ueber die Reihenfolge. --- */
.vc-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e2e8f0; margin-bottom: 16px; }
.vc-tab {
    border: none;
    background: none;
    padding: 8px 14px;
    color: #64748b;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.vc-tab--aktiv { font-weight: 600; color: #1D1E33; border-bottom-color: #3B82F6; }

/* --- Kontrollkästchen mit Beschriftung in einer Zeile --- */
.vc-checkbox-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

/* --- Knopfzeile ---
   Bewusst NICHT `.vc-action-row`: die bringt zusaetzlich `align-items: center` und
   `flex-wrap: wrap` mit. Beides waere hier eine Aenderung, keine Ersetzung. --- */
.vc-button-zeile { display: flex; gap: 8px; }

/* --- Einmalpasswort zum Abschreiben ---
   Vier Fundstellen (Mandanten-Kontrollzentrum, Benutzerverwaltung, Mandant anlegen,
   Mandant-Detail), identische Eigenschaften in drei verschiedenen Zeilenumbrüchen —
   der klarste Fall von kopiertem Inline-Stil im ganzen Umbau. --- */
.vc-passwort-anzeige {
    font-family: 'Consolas', monospace;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    user-select: all;
}

/* --- Engere Zwischenüberschrift (8px statt 16px) --- */
.vc-card-subhead--eng { margin-bottom: 8px; }

/* --- Kompaktes Auswahlfeld in Tabellenzellen --- */
.vc-input--eng { padding: 4px 8px; }

/* --- Gefahrenbereich („Mandant löschen") --- */
.vc-card--gefahr      { border: 1px solid #fecaca; }
.vc-text-gefahr       { color: #b91c1c; }
.btn-primary--gefahr  { background: #b91c1c; }
.vc-liste-eingerueckt { margin: 4px 0 0 18px; }

/* --- Hinweisfelder: EXAKTE Bestandswerte ---
   BEFUND, gemessen am 02.08.2026: Die Verwaltungsseiten tragen fuenf inline gebaute
   Hinweisfeld-Varianten, die sich mit den vorhandenen Modifiern ueberschneiden, aber
   keiner davon gleichen:

     .vc-alert--error   = #FEF2F2 / #DC2626 / #FECACA
     --gefahr (unten)   = #fef2f2 / #b91c1c / #fecaca   (gleicher Grund, anderes Rot)
     --bestaetigung     = #FEF2F2 / #991b1b / #fecaca   (drittes Rot)
     .vc-alert--warning = #FFFBEB / #92400E / #FED7AA
     --folgenhinweis    = #FFFBEB / #92400E / #fde68a   (gleicher Text, anderer Rahmen)
     --achtung          = #fff7ed / #c2410c / #FED7AA   (gleicher Rahmen, anderer Text)

   Also DREI Rottoene fuer dieselbe Aussage und zwei Orangetoene. Sie sind hier bewusst
   exakt uebernommen und NICHT zusammengelegt: Das Zusammenlegen aendert sichtbar die
   Farbe und ist damit eine Gestaltungsentscheidung — die gehoert in einen eigenen
   Commit mit eigenem Nachweis, nicht als stiller Nebeneffekt in einen CSP-Umbau.
   Erst dann sind aus fuenf Klassen wieder zwei. --- */
.vc-alert--erfolg        { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.vc-alert--achtung       { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.vc-alert--folgenhinweis { background: #FFFBEB; color: #92400E; border: 1px solid #fde68a; }
.vc-alert--bestaetigung  { background: #FEF2F2; color: #991b1b; border: 1px solid #fecaca; }
.vc-alert--gefahr        { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Mehrzeiliger Freitext (z. B. Anschrift des Vertragspartners): Zeilenumbrüche aus den Daten
   bleiben erhalten, überlange Zeilen brechen trotzdem am Rand. */
.vc-mehrzeilig { white-space: pre-line; }

/* --- Flex-Anteil für Formularfelder in einer Zeile ---
   Ersetzt das `flex:1`, das bisher als Inline-Stil durch den `Style`-Parameter von
   `VcFormField` gereicht wurde. Freistehend zulässig, gemessen: Die beiden Regeln mit
   höherer Spezifität auf `.vc-form-group` (`.vc-filter-grid …`)
   setzen ausschliesslich `margin-bottom` und können `flex` nicht schlagen. --- */
.vc-flex-1 { flex: 1; }

/* ===========================================================================
   Etappe 4 (02.08.2026) — die übrigen Mandanten-Seiten mit Aufnahme
   =========================================================================== */

.vc-w-64 { width: 64px; }

/* --- Text in der Zweitfarbe --- */
.vc-text-sekundaer { color: var(--text-secondary); }

/* --- Halbfett ohne eigenes Element ---
   Ersetzt `style="font-weight:600"` auf einem <span>. Bewusst kein <strong>: das
   änderte die Semantik (Betonung) und damit die Ausgabe von Screenreadern. --- */
.vc-halbfett { font-weight: 600; }

/* --- Auswahlzeile mit Kontrollkästchen unter einem Formularfeld ---
   Nicht `.vc-checkbox-zeile` (Etappe 3): die setzt `margin-bottom: 4px` statt
   `margin-top: 8px` und bringt weder Zeiger noch Schriftgröße mit. --- */
.vc-auswahl-zeile {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}
/* Das Kästchen selbst in Browser-Standardgröße (~13 px) war neben 14-px-Text kaum
   zu erkennen (Testbefund 26.09., Nr. 3). */
.vc-auswahl-zeile input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--accent-blue);
}

/* --- Modifier zu Bestandsregeln --- */
.vc-action-row--gepolstert { padding: 0 16px 16px; }
.vc-form-row--unten        { align-items: end; }

/* --- Senkrechter Stapel mit engem Abstand --- */
.vc-stapel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

/* --- Aufklappbarer Kasten (Kostenstellen-Zugriff je Benutzer) ---
   BEFUND: Es gibt bereits eine Akkordeon-Familie (`.vc-accordion-item/-header/-content`,
   Zeile 904 ff.) — mit ANDEREN Werten: Polsterung 16px/24px statt 12px/16px, kein
   Rahmen, anderer Abstand. Sie hier zu verwenden wäre keine Ersetzung, sondern eine
   Gestaltungsänderung. Deshalb eigene Klassen mit den Bestandswerten; das Zusammenlegen
   der beiden Familien ist eine Design-Entscheidung und gehört in einen eigenen Schritt —
   dieselbe Begründung wie bei den fünf Hinweisfeld-Varianten aus Etappe 3. --- */
.vc-akkordeon-box {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.vc-akkordeon-box-kopf {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface-alt);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
}
.vc-akkordeon-box-inhalt { padding: 16px; }

/* --- Etappe 4b: die letzten Seiten mit Aufnahme --- */

.vc-maxw-520 { max-width: 520px; }

/* Prozentbreite einer Tabellenspalte (Muster-Spalte der Lernregeln). */
.vc-w-38p { width: 38%; }

/* Polsterung für Inhalt in einer randlosen Karte. `.vc-card--table` setzt `padding: 0`,
   damit die Tabelle bündig sitzt — alles andere darin braucht seine Polsterung selbst.
   Hiess bis 02.08.2026 `.vc-tabellen-hinweis`; umbenannt, als in Etappe 5 mit dem
   KPI-Raster eine dritte Fundstelle desselben Werts dazukam, die kein Hinweistext ist.
   Zwei Klassen mit identischer Deklaration nebeneinander waeren genau die Drift, die
   dieser Umbau sonst gerade aufraeumt. */
.vc-karteninhalt-polster { padding: 0 24px 16px; }

/* Filterzeile: Modifier zu `.vc-form-row` (justify-content:space-between,
   align-items:center). Beide werden hier bewusst umgekehrt. */
.vc-form-row--filterzeile {
    justify-content: flex-start;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* --- Etappe 5: eingebettete Komponenten der Kostenstellen-Seite --- */

.vc-fs-15 { font-size: 15px; }
.vc-mt-0  { margin-top: 0; }

/* Abstand zwischen Formularfeldern einer Zeile. `.vc-form-row` setzt selbst kein
   `gap`, die Klasse hat dort also keinen Gegner. */
.vc-gap-12 { gap: 12px; }

/* Blaetterbarer Ausschnitt in einem Dialog: die Liste soll den Dialog nicht beliebig
   lang machen. Werte exakt aus dem Bestand. */
.vc-scrollbereich-240 { max-height: 240px; overflow-y: auto; }
.vc-scrollbereich-320 { max-height: 320px; overflow-y: auto; }

/* --- Ablagefläche für Dateien (Belegupload) ---------------------------------------
   Das native Dateifeld liegt unsichtbar über der ganzen Fläche: Ablegen und Klicken
   gehen damit ohne eigenes JavaScript, und Tastatur/Screenreader treffen das echte
   <input>. Gemeinsame Bauform für Stapel-Upload (Belegliste) und Upload-Abschnitt
   (Zuordnen-Dialog, Rechnung erfassen, Beleg hochladen) — EIN Aussehen, eine Regel. */
.vc-dropzone {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: center;
    min-height: 88px;
    padding: 18px 22px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: var(--calc-area-bg);
    color: var(--text-dark);
}
.vc-dropzone > svg { flex: 0 0 36px; width: 36px; height: 36px; color: var(--accent-blue); }
.vc-dropzone strong { font-weight: 600; }
.vc-dropzone p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.vc-dropzone-knopf {
    margin-left: auto;
    white-space: nowrap;
    padding: 9px 18px;
    border: 1px solid var(--accent-blue);
    border-radius: 10px;
    background: #ffffff;
    color: var(--accent-blue);
    font-size: 14px;
    font-weight: 500;
}
.vc-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vc-dropzone:hover:not(.is-disabled) { background: var(--selected-bg); border-color: var(--accent-blue); }
.vc-dropzone:focus-within { outline: 3px solid var(--accent-blue); outline-offset: 2px; }
.vc-dropzone.is-disabled { opacity: .7; }
.vc-dropzone.is-disabled .vc-dropzone-input { cursor: default; }
@media (max-width: 640px) {
    .vc-dropzone { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .vc-dropzone > svg { display: none; }
    .vc-dropzone-knopf { margin-left: 0; }
}
.vc-w-44 { width: 44px; }
.vc-pl-20 { padding-left: 20px; }
.vc-pl-24 { padding-left: 24px; }
.vc-mt-4  { margin-top: 4px; }

/* Senkrechter Stapel mit sehr engem Abstand — wie `.vc-stapel`, aber 4px und ohne
   Aussenabstand nach unten. */
.vc-stapel-4 { display: flex; flex-direction: column; gap: 4px; }

/* Abschnittstrenner innerhalb eines Dialogs: Linie plus Luft darueber und darunter. */
.vc-abschnitt-trenner {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

/* --- Datenschutzhinweise ---
   Standen bis zum 03.08.2026 als <style>-Block in Datenschutz.razor. Umgezogen für den
   Abschluss von P2-7: `style-src` bewertet nicht nur style-Attribute, sondern auch
   <style>-Elemente — ohne 'unsafe-inline' hätte der Browser den Block verworfen und die
   Seite waere unformatiert erschienen. Sie ist anonym erreichbar und damit eine der
   ersten, die ein Nutzer zu sehen bekommt.
   Regeln unveraendert uebernommen; die Selektoren kommen sonst nirgends vor, die neue
   Position im Stylesheet aendert daher nichts an der Reihenfolge-Entscheidung. */
.vc-datenschutz-card,
.vc-rechtliches-card {
    max-width: 720px;
    margin: 0 auto;
}
.vc-datenschutz-card h1,
.vc-rechtliches-card h1 { margin-top: 0; }
.vc-datenschutz-card h2,
.vc-rechtliches-card h2 {
    font-size: 16px;
    margin-top: 24px;
    margin-bottom: 8px;
}
.vc-datenschutz-card ul { margin: 4px 0 8px 18px; }
.vc-datenschutz-zurueck {
    margin-top: 24px;
    text-align: center;
}

/* Prozentbreiten für <col>-Elemente (Spaltenaufteilung einer Tabelle). */
.vc-w-15p { width: 15%; }
.vc-w-30p { width: 30%; }
.vc-w-40p { width: 40%; }

/* --- Etappe 11: SpaltenmappingWizard --- */

/* Zwei weitere Stufen der Scrollbereich-Familie. Werte exakt aus dem Bestand
   übernommen — der Wizard zeigt in der Bestätigung fünf Zeilen (300px), im
   Korrektur-Modus acht (350px). Damit stehen vier Werte nebeneinander (240, 300,
   320, 350) für dieselbe Aussage „blätterbarer Ausschnitt". Das ist bewusst
   angelegte Gestaltungsschuld und steht als Punkt 3 auf der Liste für die eine
   Gestaltungsrunde (Startprompt §7): Eine Zusammenlegung ändert sichtbar die Höhe
   und braucht deshalb eine eigene Aufnahme — sie gehört nicht in einen Umbau,
   der ausdrücklich nichts an der Gestaltung ändern soll. */
.vc-scrollbereich-300 { max-height: 300px; overflow-y: auto; }
.vc-scrollbereich-350 { max-height: 350px; overflow-y: auto; }

/* Abstand zwischen Ladeanzeige und Text. Gegenstück zu `.vc-ml-8`; steht im
   Wizard auf einem `<span>` neben dem Spinner. */
.vc-ml-12 { margin-left: 12px; }

/* ===========================================================================
   Etappe 12 (03.08.2026) — Stufenklassen fuer berechnete Balken

   WOFUER. Ein Balken, dessen Laenge aus Daten entsteht, stand bisher als
   `style="width: @BarWidth(x)%"` im Markup. Das ist der letzte Grund, aus dem
   `style-src` sein `'unsafe-inline'` behalten muesste — und die Direktive
   bewertet Ausgaben, nicht Dateien: EIN gerendertes Attribut genuegt.

   WARUM DAS HIER NICHTS AN DER GESTALTUNG AENDERT. Die Rechenfunktionen liefern
   bereits ganze Zahlen — `BarWidth`, `QuoteBarWidth`, `ProgressWidth` und
   `Abweichungsanalyse.BarWidth` geben `(int)Math.Clamp(..., 0, 100)` zurueck,
   `Buchungen` formatiert mit `ToString("0")`, `ImportZuordnung` rundet auf
   `(int)`. Zwischenwerte gab es also nie. Diese Klassen bilden denselben
   Wertebereich ab; der Balken steht danach auf demselben Pixel.

   WARUM VOLLE AUFLOESUNG STATT GROEBERER STUFEN. Eine 2%- oder 2px-Stufung
   spart rund die Haelfte der Regeln und kostet bis zu einen sichtbaren Pixel —
   das waere eine Gestaltungsaenderung und braeuchte eine Entscheidung. Volle
   Aufloesung braucht keine.

   NICHT VON HAND PFLEGEN. Erzeugt; wer den Wertebereich aendert, erzeugt neu.
   =========================================================================== */

/* Balkenlaenge in Prozent — auch fuer die aktive Spur des Monats-Schiebers. */
.vc-balkenbreite-0 { width: 0%; }
.vc-balkenbreite-1 { width: 1%; }
.vc-balkenbreite-2 { width: 2%; }
.vc-balkenbreite-3 { width: 3%; }
.vc-balkenbreite-4 { width: 4%; }
.vc-balkenbreite-5 { width: 5%; }
.vc-balkenbreite-6 { width: 6%; }
.vc-balkenbreite-7 { width: 7%; }
.vc-balkenbreite-8 { width: 8%; }
.vc-balkenbreite-9 { width: 9%; }
.vc-balkenbreite-10 { width: 10%; }
.vc-balkenbreite-11 { width: 11%; }
.vc-balkenbreite-12 { width: 12%; }
.vc-balkenbreite-13 { width: 13%; }
.vc-balkenbreite-14 { width: 14%; }
.vc-balkenbreite-15 { width: 15%; }
.vc-balkenbreite-16 { width: 16%; }
.vc-balkenbreite-17 { width: 17%; }
.vc-balkenbreite-18 { width: 18%; }
.vc-balkenbreite-19 { width: 19%; }
.vc-balkenbreite-20 { width: 20%; }
.vc-balkenbreite-21 { width: 21%; }
.vc-balkenbreite-22 { width: 22%; }
.vc-balkenbreite-23 { width: 23%; }
.vc-balkenbreite-24 { width: 24%; }
.vc-balkenbreite-25 { width: 25%; }
.vc-balkenbreite-26 { width: 26%; }
.vc-balkenbreite-27 { width: 27%; }
.vc-balkenbreite-28 { width: 28%; }
.vc-balkenbreite-29 { width: 29%; }
.vc-balkenbreite-30 { width: 30%; }
.vc-balkenbreite-31 { width: 31%; }
.vc-balkenbreite-32 { width: 32%; }
.vc-balkenbreite-33 { width: 33%; }
.vc-balkenbreite-34 { width: 34%; }
.vc-balkenbreite-35 { width: 35%; }
.vc-balkenbreite-36 { width: 36%; }
.vc-balkenbreite-37 { width: 37%; }
.vc-balkenbreite-38 { width: 38%; }
.vc-balkenbreite-39 { width: 39%; }
.vc-balkenbreite-40 { width: 40%; }
.vc-balkenbreite-41 { width: 41%; }
.vc-balkenbreite-42 { width: 42%; }
.vc-balkenbreite-43 { width: 43%; }
.vc-balkenbreite-44 { width: 44%; }
.vc-balkenbreite-45 { width: 45%; }
.vc-balkenbreite-46 { width: 46%; }
.vc-balkenbreite-47 { width: 47%; }
.vc-balkenbreite-48 { width: 48%; }
.vc-balkenbreite-49 { width: 49%; }
.vc-balkenbreite-50 { width: 50%; }
.vc-balkenbreite-51 { width: 51%; }
.vc-balkenbreite-52 { width: 52%; }
.vc-balkenbreite-53 { width: 53%; }
.vc-balkenbreite-54 { width: 54%; }
.vc-balkenbreite-55 { width: 55%; }
.vc-balkenbreite-56 { width: 56%; }
.vc-balkenbreite-57 { width: 57%; }
.vc-balkenbreite-58 { width: 58%; }
.vc-balkenbreite-59 { width: 59%; }
.vc-balkenbreite-60 { width: 60%; }
.vc-balkenbreite-61 { width: 61%; }
.vc-balkenbreite-62 { width: 62%; }
.vc-balkenbreite-63 { width: 63%; }
.vc-balkenbreite-64 { width: 64%; }
.vc-balkenbreite-65 { width: 65%; }
.vc-balkenbreite-66 { width: 66%; }
.vc-balkenbreite-67 { width: 67%; }
.vc-balkenbreite-68 { width: 68%; }
.vc-balkenbreite-69 { width: 69%; }
.vc-balkenbreite-70 { width: 70%; }
.vc-balkenbreite-71 { width: 71%; }
.vc-balkenbreite-72 { width: 72%; }
.vc-balkenbreite-73 { width: 73%; }
.vc-balkenbreite-74 { width: 74%; }
.vc-balkenbreite-75 { width: 75%; }
.vc-balkenbreite-76 { width: 76%; }
.vc-balkenbreite-77 { width: 77%; }
.vc-balkenbreite-78 { width: 78%; }
.vc-balkenbreite-79 { width: 79%; }
.vc-balkenbreite-80 { width: 80%; }
.vc-balkenbreite-81 { width: 81%; }
.vc-balkenbreite-82 { width: 82%; }
.vc-balkenbreite-83 { width: 83%; }
.vc-balkenbreite-84 { width: 84%; }
.vc-balkenbreite-85 { width: 85%; }
.vc-balkenbreite-86 { width: 86%; }
.vc-balkenbreite-87 { width: 87%; }
.vc-balkenbreite-88 { width: 88%; }
.vc-balkenbreite-89 { width: 89%; }
.vc-balkenbreite-90 { width: 90%; }
.vc-balkenbreite-91 { width: 91%; }
.vc-balkenbreite-92 { width: 92%; }
.vc-balkenbreite-93 { width: 93%; }
.vc-balkenbreite-94 { width: 94%; }
.vc-balkenbreite-95 { width: 95%; }
.vc-balkenbreite-96 { width: 96%; }
.vc-balkenbreite-97 { width: 97%; }
.vc-balkenbreite-98 { width: 98%; }
.vc-balkenbreite-99 { width: 99%; }
.vc-balkenbreite-100 { width: 100%; }

/* Saeulenhoehe des Monatsdiagramms in Pixeln. `BarHeight` rechnet gegen 180px
   und klemmt dort; eine Prozentangabe scheidet aus, weil `.chart-bar-group`
   keine feste Hoehe hat und ein Prozentwert dort ins Leere liefe. */
.vc-balkenhoehe-0 { height: 0px; }
.vc-balkenhoehe-1 { height: 1px; }
.vc-balkenhoehe-2 { height: 2px; }
.vc-balkenhoehe-3 { height: 3px; }
.vc-balkenhoehe-4 { height: 4px; }
.vc-balkenhoehe-5 { height: 5px; }
.vc-balkenhoehe-6 { height: 6px; }
.vc-balkenhoehe-7 { height: 7px; }
.vc-balkenhoehe-8 { height: 8px; }
.vc-balkenhoehe-9 { height: 9px; }
.vc-balkenhoehe-10 { height: 10px; }
.vc-balkenhoehe-11 { height: 11px; }
.vc-balkenhoehe-12 { height: 12px; }
.vc-balkenhoehe-13 { height: 13px; }
.vc-balkenhoehe-14 { height: 14px; }
.vc-balkenhoehe-15 { height: 15px; }
.vc-balkenhoehe-16 { height: 16px; }
.vc-balkenhoehe-17 { height: 17px; }
.vc-balkenhoehe-18 { height: 18px; }
.vc-balkenhoehe-19 { height: 19px; }
.vc-balkenhoehe-20 { height: 20px; }
.vc-balkenhoehe-21 { height: 21px; }
.vc-balkenhoehe-22 { height: 22px; }
.vc-balkenhoehe-23 { height: 23px; }
.vc-balkenhoehe-24 { height: 24px; }
.vc-balkenhoehe-25 { height: 25px; }
.vc-balkenhoehe-26 { height: 26px; }
.vc-balkenhoehe-27 { height: 27px; }
.vc-balkenhoehe-28 { height: 28px; }
.vc-balkenhoehe-29 { height: 29px; }
.vc-balkenhoehe-30 { height: 30px; }
.vc-balkenhoehe-31 { height: 31px; }
.vc-balkenhoehe-32 { height: 32px; }
.vc-balkenhoehe-33 { height: 33px; }
.vc-balkenhoehe-34 { height: 34px; }
.vc-balkenhoehe-35 { height: 35px; }
.vc-balkenhoehe-36 { height: 36px; }
.vc-balkenhoehe-37 { height: 37px; }
.vc-balkenhoehe-38 { height: 38px; }
.vc-balkenhoehe-39 { height: 39px; }
.vc-balkenhoehe-40 { height: 40px; }
.vc-balkenhoehe-41 { height: 41px; }
.vc-balkenhoehe-42 { height: 42px; }
.vc-balkenhoehe-43 { height: 43px; }
.vc-balkenhoehe-44 { height: 44px; }
.vc-balkenhoehe-45 { height: 45px; }
.vc-balkenhoehe-46 { height: 46px; }
.vc-balkenhoehe-47 { height: 47px; }
.vc-balkenhoehe-48 { height: 48px; }
.vc-balkenhoehe-49 { height: 49px; }
.vc-balkenhoehe-50 { height: 50px; }
.vc-balkenhoehe-51 { height: 51px; }
.vc-balkenhoehe-52 { height: 52px; }
.vc-balkenhoehe-53 { height: 53px; }
.vc-balkenhoehe-54 { height: 54px; }
.vc-balkenhoehe-55 { height: 55px; }
.vc-balkenhoehe-56 { height: 56px; }
.vc-balkenhoehe-57 { height: 57px; }
.vc-balkenhoehe-58 { height: 58px; }
.vc-balkenhoehe-59 { height: 59px; }
.vc-balkenhoehe-60 { height: 60px; }
.vc-balkenhoehe-61 { height: 61px; }
.vc-balkenhoehe-62 { height: 62px; }
.vc-balkenhoehe-63 { height: 63px; }
.vc-balkenhoehe-64 { height: 64px; }
.vc-balkenhoehe-65 { height: 65px; }
.vc-balkenhoehe-66 { height: 66px; }
.vc-balkenhoehe-67 { height: 67px; }
.vc-balkenhoehe-68 { height: 68px; }
.vc-balkenhoehe-69 { height: 69px; }
.vc-balkenhoehe-70 { height: 70px; }
.vc-balkenhoehe-71 { height: 71px; }
.vc-balkenhoehe-72 { height: 72px; }
.vc-balkenhoehe-73 { height: 73px; }
.vc-balkenhoehe-74 { height: 74px; }
.vc-balkenhoehe-75 { height: 75px; }
.vc-balkenhoehe-76 { height: 76px; }
.vc-balkenhoehe-77 { height: 77px; }
.vc-balkenhoehe-78 { height: 78px; }
.vc-balkenhoehe-79 { height: 79px; }
.vc-balkenhoehe-80 { height: 80px; }
.vc-balkenhoehe-81 { height: 81px; }
.vc-balkenhoehe-82 { height: 82px; }
.vc-balkenhoehe-83 { height: 83px; }
.vc-balkenhoehe-84 { height: 84px; }
.vc-balkenhoehe-85 { height: 85px; }
.vc-balkenhoehe-86 { height: 86px; }
.vc-balkenhoehe-87 { height: 87px; }
.vc-balkenhoehe-88 { height: 88px; }
.vc-balkenhoehe-89 { height: 89px; }
.vc-balkenhoehe-90 { height: 90px; }
.vc-balkenhoehe-91 { height: 91px; }
.vc-balkenhoehe-92 { height: 92px; }
.vc-balkenhoehe-93 { height: 93px; }
.vc-balkenhoehe-94 { height: 94px; }
.vc-balkenhoehe-95 { height: 95px; }
.vc-balkenhoehe-96 { height: 96px; }
.vc-balkenhoehe-97 { height: 97px; }
.vc-balkenhoehe-98 { height: 98px; }
.vc-balkenhoehe-99 { height: 99px; }
.vc-balkenhoehe-100 { height: 100px; }
.vc-balkenhoehe-101 { height: 101px; }
.vc-balkenhoehe-102 { height: 102px; }
.vc-balkenhoehe-103 { height: 103px; }
.vc-balkenhoehe-104 { height: 104px; }
.vc-balkenhoehe-105 { height: 105px; }
.vc-balkenhoehe-106 { height: 106px; }
.vc-balkenhoehe-107 { height: 107px; }
.vc-balkenhoehe-108 { height: 108px; }
.vc-balkenhoehe-109 { height: 109px; }
.vc-balkenhoehe-110 { height: 110px; }
.vc-balkenhoehe-111 { height: 111px; }
.vc-balkenhoehe-112 { height: 112px; }
.vc-balkenhoehe-113 { height: 113px; }
.vc-balkenhoehe-114 { height: 114px; }
.vc-balkenhoehe-115 { height: 115px; }
.vc-balkenhoehe-116 { height: 116px; }
.vc-balkenhoehe-117 { height: 117px; }
.vc-balkenhoehe-118 { height: 118px; }
.vc-balkenhoehe-119 { height: 119px; }
.vc-balkenhoehe-120 { height: 120px; }
.vc-balkenhoehe-121 { height: 121px; }
.vc-balkenhoehe-122 { height: 122px; }
.vc-balkenhoehe-123 { height: 123px; }
.vc-balkenhoehe-124 { height: 124px; }
.vc-balkenhoehe-125 { height: 125px; }
.vc-balkenhoehe-126 { height: 126px; }
.vc-balkenhoehe-127 { height: 127px; }
.vc-balkenhoehe-128 { height: 128px; }
.vc-balkenhoehe-129 { height: 129px; }
.vc-balkenhoehe-130 { height: 130px; }
.vc-balkenhoehe-131 { height: 131px; }
.vc-balkenhoehe-132 { height: 132px; }
.vc-balkenhoehe-133 { height: 133px; }
.vc-balkenhoehe-134 { height: 134px; }
.vc-balkenhoehe-135 { height: 135px; }
.vc-balkenhoehe-136 { height: 136px; }
.vc-balkenhoehe-137 { height: 137px; }
.vc-balkenhoehe-138 { height: 138px; }
.vc-balkenhoehe-139 { height: 139px; }
.vc-balkenhoehe-140 { height: 140px; }
.vc-balkenhoehe-141 { height: 141px; }
.vc-balkenhoehe-142 { height: 142px; }
.vc-balkenhoehe-143 { height: 143px; }
.vc-balkenhoehe-144 { height: 144px; }
.vc-balkenhoehe-145 { height: 145px; }
.vc-balkenhoehe-146 { height: 146px; }
.vc-balkenhoehe-147 { height: 147px; }
.vc-balkenhoehe-148 { height: 148px; }
.vc-balkenhoehe-149 { height: 149px; }
.vc-balkenhoehe-150 { height: 150px; }
.vc-balkenhoehe-151 { height: 151px; }
.vc-balkenhoehe-152 { height: 152px; }
.vc-balkenhoehe-153 { height: 153px; }
.vc-balkenhoehe-154 { height: 154px; }
.vc-balkenhoehe-155 { height: 155px; }
.vc-balkenhoehe-156 { height: 156px; }
.vc-balkenhoehe-157 { height: 157px; }
.vc-balkenhoehe-158 { height: 158px; }
.vc-balkenhoehe-159 { height: 159px; }
.vc-balkenhoehe-160 { height: 160px; }
.vc-balkenhoehe-161 { height: 161px; }
.vc-balkenhoehe-162 { height: 162px; }
.vc-balkenhoehe-163 { height: 163px; }
.vc-balkenhoehe-164 { height: 164px; }
.vc-balkenhoehe-165 { height: 165px; }
.vc-balkenhoehe-166 { height: 166px; }
.vc-balkenhoehe-167 { height: 167px; }
.vc-balkenhoehe-168 { height: 168px; }
.vc-balkenhoehe-169 { height: 169px; }
.vc-balkenhoehe-170 { height: 170px; }
.vc-balkenhoehe-171 { height: 171px; }
.vc-balkenhoehe-172 { height: 172px; }
.vc-balkenhoehe-173 { height: 173px; }
.vc-balkenhoehe-174 { height: 174px; }
.vc-balkenhoehe-175 { height: 175px; }
.vc-balkenhoehe-176 { height: 176px; }
.vc-balkenhoehe-177 { height: 177px; }
.vc-balkenhoehe-178 { height: 178px; }
.vc-balkenhoehe-179 { height: 179px; }
.vc-balkenhoehe-180 { height: 180px; }

/* Linke Kante der aktiven Spur des Monats-Schiebers. Anders als bei den Balken
   sind die Werte hier NICHT von Haus aus ganzzahlig (`idx * 100 / maxIdx`);
   gerundet wird deshalb im Markup, und zwar beide Enden EINZELN — die Breite
   entsteht aus der Differenz der gerundeten Enden. Wuerde man `links` und
   `breite` je fuer sich runden, addierten sich die Fehler am rechten Ende auf
   bis zu einen ganzen Prozentpunkt. So bleibt jedes Ende innerhalb eines
   halben Prozentpunkts der Spurbreite — und damit unter dem 18px-Griff, der
   auf der Position zentriert sitzt. */
.vc-balkenversatz-0 { left: 0%; }
.vc-balkenversatz-1 { left: 1%; }
.vc-balkenversatz-2 { left: 2%; }
.vc-balkenversatz-3 { left: 3%; }
.vc-balkenversatz-4 { left: 4%; }
.vc-balkenversatz-5 { left: 5%; }
.vc-balkenversatz-6 { left: 6%; }
.vc-balkenversatz-7 { left: 7%; }
.vc-balkenversatz-8 { left: 8%; }
.vc-balkenversatz-9 { left: 9%; }
.vc-balkenversatz-10 { left: 10%; }
.vc-balkenversatz-11 { left: 11%; }
.vc-balkenversatz-12 { left: 12%; }
.vc-balkenversatz-13 { left: 13%; }
.vc-balkenversatz-14 { left: 14%; }
.vc-balkenversatz-15 { left: 15%; }
.vc-balkenversatz-16 { left: 16%; }
.vc-balkenversatz-17 { left: 17%; }
.vc-balkenversatz-18 { left: 18%; }
.vc-balkenversatz-19 { left: 19%; }
.vc-balkenversatz-20 { left: 20%; }
.vc-balkenversatz-21 { left: 21%; }
.vc-balkenversatz-22 { left: 22%; }
.vc-balkenversatz-23 { left: 23%; }
.vc-balkenversatz-24 { left: 24%; }
.vc-balkenversatz-25 { left: 25%; }
.vc-balkenversatz-26 { left: 26%; }
.vc-balkenversatz-27 { left: 27%; }
.vc-balkenversatz-28 { left: 28%; }
.vc-balkenversatz-29 { left: 29%; }
.vc-balkenversatz-30 { left: 30%; }
.vc-balkenversatz-31 { left: 31%; }
.vc-balkenversatz-32 { left: 32%; }
.vc-balkenversatz-33 { left: 33%; }
.vc-balkenversatz-34 { left: 34%; }
.vc-balkenversatz-35 { left: 35%; }
.vc-balkenversatz-36 { left: 36%; }
.vc-balkenversatz-37 { left: 37%; }
.vc-balkenversatz-38 { left: 38%; }
.vc-balkenversatz-39 { left: 39%; }
.vc-balkenversatz-40 { left: 40%; }
.vc-balkenversatz-41 { left: 41%; }
.vc-balkenversatz-42 { left: 42%; }
.vc-balkenversatz-43 { left: 43%; }
.vc-balkenversatz-44 { left: 44%; }
.vc-balkenversatz-45 { left: 45%; }
.vc-balkenversatz-46 { left: 46%; }
.vc-balkenversatz-47 { left: 47%; }
.vc-balkenversatz-48 { left: 48%; }
.vc-balkenversatz-49 { left: 49%; }
.vc-balkenversatz-50 { left: 50%; }
.vc-balkenversatz-51 { left: 51%; }
.vc-balkenversatz-52 { left: 52%; }
.vc-balkenversatz-53 { left: 53%; }
.vc-balkenversatz-54 { left: 54%; }
.vc-balkenversatz-55 { left: 55%; }
.vc-balkenversatz-56 { left: 56%; }
.vc-balkenversatz-57 { left: 57%; }
.vc-balkenversatz-58 { left: 58%; }
.vc-balkenversatz-59 { left: 59%; }
.vc-balkenversatz-60 { left: 60%; }
.vc-balkenversatz-61 { left: 61%; }
.vc-balkenversatz-62 { left: 62%; }
.vc-balkenversatz-63 { left: 63%; }
.vc-balkenversatz-64 { left: 64%; }
.vc-balkenversatz-65 { left: 65%; }
.vc-balkenversatz-66 { left: 66%; }
.vc-balkenversatz-67 { left: 67%; }
.vc-balkenversatz-68 { left: 68%; }
.vc-balkenversatz-69 { left: 69%; }
.vc-balkenversatz-70 { left: 70%; }
.vc-balkenversatz-71 { left: 71%; }
.vc-balkenversatz-72 { left: 72%; }
.vc-balkenversatz-73 { left: 73%; }
.vc-balkenversatz-74 { left: 74%; }
.vc-balkenversatz-75 { left: 75%; }
.vc-balkenversatz-76 { left: 76%; }
.vc-balkenversatz-77 { left: 77%; }
.vc-balkenversatz-78 { left: 78%; }
.vc-balkenversatz-79 { left: 79%; }
.vc-balkenversatz-80 { left: 80%; }
.vc-balkenversatz-81 { left: 81%; }
.vc-balkenversatz-82 { left: 82%; }
.vc-balkenversatz-83 { left: 83%; }
.vc-balkenversatz-84 { left: 84%; }
.vc-balkenversatz-85 { left: 85%; }
.vc-balkenversatz-86 { left: 86%; }
.vc-balkenversatz-87 { left: 87%; }
.vc-balkenversatz-88 { left: 88%; }
.vc-balkenversatz-89 { left: 89%; }
.vc-balkenversatz-90 { left: 90%; }
.vc-balkenversatz-91 { left: 91%; }
.vc-balkenversatz-92 { left: 92%; }
.vc-balkenversatz-93 { left: 93%; }
.vc-balkenversatz-94 { left: 94%; }
.vc-balkenversatz-95 { left: 95%; }
.vc-balkenversatz-96 { left: 96%; }
.vc-balkenversatz-97 { left: 97%; }
.vc-balkenversatz-98 { left: 98%; }
.vc-balkenversatz-99 { left: 99%; }
.vc-balkenversatz-100 { left: 100%; }

/* ============================================================================
   Verteilungs-Bausteine (AP 5)

   Prozentuale Verteilungen kommen an zwei Stellen vor: beim Aufteilen einer
   Zahlung auf mehrere Kostenstellen und beim Pflegen einer Verteilvorlage.
   Beide brauchen dieselben drei Dinge — ein Anteilsfeld mit Einheit dahinter,
   eine Summenzeile und eine Anzeige, die urteilt, ob die Verteilung aufgeht.

   Warum hier und nicht je Komponente: Blazors CSS-Isolation wirkt nicht
   dateiuebergreifend. Als lokale Regeln standen diese Bloecke wortgleich in
   zwei .razor.css-Dateien, und jede spaetere Anpassung haette an beiden
   Stellen nachgezogen werden muessen — genau der Drift-Mechanismus, den
   Regel 13 benennt.
   ============================================================================ */

.vc-anteil-eingabe {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
}

.vc-anteil-eingabe .vc-input {
    width: 84px;
    text-align: right;
}

.vc-anteil-einheit {
    flex: 0 0 auto;
    font-size: 12px;
    color: #475569;
}

/* Summenzeile nach DESIGN_SYSTEM.md §5.2: doppelte Oberlinie 2px solid,
   SemiBold, leicht grauer Hintergrund. (Der erste Entwurf schrieb 3px double
   und berief sich dabei auf ebendiese Konvention — sie sagt etwas anderes.
   Die Bestandsregel .bwa-ergebnis-row weicht ebenfalls ab; das ist aelter und
   hier nicht mitgeaendert.) */
.vc-verteilung-summe td {
    border-top: 2px solid #cbd5e1;
    background: #f8fafc;
    font-weight: 600;
}

.vc-verteilung-fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

/* --- Die Aufteilungs-Summe in der Aktionsleiste (Stufe 2) ---
   Sie steht bewusst NICHT im scrollenden Dialog-Koerper: Dort rutscht die urteilende
   Zeile unter die Faltkante, sobald die zweite Anteilszeile ausgefuellt ist - gemessen
   870 px Inhalt auf 582 px Sichtflaeche. Ein position:sticky half nicht, weil das
   Elternelement der Zeile genau so hoch ist wie sie selbst und Sticky damit keinen
   Spielraum hat. Die Aktionsleiste liegt AUSSERHALB des Scrollbereichs; hier ist die
   Summe zwangslaeufig sichtbar, solange der Dialog offen ist. Das ist die Uebertragung
   der "dauerhaft sichtbaren Summe" aus dem VeltoCare Calculator. */
.vc-dialog-footer .vc-aufteilung-summe {
    margin-right: auto;
    font-size: 13px;
    font-weight: 600;
    align-self: center;
}

/* Stufe 3, Befund aus der Browser-Sichtpruefung: Dieselbe Ueberlegung wie fuer die
   Summe darueber, nur fuer die FEHLERMELDUNG. In der Maske "Rechnung mit Beleg
   erfassen" (Upload + Zielwahl + vollstaendiger Feldsatz) stand der Fehler-Alert am
   Ende des scrollenden Koerpers - gemessen: Nach dem Klick auf Speichern ohne Datei
   war "Bitte zuerst die Rechnungsdatei hochladen" NICHT im Bild, die Maske sah aus,
   als tue der Knopf nichts. Die Aktionsleiste liegt ausserhalb des Scrollbereichs und
   ist genau der Ort, auf den der Nutzer beim Klicken schaut. */
.vc-dialog-footer .vc-dialog-fehler {
    margin-right: auto;
    max-width: 55%;
    font-size: 13px;
    font-weight: 600;
    color: var(--danger-color);
    align-self: center;
    text-align: left;
}

.vc-aufteilung-summe--offen { color: var(--danger-color); }

.vc-aufteilung-summe--ok { color: #059669; }

/* Die urteilende Restanzeige: Sie sagt nicht nur, wie viel fehlt, sondern
   auch, ob ueberhaupt gebucht werden kann. */
.vc-verteilung-urteil {
    font-size: 13px;
    font-weight: 600;
}

.vc-verteilung-urteil--ok {
    color: #059669;
}

.vc-verteilung-urteil--offen {
    color: #b45309;
}

.vc-verteilung-aktionen {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

@media (max-width: 768px) {
    .vc-verteilung-fuss {
        flex-direction: column;
        align-items: stretch;
    }

    .vc-verteilung-aktionen {
        margin-left: 0;
    }
}

/* ============================================================
   Hilfsassistent Stufe 1 — VcHilfePanel (Aufgabe 6, Spec 4.2/11)
   ============================================================ */

/* Die kontextuelle Hilfe bleibt auf allen Breiten rechts unten erreichbar.
   Sie belegt keine dauerhafte Navigationsspalte und verdeckt den App-Kopf nicht. */
.vc-hilfe-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    max-height: min(70vh, 680px);
    width: min(340px, calc(100vw - 32px));
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: 0 4px 20px #14253f26;
    z-index: 35;
}

.vc-hilfe-panel--eingeklappt {
    width: 48px;
}

/* --- „Mehr Angaben" (Stufe 2, BuchungErfassenDialog) ---
   Natives <details>/<summary> statt einer eigenen Aufklapp-Mechanik: Es braucht kein
   JavaScript, keinen Komponentenzustand und ist von Haus aus tastatur- und
   screenreaderbedienbar. Zweck ist Konzept §0.2 (Laien): Selten Gebrauchtes liegt
   zugeklappt, damit der Normalfall kurz bleibt.
   Farb- und Abstandswerte ausschliesslich aus den :root-Variablen. --- */
.vc-mehr-angaben {
    margin: 4px 0 12px;
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
}

.vc-mehr-angaben > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    list-style: none;
    padding: 4px 0;
    user-select: none;
}

/* Der Standard-Marker wird ersetzt, damit das Dreieck die Richtung des
   Aufklappens zeigt und links buendig zum Formular steht.

   Das Dreieck steht als ZEICHEN da, nicht als CSS-Hex-Escape ("B8"). Der
   Escape war beim Einbau falsch im Werkzeug gelandet und ergab ein Steuerzeichen
   plus die Buchstaben "B8" - sichtbar erst in der Browser-Sichtpruefung, nicht im
   Build und nicht in einem Test. Das Zeichen selbst kann diese Fehlerklasse nicht
   haben; die Datei ist UTF-8. */
.vc-mehr-angaben > summary::-webkit-details-marker {
    display: none;
}

.vc-mehr-angaben > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.vc-mehr-angaben[open] > summary::before {
    transform: rotate(90deg);
}

/* Gemeinsame Gliederung der Finanzberichte: Abschnitt, Kostengruppe, Position und Summe. */
.bwa-table-container { overflow-x: auto; }
.vc-report-table { min-width: 680px; }
.vc-report-table thead th { background: #e8eef8; color: #243f60; padding-top: 14px; padding-bottom: 14px; border-bottom-color: #9eafc8; }
.vc-report-table .report-section th { padding: 18px 16px; text-align: left; font-size: 18px; font-weight: 600; border-bottom: 1px solid #b6c7df; }
.vc-report-table .report-section--income th { background: #e9f5f1; border-left: 5px solid #16775c; color: #164b3c; }
.vc-report-table .report-section--expenses th { background: #e9f0ff; border-left: 5px solid #2059df; color: #173d80; border-top: 16px solid #e8effb; }
.vc-report-table .bwa-group-row td { background: #e3ebf7; color: #213b60; padding: 13px 16px; border-top: 2px solid #bdcce2; border-bottom: 1px solid #cdd9e9; font-size: 14px; }
.vc-report-table .bwa-zeile td { background: white; padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid #e1e8f2; }
.vc-report-table .bwa-zeile:nth-child(even) td { background: #f7f9fd; }
.vc-report-table .bwa-zeile:hover td { background: #edf4ff; }
.vc-report-table .bwa-group-sum td { padding-top: 13px; padding-bottom: 13px; background: #edf2fa; border-top: 1px solid #b8c8df; }
.vc-report-table .bwa-total-sum td { background: #dfe9f8; border-top: 2px solid #9aafce; padding-top: 16px; padding-bottom: 16px; }
.vc-report-table .bwa-result-row td, .vc-report-table .bwa-ergebnis-row td { background: #e5eefc; border-top: 3px solid #6e8cba; font-weight: 600; padding: 18px 16px; }
.vc-report-table .numeric { font-variant-numeric: tabular-nums; }
.vc-report-table .bwa-zeile td[title*="Hochrechnung"] { background: #edf3ff; font-weight: 600; }
.vc-report-table .bwa-sticky-col { background: white; }
.vc-report-table .ergebnis-positiv,
.vc-report-table .delta-positive-income,
.vc-report-table .delta-negative-expense { color: #14733f; }
.vc-report-table .ergebnis-negativ,
.vc-report-table .delta-negative-income,
.vc-report-table .delta-positive-expense { color: #b4233c; }