/* ==========================================================================
   Design „Vision“ — dunkles Navy, blaue/cyanfarbene Akzente, große Radien.
   Angelehnt an den „Vision UI Dashboard“-Stil (Figma-Community-Referenz).

   Aktiv nur unter [data-bh-theme="vision"] (setzt theme.js bzw. UiThemeService
   auf dem <html>-Element). Ohne dieses Attribut ist diese Datei wirkungslos —
   das klassische Design bleibt damit unverändert.

   Die MudBlazor-Palette dazu steht in Components/Layout/BaehrTheme.cs (Vision);
   wer hier eine Farbe ändert, ändert sie dort mit.

   Gestaltungsregeln:
   - Lesbarkeit vor Effekt: Tabellen und Formulare fast deckend, Glas (blur)
     nur wo Inhalt tatsächlich dahinter liegt (Kopfleiste, Drawer, Dialoge, Menüs).
   - Alle Textfarben halten auf #050B18 mindestens 4,5:1.
   - Bewegung dezent: 150–250 ms; wer Bewegung abbestellt, bekommt keine
     (prefers-reduced-motion-Regel in app.css gilt global weiter).
   ========================================================================== */

:root[data-bh-theme="vision"] {
    color-scheme: dark;

    /* ---- Marke / Akzente ---- */
    --bh-primary: #0075FF;
    --bh-primary-dark: #005FCC;
    --bh-primary-light: #3391FF;
    --bh-secondary: #00D4FF;
    --bh-tertiary: #00D4FF;

    /* ---- Flächen und Text ---- */
    --bh-bg: #050B18;
    --bh-surface: rgba(10, 20, 40, .75);
    --bh-surface-sunken: rgba(255, 255, 255, .04);
    --bh-text: #FFFFFF;
    /* Heller als das Vision-Original #A0AEC0 — Beschriftungen auf Dashboard
       und in der Sidebar waren sonst zu kontrastarm. */
    --bh-text-secondary: #BAC6DB;
    --bh-on-primary: #FFFFFF;
    --bh-border: rgba(255, 255, 255, .08);
    --bh-border-strong: rgba(255, 255, 255, .28);

    /* ---- Signalfarben ---- */
    --bh-error: #F05252;
    --bh-error-text: #FF8A8A;
    --bh-warning: #FFB547;
    --bh-warning-text: #FFB547;
    --bh-success: #01B574;
    --bh-success-text: #2CD9A5;
    --bh-info: #00D4FF;
    --bh-info-text: #00D4FF;

    /* ---- Getönte Meldungsflächen ---- */
    --bh-success-bg: rgba(1, 181, 116, .12);
    --bh-success-border: rgba(1, 181, 116, .35);
    --bh-success-on-bg: #7CF0C8;
    --bh-error-bg: rgba(240, 82, 82, .12);
    --bh-error-border: rgba(240, 82, 82, .35);
    --bh-error-on-bg: #FFB3B3;
    --bh-notice-bg: rgba(255, 181, 71, .10);
    --bh-notice-border: rgba(255, 181, 71, .35);

    /* ---- Fokus / Glow ---- */
    --bh-focus-ring: #00D4FF;
    --bh-focus-ring-inverse: #00D4FF;
    --bh-glow: 0 0 0 3px rgba(0, 117, 255, .28);

    /* ---- Form ---- */
    --bh-radius-sm: 10px;
    --bh-radius: 16px;
    --bh-radius-lg: 20px;
    --bh-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --bh-shadow-hover: 0 10px 28px rgba(0, 117, 255, .22);
}

/* ---------- Grundfläche ---------- */

[data-bh-theme="vision"] body { background-color: var(--bh-bg); }

/* Dezenter Farbverlauf gibt dem Navy Tiefe, ohne ein Bild zu laden. */
[data-bh-theme="vision"] .baehr-main {
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(0, 117, 255, .10), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(0, 212, 255, .05), transparent 55%),
        var(--bh-bg);
}

/* ---------- Kopfleiste (Glas) ---------- */

[data-bh-theme="vision"] .mud-appbar {
    background: rgba(6, 12, 26, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bh-border);
    box-shadow: none;
}

[data-bh-theme="vision"] .baehr-global-search .mud-input-outlined {
    background: rgba(255, 255, 255, .06);
    border-radius: var(--bh-radius-sm);
}

/* ---------- Sidebar ---------- */

[data-bh-theme="vision"] .mud-drawer {
    background: rgba(6, 12, 26, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--bh-border);
}

[data-bh-theme="vision"] .baehr-nav .mud-nav-link {
    border-radius: 12px;
    margin: 2px 0;
    color: var(--bh-text-secondary);
    transition: background-color 180ms var(--bh-ease), color 180ms var(--bh-ease);
}

[data-bh-theme="vision"] .baehr-nav .mud-nav-link .mud-nav-link-icon { color: inherit; }

[data-bh-theme="vision"] .baehr-nav .mud-nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #FFFFFF;
}

/* !important nötig: MudBlazors .mud-navmenu-primary-Regel ist spezifischer und
   färbte den aktiven Eintrag sonst primärblau — blau auf blauem Verlauf. */
[data-bh-theme="vision"] .baehr-nav .mud-nav-link.active {
    background: linear-gradient(90deg, #0075FF, #0059C2);
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(0, 117, 255, .35);
}

[data-bh-theme="vision"] .baehr-nav .mud-nav-link.active .mud-nav-link-text { color: #FFFFFF; }
[data-bh-theme="vision"] .baehr-nav .mud-nav-link.active .mud-nav-link-icon { color: #FFFFFF !important; }

/* ---------- Kalender: hellere Terminfarben auf dunklem Grund ---------- */

[data-bh-theme="vision"] .bh-cal-erp { background: rgba(0, 117, 255, .28); color: #9CC8FF; }
[data-bh-theme="vision"] .bh-cal-icloud { background: rgba(255, 59, 48, .28); color: #FFA09A; }
[data-bh-theme="vision"] .bh-cal-row-bar.bh-cal-erp { background: #0075FF; }
[data-bh-theme="vision"] .bh-cal-row-bar.bh-cal-icloud { background: #FF3B30; }
[data-bh-theme="vision"] .bh-cal-dot.bh-cal-erp { background: #0075FF; }
[data-bh-theme="vision"] .bh-cal-dot.bh-cal-icloud { background: #FF3B30; }
[data-bh-theme="vision"] .bh-cal-zusage { background: rgba(255, 149, 0, .26); color: #FFC56E; }
[data-bh-theme="vision"] .bh-cal-row-bar.bh-cal-zusage { background: #FF9500; }
[data-bh-theme="vision"] .bh-cal-dot.bh-cal-zusage { background: #FF9500; }
[data-bh-theme="vision"] .bh-cal-selected { background: rgba(0, 117, 255, .14); }

/* ---------- Karten / Flächen ---------- */

/* Karten: dunkelblau, dezente Border, große Radien, weicher Schatten.
   Bewusst ohne backdrop-filter — hinter Karten liegt nur die Seitenfläche,
   Blur wäre reine GPU-Last (Performance-Regel). */
[data-bh-theme="vision"] .mud-paper:not(.mud-alert) {
    background-color: rgba(10, 20, 40, .75);
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
}

/* Flächen in Popovern (Menüs, Selects, Datepicker) stylt bereits der Popover selbst —
   innere Paper bleiben neutral, sonst entstehen doppelte Rahmen. */
[data-bh-theme="vision"] .mud-popover .mud-paper,
[data-bh-theme="vision"] .mud-popover .mud-paper:not(.mud-alert) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

[data-bh-theme="vision"] .mud-paper-outlined { border-color: var(--bh-border); }

[data-bh-theme="vision"] .baehr-kpi:hover { box-shadow: var(--bh-shadow-hover); }

/* ---------- Tabellen (Lesbarkeit zuerst: fast deckende Fläche) ---------- */

[data-bh-theme="vision"] .mud-table {
    background-color: rgba(9, 17, 34, .92);
    border-radius: var(--bh-radius);
    border: 1px solid var(--bh-border);
}

[data-bh-theme="vision"] .mud-table-head .mud-table-cell {
    background-color: rgba(13, 24, 46, .95);
    color: var(--bh-text-secondary);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--bh-border);
}

[data-bh-theme="vision"] .mud-table-cell { border-color: var(--bh-border); }

[data-bh-theme="vision"] .mud-table-hover .mud-table-body .mud-table-row:hover {
    background-color: rgba(0, 117, 255, .10);
}

[data-bh-theme="vision"] .mud-table-row-selected,
[data-bh-theme="vision"] .mud-table-body .mud-table-row.selected {
    background-color: rgba(0, 117, 255, .18);
}

/* Mobile Kartenlisten erben die Tokens; nur die Kartenfläche wird deckender. */
[data-bh-theme="vision"] .bh-card-list .mud-table-root .mud-table-body .mud-table-row {
    background: rgba(10, 20, 40, .92);
}

/* ---------- Eingaben / Selects / Datepicker ---------- */

[data-bh-theme="vision"] .mud-input.mud-input-outlined {
    background: rgba(255, 255, 255, .03);
    border-radius: var(--bh-radius-sm);
}

[data-bh-theme="vision"] .mud-input.mud-input-outlined:focus-within {
    box-shadow: var(--bh-glow);
    border-radius: var(--bh-radius-sm);
    transition: box-shadow 150ms var(--bh-ease);
}

/* ---------- Buttons ---------- */

[data-bh-theme="vision"] .mud-button-filled-primary {
    box-shadow: 0 4px 14px rgba(0, 117, 255, .30);
    transition: box-shadow 180ms var(--bh-ease), background-color 180ms var(--bh-ease);
}

[data-bh-theme="vision"] .mud-button-filled-primary:hover {
    box-shadow: 0 8px 22px rgba(0, 117, 255, .45);
}

/* ---------- Dialoge, Menüs, Popover (Glas) ---------- */

[data-bh-theme="vision"] .mud-dialog {
    background: rgba(10, 20, 40, .90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius-lg);
}

[data-bh-theme="vision"] .mud-popover {
    background: rgba(12, 22, 44, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bh-border);
    border-radius: 12px;
    box-shadow: var(--bh-shadow);
}

[data-bh-theme="vision"] .mud-overlay-scrim { background-color: rgba(3, 6, 14, .6); }

/* ---------- Tabs ---------- */

[data-bh-theme="vision"] .mud-tabs .mud-tab { transition: color 150ms var(--bh-ease); }
[data-bh-theme="vision"] .mud-tab-slider { background-color: var(--bh-secondary); }

/* ---------- Dashboard: Anordnung wie im Vision-Vorbild ----------
   Die Sektionen (Home.razor, .bh-dash) werden per CSS-order umsortiert:
   Statistiken → Diagramme → Vorgänge → Arbeitszeit → Listen.
   „Klassisch“ definiert keine order-Werte und behält die Dokumentreihenfolge. */

.bh-dash { display: flex; flex-direction: column; }

[data-bh-theme="vision"] .bh-dash-warnings  { order: 0; }
[data-bh-theme="vision"] .bh-dash-finanzen  { order: 1; }
[data-bh-theme="vision"] .bh-dash-charts    { order: 2; margin-top: var(--bh-space-3); }
[data-bh-theme="vision"] .bh-dash-vorgaenge { order: 3; }
[data-bh-theme="vision"] .bh-dash-zeit      { order: 4; }
[data-bh-theme="vision"] .bh-dash-listen    { order: 5; }

/* Abschnittsüberschriften als kleine Eyebrow-Label (Vision-Stil) */
[data-bh-theme="vision"] .bh-dash-heading {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bh-text-secondary);
}

/* ---------- Statistikkarten (Vision-Stil: Label klein, Wert groß, Icon-Kachel) ---------- */

/* !important nötig: das MudIcon trägt Color.Primary und MudBlazors
   .mud-primary-text setzt das Blau ebenfalls mit !important — blaues Icon
   auf blauer Kachel. Höhere Spezifität + !important erzwingt Weiß. */
[data-bh-theme="vision"] .baehr-kpi .baehr-kpi-icon {
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding: 11px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0075FF, #00A3FF);
    color: #FFFFFF !important;
    box-shadow: 0 6px 14px rgba(0, 117, 255, .35);
    flex: 0 0 auto;
}

[data-bh-theme="vision"] .baehr-kpi .mud-typography-body2,
[data-bh-theme="vision"] .baehr-kpi .mud-typography-caption {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bh-text-secondary);
}

[data-bh-theme="vision"] .baehr-kpi .mud-typography-h6 {
    font-size: 1.25rem;
    letter-spacing: .01em;
}

/* ---------- Diagramme ---------- */

/* Chart-Karten wie die „Sales overview“-Referenz: tiefes Navy mit leichtem
   Verlauf, große Radien, hauchdünne Border und dezenter blauer Außenglow. */
[data-bh-theme="vision"] .bh-dash-charts .mud-paper {
    background: linear-gradient(180deg, #081B3A, #07152E 60%);
    border: 1px solid rgba(255, 255, 255, .04);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 90, 255, .12);
}

[data-bh-theme="vision"] .mud-chart { color: var(--bh-text-secondary); }
[data-bh-theme="vision"] .mud-chart text { fill: var(--bh-text-secondary); }
[data-bh-theme="vision"] .mud-chart-legend { color: var(--bh-text-secondary); }
[data-bh-theme="vision"] .mud-chart line { stroke: rgba(255, 255, 255, .10); }

/* ---------- Vision-Charts (VisionLineChart / VisionDonutChart) ----------
   Eigene, library-freie SVG-Diagramme; werden nur im Design „Vision“ gerendert.
   Zentrale Werte (Farben, Grid, Formatierung) liefert Theme/VisionChartTheme.cs. */

/* KPI-Kopf in Diagrammkarten */
.bh-chart-kpi { margin: 2px 0 14px; }
.bh-chart-kpi-value { font-size: 1.6rem; font-weight: 700; color: #FFFFFF; line-height: 1.2; }
.bh-chart-kpi-sub { font-size: .78rem; color: var(--bh-text-secondary); display: flex; gap: 10px; flex-wrap: wrap; }
.bh-chart-kpi-sub .up { color: #01B574; font-weight: 600; }
.bh-chart-kpi-sub .down { color: #F05252; font-weight: 600; }

/* Liniendiagramm */
.vlc { user-select: none; }
.vlc-legend { display: flex; gap: 16px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.vlc-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--bh-text-secondary); }
.vlc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

.vlc-body { display: flex; }
.vlc-ylabels {
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    width: 64px; padding-right: 10px; font-size: .7rem; color: #718096; flex: 0 0 auto;
}
.vlc-plot { position: relative; flex: 1; min-width: 0; }
.vlc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Einblendung von links über die Gruppe — Linien und Flächen bleiben durchgehend. */
.vlc-reveal { clip-path: inset(0 100% 0 0); animation: vlc-reveal 700ms cubic-bezier(.2, .7, .3, 1) forwards; }

/* Grid: je Design andere Linienfarbe (die Komponenten werden in beiden Designs genutzt) */
.vlc-grid { stroke: rgba(34, 48, 31, .10); }
.vlc-zero { stroke: rgba(34, 48, 31, .25); }
[data-bh-theme="vision"] .vlc-grid { stroke: rgba(255, 255, 255, .05); }
[data-bh-theme="vision"] .vlc-zero { stroke: rgba(255, 255, 255, .14); }

.vlc-guide {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: rgba(34, 48, 31, .20); transform: translateX(-.5px); pointer-events: none;
}
[data-bh-theme="vision"] .vlc-guide { background: rgba(255, 255, 255, .15); }
.vlc-marker {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .9);
    transform: translate(-50%, -50%); pointer-events: none;
}
.vlc-cols { position: absolute; inset: 0; display: flex; }
.vlc-cols > div { flex: 1; }

.vlc-tooltip {
    position: absolute; top: 0; transform: translate(-50%, -8px); min-width: 176px;
    background: rgba(10, 20, 40, .92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    padding: 10px 12px; pointer-events: none; z-index: 5;
}
.vlc-tooltip.vlc-tt-left { transform: translate(0, -8px); }
.vlc-tooltip.vlc-tt-right { transform: translate(-100%, -8px); }
.vlc-tt-title { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bh-text-secondary); margin-bottom: 6px; }
.vlc-tt-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: .8rem; }
.vlc-tt-name { color: var(--bh-text-secondary); }
.vlc-tt-value { margin-left: auto; color: #FFFFFF; font-weight: 600; }
.vlc-tt-delta { margin-top: 6px; font-size: .75rem; font-weight: 600; }
.vlc-tt-delta.up { color: #01B574; }
.vlc-tt-delta.down { color: #F05252; }

.vlc-xlabels {
    display: flex; justify-content: space-between;
    margin-left: 74px; margin-top: 8px; font-size: .7rem; color: var(--bh-text-secondary);
}

@media (max-width: 600px) {
    /* Auf schmalen Displays: jedes zweite Monatslabel ausblenden statt zu quetschen */
    .vlc-xlabels span:nth-child(even) { display: none; }
    .vlc-ylabels { width: 52px; }
    .vlc-xlabels { margin-left: 62px; }
}

@keyframes vlc-reveal { to { clip-path: inset(0 0 0 0); } }

/* Donut */
.vdc { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vdc-ring { position: relative; width: 210px; max-width: 100%; }
.vdc-ring svg { display: block; width: 100%; animation: vdc-in 500ms ease-out; }
.vdc-seg { transition: stroke-width 150ms ease; cursor: pointer; }
.vdc-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.vdc-center-value { font-size: 1.15rem; font-weight: 700; color: var(--bh-text); }
.vdc-center-label { font-size: .68rem; color: var(--bh-text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.vdc-legend { width: 100%; display: flex; flex-direction: column; gap: 2px; }
.vdc-legend-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px;
    border-radius: 8px; font-size: .8rem; transition: background-color 150ms ease;
}
.vdc-legend-row.hover, .vdc-legend-row:hover { background: rgba(255, 255, 255, .05); }
.vdc-legend-label { color: var(--bh-text-secondary); }
.vdc-legend-value { margin-left: auto; color: var(--bh-text); font-weight: 600; }

@keyframes vdc-in {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: none; }
}

/* ---------- Auswertungen (Vorlage: Vision-Mockups) ----------
   KPI-Kacheln, Balkenlisten, Angebots-Trichter und Summenzeilen. Die Basis-Styles
   nutzen Tokens und funktionieren in beiden Designs; „Vision“ legt die getönten
   Verlaufsflächen und Glows darüber. */

/* KPI-Kacheln */
.bh-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }

.bh-kpi-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bh-surface);
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    padding: 14px 16px;
}

.bh-kpi-icon {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; color: #FFFFFF;
}
.bh-kpi-blue .bh-kpi-icon { background: linear-gradient(135deg, #0075FF, #00A3FF); }
.bh-kpi-red .bh-kpi-icon { background: linear-gradient(135deg, #F05252, #FF7A9C); }
.bh-kpi-green .bh-kpi-icon { background: linear-gradient(135deg, #01B574, #2CD9A5); }

.bh-kpi-title { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bh-text-secondary); }
.bh-kpi-value { font-size: 1.35rem; font-weight: 700; color: var(--bh-text); line-height: 1.25; }
.bh-kpi-delta, .bh-kpi-sub { font-size: .75rem; color: var(--bh-text-secondary); }
.bh-kpi-delta.up { color: #01B574; font-weight: 600; }
.bh-kpi-delta.down { color: #F05252; font-weight: 600; }

[data-bh-theme="vision"] .bh-kpi-blue { background: linear-gradient(120deg, rgba(0, 117, 255, .22), rgba(10, 20, 40, .80)); }
[data-bh-theme="vision"] .bh-kpi-red { background: linear-gradient(120deg, rgba(240, 82, 82, .20), rgba(10, 20, 40, .80)); }
[data-bh-theme="vision"] .bh-kpi-green { background: linear-gradient(120deg, rgba(1, 181, 116, .20), rgba(10, 20, 40, .80)); }

/* Balkenliste */
.bh-barlist { display: flex; flex-direction: column; gap: 10px; }
.bh-barlist-row { display: flex; align-items: center; gap: 10px; }
.bh-barlist-label {
    flex: 0 0 160px; max-width: 40%;
    font-size: .8rem; color: var(--bh-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.bh-barlist-track { flex: 1; height: 14px; border-radius: 7px; background: var(--bh-surface-sunken); overflow: hidden; }
.bh-barlist-bar { height: 100%; border-radius: 7px; transition: width 500ms cubic-bezier(.2, .7, .3, 1); }
[data-bh-theme="vision"] .bh-barlist-bar { box-shadow: 0 0 8px rgba(0, 117, 255, .25); }
.bh-barlist-value { flex: 0 0 auto; min-width: 84px; font-size: .8rem; font-weight: 600; color: var(--bh-text); text-align: right; }

/* Angebots-Trichter */
.bh-funnel { display: flex; gap: 6px; }
.bh-funnel-stage {
    flex: 1; min-width: 0; text-align: center; color: #FFFFFF;
    padding: 14px 18px 12px 22px;
    /* Fallback zuerst: ohne color-mix-Unterstützung bleibt die Vollfarbe */
    background: var(--stage-color);
    background: linear-gradient(135deg, var(--stage-color), color-mix(in srgb, var(--stage-color) 55%, #050B18));
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.bh-funnel-count { font-size: 1.4rem; font-weight: 700; }
.bh-funnel-label { font-size: .8rem; font-weight: 600; }
.bh-funnel-amount { font-size: .75rem; opacity: .85; }
.bh-funnel-pct { font-size: .72rem; opacity: .7; margin-top: 2px; }

@media (max-width: 700px) {
    .bh-funnel { flex-direction: column; }
    .bh-funnel-stage { clip-path: none; border-radius: 10px; padding: 10px; }
}

/* Auswertungs-Tabelle: Summen-/Kennzahlzeilen hervorheben, Kopf im Vision-Stil */
.bh-report-table tr.bh-report-total td { font-weight: 700; color: var(--bh-text); }
[data-bh-theme="vision"] .bh-report-table tr.bh-report-total td { background: rgba(0, 117, 255, .14); }
.bh-report-table tr.bh-report-total td:first-child { border-radius: 8px 0 0 8px; }
.bh-report-table tr.bh-report-total td:last-child { border-radius: 0 8px 8px 0; }

/* ---------- Vertriebskarte (Leaflet-Popups liegen außerhalb des Mud-Baums) ---------- */

[data-bh-theme="vision"] .leaflet-popup-content-wrapper,
[data-bh-theme="vision"] .leaflet-popup-tip {
    background: #0A1428;
    color: var(--bh-text);
    box-shadow: var(--bh-shadow);
}

/* ---------- Scrollbalken ---------- */

[data-bh-theme="vision"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-bh-theme="vision"] ::-webkit-scrollbar-track { background: transparent; }
[data-bh-theme="vision"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 5px;
}
[data-bh-theme="vision"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }

/* ---------- Ladezustände ---------- */

[data-bh-theme="vision"] .mud-skeleton {
    background-color: rgba(255, 255, 255, .06);
}