/* ==========================================================================
   NFB.Dispatch – Designsystem
   Leitstellen- und Einsatzkoordinationssoftware
   --------------------------------------------------------------------------
   Aufbau
   00  Design-Tokens (Dark / Light)
   01  Reset und Basis
   02  Typografie
   03  Layout: App-Shell, Seitenkopf, Sektionen
   04  Navigation (Topbar)
   05  Buttons
   06  Formulare
   07  Cards, Panels, Listen
   08  Tabellen
   09  Status-Badges
   10  Meldungen (Alerts)
   11  Kennzahlen (Metric-Tiles)
   12  Einsatzliste und Einsatzdetails
   13  Chronik (Timeline)
   14  Tabs und Pills
   15  Modals und Dropdowns
   16  Karte, Medien
   17  Statusleiste (Bottombar)
   18  Authentifizierung
   19  Utilities
   20  Responsive
   ========================================================================== */

/* ==========================================================================
   00  DESIGN-TOKENS
   ========================================================================== */

:root {
    /* --- Markenidentität ------------------------------------------------ */
    --nfb-brand:            #e2001a;
    --nfb-brand-deep:       #a80014;

    /* --- Primärfarbe: operative Interaktion ----------------------------- */
    --nfb-primary:          #3d7bff;
    --nfb-primary-strong:   #2c63da;
    --nfb-primary-weak:     rgba(61, 123, 255, 0.14);
    --nfb-primary-line:     rgba(61, 123, 255, 0.38);
    --nfb-primary-text:     #8fb4ff;

    /* --- Sekundärfarbe: neutrale Aktionen ------------------------------- */
    --nfb-secondary:        #46586f;
    --nfb-secondary-weak:   rgba(148, 167, 193, 0.10);

    /* --- Flächen -------------------------------------------------------- */
    --nfb-canvas:           #0b1017;
    --nfb-surface:          #131a24;
    --nfb-surface-2:        #18212e;
    --nfb-surface-3:        #1f2a39;
    --nfb-surface-sunken:   #090d13;

    /* --- Rahmen --------------------------------------------------------- */
    --nfb-border:           #223042;
    --nfb-border-strong:    #32445c;
    --nfb-border-subtle:    #1a2532;

    /* --- Text ----------------------------------------------------------- */
    --nfb-text:             #e8eef6;
    --nfb-text-secondary:   #9dadc2;
    --nfb-text-muted:       #6c7e95;
    --nfb-text-inverse:     #0b1017;

    /* --- Statusfarben --------------------------------------------------- */
    --nfb-st-available:     #34c77b;   /* verfügbar        */
    --nfb-st-enroute:       #f0a92a;   /* unterwegs        */
    --nfb-st-onsite:        #4d9dff;   /* vor Ort          */
    --nfb-st-active:        #ff5c6a;   /* aktiv / laufend  */
    --nfb-st-done:          #8697ae;   /* abgeschlossen    */
    --nfb-st-warning:       #f0a92a;   /* Warnung          */
    --nfb-st-critical:      #ff4d5e;   /* kritisch         */
    --nfb-st-error:         #ff4d5e;   /* Fehler           */
    --nfb-st-offline:       #5f7086;   /* offline          */
    --nfb-st-info:          #4d9dff;   /* Information      */

    /* --- Abstände ------------------------------------------------------- */
    --nfb-sp-1:  4px;
    --nfb-sp-2:  8px;
    --nfb-sp-3:  12px;
    --nfb-sp-4:  16px;
    --nfb-sp-5:  20px;
    --nfb-sp-6:  24px;
    --nfb-sp-8:  32px;
    --nfb-sp-10: 40px;

    /* --- Radien --------------------------------------------------------- */
    --nfb-r-xs:  3px;
    --nfb-r-sm:  5px;
    --nfb-r-md:  7px;
    --nfb-r-lg:  10px;
    --nfb-r-xl:  14px;
    --nfb-r-pill: 999px;

    /* --- Schatten ------------------------------------------------------- */
    --nfb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --nfb-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.28);
    --nfb-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.32);
    --nfb-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.44);

    /* --- Typografie ----------------------------------------------------- */
    --nfb-font: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --nfb-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --nfb-fs-h1:     1.375rem;   /* 22px – Seitentitel            */
    --nfb-fs-h2:     1.0625rem;  /* 17px – Sektionstitel          */
    --nfb-fs-h3:     0.9375rem;  /* 15px – Panel-/Karten-Titel    */
    --nfb-fs-body:   0.875rem;   /* 14px – Fließtext              */
    --nfb-fs-sm:     0.8125rem;  /* 13px – Sekundärtext, Tabellen */
    --nfb-fs-xs:     0.75rem;    /* 12px – Metadaten              */
    --nfb-fs-label:  0.6875rem;  /* 11px – Labels, Badges         */

    --nfb-lh-tight:  1.25;
    --nfb-lh-base:   1.55;

    /* --- Bewegung ------------------------------------------------------- */
    --nfb-t-fast:   110ms cubic-bezier(0.4, 0, 0.2, 1);
    --nfb-t-base:   160ms cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Maße ----------------------------------------------------------- */
    --nfb-topbar-h:    58px;
    --nfb-bottombar-h: 34px;
    --nfb-control-h:   36px;
    --nfb-control-h-sm:30px;
    --nfb-control-h-lg:44px;

    /* Bootstrap-Brücke */
    --bs-body-font-family: var(--nfb-font);
    --bs-body-bg: var(--nfb-canvas);
    --bs-body-color: var(--nfb-text);
    --bs-border-color: var(--nfb-border);
    --bs-link-color: var(--nfb-primary-text);
    --bs-link-hover-color: #b3ccff;
    --bs-focus-ring-color: rgba(61, 123, 255, 0.30);
}

/* --- Helles Thema: identische Struktur, angepasste Rollen --------------- */
[data-bs-theme="light"] {
    --nfb-primary:          #1d5bd6;
    --nfb-primary-strong:   #164aae;
    --nfb-primary-weak:     rgba(29, 91, 214, 0.09);
    --nfb-primary-line:     rgba(29, 91, 214, 0.32);
    --nfb-primary-text:     #1d5bd6;

    --nfb-secondary:        #5d6f87;
    --nfb-secondary-weak:   rgba(29, 52, 87, 0.05);

    --nfb-canvas:           #eef1f6;
    --nfb-surface:          #ffffff;
    --nfb-surface-2:        #f6f8fb;
    --nfb-surface-3:        #eef2f7;
    --nfb-surface-sunken:   #e6eaf1;

    --nfb-border:           #d7dee8;
    --nfb-border-strong:    #b9c4d3;
    --nfb-border-subtle:    #e4e9f0;

    --nfb-text:             #101a28;
    --nfb-text-secondary:   #52637a;
    --nfb-text-muted:       #76869b;
    --nfb-text-inverse:     #ffffff;

    --nfb-st-available:     #0f8f4f;
    --nfb-st-enroute:       #b4700a;
    --nfb-st-onsite:        #1b62c9;
    --nfb-st-active:        #c8102e;
    --nfb-st-done:          #5d6f87;
    --nfb-st-warning:       #b4700a;
    --nfb-st-critical:      #c8102e;
    --nfb-st-error:         #c8102e;
    --nfb-st-offline:       #7c8ca1;
    --nfb-st-info:          #1b62c9;

    --nfb-shadow-xs: 0 1px 2px rgba(16, 26, 40, 0.06);
    --nfb-shadow-sm: 0 2px 6px rgba(16, 26, 40, 0.07);
    --nfb-shadow-md: 0 8px 20px rgba(16, 26, 40, 0.09);
    --nfb-shadow-lg: 0 20px 48px rgba(16, 26, 40, 0.14);
}


/* ==========================================================================
   01  RESET UND BASIS
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--nfb-border-strong) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--nfb-border-strong);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--nfb-r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--nfb-text-muted); background-clip: content-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    margin: 0;
    padding-bottom: var(--nfb-bottombar-h);
    color: var(--nfb-text);
    background-color: var(--nfb-canvas);
    font-family: var(--nfb-font);
    font-size: var(--nfb-fs-body);
    line-height: var(--nfb-lh-base);
    font-feature-settings: "tnum" 0, "cv05" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Dezente technische Rasterstruktur – bewusst sehr schwach, nicht dekorativ. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(148, 173, 209, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 173, 209, 0.028) 1px, transparent 1px);
    background-size: 32px 32px;
}
[data-bs-theme="light"] body::before { opacity: 0.75;
    background-image:
        linear-gradient(rgba(29, 52, 87, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 52, 87, 0.022) 1px, transparent 1px);
}

::selection { background: var(--nfb-primary-weak); color: var(--nfb-text); }

:focus-visible {
    outline: 2px solid var(--nfb-primary);
    outline-offset: 2px;
    border-radius: var(--nfb-r-sm);
}

hr { border-color: var(--nfb-border); opacity: 1; }

a { color: var(--nfb-primary-text); text-decoration: none; transition: color var(--nfb-t-fast); }
a:hover { color: var(--nfb-primary); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   02  TYPOGRAFIE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--nfb-text);
    font-weight: 600;
    line-height: var(--nfb-lh-tight);
    letter-spacing: -0.011em;
}

h1, .nfb-h1 { font-size: var(--nfb-fs-h1); font-weight: 640; }
h2, .nfb-h2 { font-size: var(--nfb-fs-h2); }
h3, .nfb-h3 { font-size: var(--nfb-fs-h3); }
h4 { font-size: var(--nfb-fs-h3); }
h5 { font-size: var(--nfb-fs-body); }
h6 { font-size: var(--nfb-fs-sm); }

p { margin: 0 0 var(--nfb-sp-3); }
p:last-child { margin-bottom: 0; }

small, .small { font-size: var(--nfb-fs-sm); }

/* Sektionsüberschrift innerhalb eines Panels */
.nfb-section-title {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    margin: 0 0 var(--nfb-sp-3);
    padding-bottom: var(--nfb-sp-2);
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--nfb-border);
}
.nfb-section-title .bi { color: var(--nfb-text-muted); font-size: 0.9rem; }

/* Kleines Label über einem Wert */
.nfb-label {
    display: block;
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-label);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Technische Kennungen, Zeiten, Koordinaten */
.nfb-mono,
.nfb-id {
    font-family: var(--nfb-font-mono);
    font-size: var(--nfb-fs-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.nfb-id { color: var(--nfb-text-secondary); }

.nfb-time {
    font-family: var(--nfb-font-mono);
    font-size: var(--nfb-fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--nfb-text-muted);
    white-space: nowrap;
}

/* Bootstrap-Textrollen auf das Designsystem ziehen */
.text-light, .text-white { color: var(--nfb-text) !important; }
.text-secondary { color: var(--nfb-text-secondary) !important; }
.text-muted { color: var(--nfb-text-muted) !important; }
.text-primary { color: var(--nfb-primary-text) !important; }
.text-info { color: var(--nfb-st-info) !important; }
.text-success { color: var(--nfb-st-available) !important; }
.text-warning { color: var(--nfb-st-warning) !important; }
.text-danger { color: var(--nfb-st-critical) !important; }


/* ==========================================================================
   03  LAYOUT
   ========================================================================== */

.nfb-main {
    max-width: 1840px;
    margin: 0 auto;
    padding: var(--nfb-sp-5) var(--nfb-sp-6) var(--nfb-sp-8);
}

/* Seitenkopf: Titel, Kontext, globale Aktionen */
.nfb-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nfb-sp-5);
    flex-wrap: wrap;
    padding-bottom: var(--nfb-sp-4);
    margin-bottom: var(--nfb-sp-5);
    border-bottom: 1px solid var(--nfb-border);
}
.nfb-page-header__main { min-width: 0; }
.nfb-page-header__eyebrow {
    display: block;
    margin-bottom: var(--nfb-sp-1);
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.nfb-page-header h1 { font-size: var(--nfb-fs-h1); }
.nfb-page-header__meta {
    margin: var(--nfb-sp-2) 0 0;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-sm);
}
.nfb-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    flex-wrap: wrap;
}

/* Betriebsanzeige „Live" */
.nfb-live {
    display: inline-flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    height: var(--nfb-control-h);
    padding: 0 var(--nfb-sp-3);
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    background: var(--nfb-surface);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
}
.nfb-live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--nfb-st-available);
    box-shadow: 0 0 0 3px rgba(52, 199, 123, 0.16);
}


/* ==========================================================================
   04  NAVIGATION
   ========================================================================== */

.nfb-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--nfb-topbar-h);
    padding: 0;
    background: var(--nfb-surface);
    border-bottom: 1px solid var(--nfb-border);
    box-shadow: var(--nfb-shadow-xs);
}
.nfb-topbar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nfb-sp-5);
    width: 100%;
    max-width: 1840px;
    min-height: var(--nfb-topbar-h);
    margin: 0 auto;
    padding: 0 var(--nfb-sp-6);
}
.nfb-topbar__collapse { flex-grow: 0; }

/* Markenzeichen */
.nfb-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nfb-sp-3);
    flex-shrink: 0;
    color: var(--nfb-text);
    text-decoration: none;
}
.nfb-brand:hover { color: var(--nfb-text); }
.nfb-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 32px; height: 32px;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(160deg, var(--nfb-brand) 0%, var(--nfb-brand-deep) 100%);
    border-radius: var(--nfb-r-md);
}
.nfb-brand__mark .bi { font-size: 1rem; }
.nfb-brand__text { display: grid; line-height: 1.1; }
.nfb-brand__name {
    font-size: 0.9375rem;
    font-weight: 680;
    letter-spacing: 0.005em;
}
.nfb-brand__sub {
    margin-top: 2px;
    color: var(--nfb-text-muted);
    font-size: 0.5625rem;
    font-weight: 650;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Hauptnavigation */
.nfb-nav {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nfb-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    height: 34px;
    padding: 0 var(--nfb-sp-3);
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-sm);
    font-weight: 550;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--nfb-r-md);
    transition: color var(--nfb-t-fast), background-color var(--nfb-t-fast), border-color var(--nfb-t-fast);
}
.nfb-nav__link .bi { font-size: 0.9375rem; opacity: 0.85; }
.nfb-nav__link:hover {
    color: var(--nfb-text);
    background: var(--nfb-secondary-weak);
}
.nfb-nav__link:focus-visible { outline-offset: 1px; }
.nfb-nav__link.is-active {
    color: var(--nfb-text);
    background: var(--nfb-surface-3);
    border-color: var(--nfb-border-strong);
    font-weight: 620;
}
.nfb-nav__link.is-active .bi { color: var(--nfb-primary); opacity: 1; }
.nfb-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: var(--nfb-sp-3);
    right: var(--nfb-sp-3);
    bottom: -1px;
    height: 2px;
    background: var(--nfb-primary);
    border-radius: 2px 2px 0 0;
}

/* Nutzerbereich rechts */
.nfb-topbar__user {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-3);
    margin-left: auto;
    flex-shrink: 0;
}
.nfb-user-meta { text-align: right; line-height: 1.25; }
.nfb-user-meta__name {
    display: block;
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    font-weight: 620;
    white-space: nowrap;
}
.nfb-user-meta__role {
    display: block;
    margin-top: 1px;
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nfb-avatar {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    font-weight: 650;
    cursor: pointer;
    background: var(--nfb-surface-3);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-md);
    transition: border-color var(--nfb-t-fast), background-color var(--nfb-t-fast);
}
.nfb-avatar:hover { background: var(--nfb-surface-sunken); border-color: var(--nfb-primary-line); }

/* Umschalter für schmale Viewports */
.nfb-topbar__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin-left: auto;
    color: var(--nfb-text-secondary);
    background: transparent;
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
    cursor: pointer;
}
.nfb-topbar__toggle:hover { color: var(--nfb-text); background: var(--nfb-secondary-weak); }


/* ==========================================================================
   05  BUTTONS
   ========================================================================== */

.btn,
.nfb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nfb-sp-2);
    height: var(--nfb-control-h);
    padding: 0 var(--nfb-sp-4);
    color: var(--nfb-text);
    font-family: var(--nfb-font);
    font-size: var(--nfb-fs-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--nfb-r-md);
    transition: background-color var(--nfb-t-fast), border-color var(--nfb-t-fast),
                color var(--nfb-t-fast), box-shadow var(--nfb-t-fast);
}
.btn .bi { font-size: 0.9375rem; }
.btn:focus-visible {
    outline: 2px solid var(--nfb-primary);
    outline-offset: 2px;
    box-shadow: none !important;
}
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none;
}

/* Primär – wichtigste Aktion der Ansicht */
.btn-primary,
.btn-primary-nfb,
.nfb-btn--primary {
    color: #fff;
    background: var(--nfb-primary);
    border-color: var(--nfb-primary);
    box-shadow: var(--nfb-shadow-xs);
}
.btn-primary:hover, .btn-primary-nfb:hover, .nfb-btn--primary:hover,
.btn-primary:focus, .btn-primary-nfb:focus {
    color: #fff;
    background: var(--nfb-primary-strong);
    border-color: var(--nfb-primary-strong);
}
.btn-primary:active, .btn-primary-nfb:active { background: var(--nfb-primary-strong); transform: translateY(1px); }
.btn-check:checked + .btn-primary { background: var(--nfb-primary-strong); border-color: var(--nfb-primary-strong); }

/* Sekundär – gleichrangige, aber nicht führende Aktionen */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-light,
.nfb-btn--secondary {
    color: var(--nfb-text);
    background: var(--nfb-surface-2);
    border-color: var(--nfb-border-strong);
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover,
.btn-outline-light:hover, .nfb-btn--secondary:hover {
    color: var(--nfb-text);
    background: var(--nfb-surface-3);
    border-color: var(--nfb-text-muted);
}
.btn-outline-primary { color: var(--nfb-primary-text); border-color: var(--nfb-primary-line); }
.btn-outline-primary:hover { color: #fff; background: var(--nfb-primary); border-color: var(--nfb-primary); }

/* Ghost – dezente Nebenaktionen */
.btn-ghost,
.btn-link,
.nfb-btn--ghost {
    color: var(--nfb-text-secondary);
    background: transparent;
    border-color: transparent;
    text-decoration: none;
}
.btn-ghost:hover, .btn-link:hover, .nfb-btn--ghost:hover {
    color: var(--nfb-text);
    background: var(--nfb-secondary-weak);
    text-decoration: none;
}

/* Danger – destruktive oder kritische Aktionen */
.btn-danger,
.nfb-btn--danger {
    color: #fff;
    background: var(--nfb-st-critical);
    border-color: var(--nfb-st-critical);
}
.btn-danger:hover, .nfb-btn--danger:hover { color: #fff; background: #e13646; border-color: #e13646; }
.btn-outline-danger {
    color: var(--nfb-st-critical);
    background: transparent;
    border-color: color-mix(in srgb, var(--nfb-st-critical) 42%, transparent);
}
.btn-outline-danger:hover { color: #fff; background: var(--nfb-st-critical); border-color: var(--nfb-st-critical); }

/* Weitere Bootstrap-Varianten in das System einordnen */
.btn-info, .btn-outline-info {
    color: var(--nfb-st-info);
    background: transparent;
    border-color: color-mix(in srgb, var(--nfb-st-info) 42%, transparent);
}
.btn-info:hover, .btn-outline-info:hover { color: #fff; background: var(--nfb-st-info); border-color: var(--nfb-st-info); }
.btn-warning, .btn-outline-warning {
    color: var(--nfb-st-warning);
    background: transparent;
    border-color: color-mix(in srgb, var(--nfb-st-warning) 45%, transparent);
}
.btn-warning:hover, .btn-outline-warning:hover { color: var(--nfb-text-inverse); background: var(--nfb-st-warning); border-color: var(--nfb-st-warning); }
.btn-success, .btn-outline-success {
    color: var(--nfb-st-available);
    background: transparent;
    border-color: color-mix(in srgb, var(--nfb-st-available) 42%, transparent);
}
.btn-success:hover, .btn-outline-success:hover { color: #fff; background: var(--nfb-st-available); border-color: var(--nfb-st-available); }

/* Größen */
.btn-sm, .btn-xs {
    height: var(--nfb-control-h-sm);
    padding: 0 var(--nfb-sp-3);
    font-size: var(--nfb-fs-xs);
    border-radius: var(--nfb-r-sm);
}
.btn-sm .bi, .btn-xs .bi { font-size: 0.8125rem; }
.btn-lg {
    height: var(--nfb-control-h-lg);
    padding: 0 var(--nfb-sp-5);
    font-size: var(--nfb-fs-body);
}

/* Icon-Button – quadratisch, nur Symbol */
.nfb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nfb-control-h);
    height: var(--nfb-control-h);
    padding: 0;
    flex-shrink: 0;
    color: var(--nfb-text-secondary);
    background: transparent;
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
    cursor: pointer;
    transition: color var(--nfb-t-fast), background-color var(--nfb-t-fast), border-color var(--nfb-t-fast);
}
.nfb-icon-btn .bi { font-size: 0.9375rem; }
.nfb-icon-btn:hover { color: var(--nfb-text); background: var(--nfb-surface-3); border-color: var(--nfb-border-strong); }
.nfb-icon-btn--sm { width: var(--nfb-control-h-sm); height: var(--nfb-control-h-sm); border-radius: var(--nfb-r-sm); }
.nfb-icon-btn--sm .bi { font-size: 0.8125rem; }
.nfb-icon-btn--danger:hover { color: #fff; background: var(--nfb-st-critical); border-color: var(--nfb-st-critical); }

/* Gruppe aus Buttons in einer Tabellenzeile */
.nfb-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nfb-sp-1);
}
.nfb-row-actions form { display: inline-flex; margin: 0; }


/* ==========================================================================
   06  FORMULARE
   ========================================================================== */

.form-label,
.nfb-form-label {
    display: block;
    margin-bottom: var(--nfb-sp-1);
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}
.form-label .nfb-req,
.nfb-req { color: var(--nfb-st-critical); font-weight: 700; }

.form-control,
.form-select,
.nfb-input {
    display: block;
    width: 100%;
    min-height: var(--nfb-control-h);
    padding: 0 var(--nfb-sp-3);
    color: var(--nfb-text) !important;
    font-family: var(--nfb-font);
    font-size: var(--nfb-fs-sm) !important;
    line-height: calc(var(--nfb-control-h) - 2px);
    background-color: var(--nfb-surface-sunken) !important;
    border: 1px solid var(--nfb-border) !important;
    border-radius: var(--nfb-r-md) !important;
    box-shadow: none !important;
    transition: border-color var(--nfb-t-fast), background-color var(--nfb-t-fast), box-shadow var(--nfb-t-fast);
}
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select { background-color: #fff !important; }

textarea.form-control {
    padding-top: var(--nfb-sp-2);
    padding-bottom: var(--nfb-sp-2);
    line-height: var(--nfb-lh-base);
    resize: vertical;
}

.form-select {
    padding-right: var(--nfb-sp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239dadc2'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--nfb-sp-3) center !important;
    background-size: 12px !important;
    appearance: none;
}
.form-select option { background: var(--nfb-surface); color: var(--nfb-text); }

.form-control::placeholder { color: var(--nfb-text-muted); opacity: 1; }

.form-control:hover:not(:focus):not([readonly]):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: var(--nfb-border-strong) !important; }

.form-control:focus,
.form-select:focus {
    border-color: var(--nfb-primary) !important;
    box-shadow: 0 0 0 3px var(--nfb-primary-weak) !important;
    outline: none;
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    color: var(--nfb-text-muted) !important;
    background-color: var(--nfb-surface-3) !important;
    cursor: not-allowed;
}

.form-control-sm, .form-select-sm {
    min-height: var(--nfb-control-h-sm);
    padding: 0 var(--nfb-sp-2);
    font-size: var(--nfb-fs-xs) !important;
    line-height: calc(var(--nfb-control-h-sm) - 2px);
    border-radius: var(--nfb-r-sm) !important;
}
.form-select-sm { padding-right: var(--nfb-sp-6); }

.is-invalid, .form-control.is-invalid { border-color: var(--nfb-st-error) !important; }
.invalid-feedback, .nfb-field-error {
    display: block;
    margin-top: var(--nfb-sp-1);
    color: var(--nfb-st-error);
    font-size: var(--nfb-fs-xs);
}
.form-text, .nfb-field-hint {
    display: block;
    margin-top: var(--nfb-sp-1);
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-xs);
}

/* Eingabegruppe mit führendem Symbol */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 0 var(--nfb-sp-3);
    color: var(--nfb-text-muted) !important;
    font-size: var(--nfb-fs-sm);
    background-color: var(--nfb-surface-3) !important;
    border: 1px solid var(--nfb-border) !important;
    border-right: 0 !important;
    border-radius: var(--nfb-r-md) 0 0 var(--nfb-r-md) !important;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
}
.input-group:focus-within .input-group-text { border-color: var(--nfb-primary) !important; }

/* Checkbox / Radio / Switch */
.form-check { padding-left: 1.6em; min-height: auto; margin-bottom: var(--nfb-sp-2); }
.form-check-input {
    width: 1em; height: 1em;
    margin-top: 0.28em;
    margin-left: -1.6em;
    background-color: var(--nfb-surface-sunken);
    border: 1px solid var(--nfb-border-strong);
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color var(--nfb-t-fast), border-color var(--nfb-t-fast);
}
.form-check-input:checked { background-color: var(--nfb-primary); border-color: var(--nfb-primary); }
.form-check-input:focus-visible { outline: 2px solid var(--nfb-primary); outline-offset: 2px; }
.form-check-label {
    color: var(--nfb-text) !important;
    font-size: var(--nfb-fs-sm);
    cursor: pointer;
}
.form-switch { padding-left: 2.6em; }
.form-switch .form-check-input { width: 2em; margin-left: -2.6em; border-radius: var(--nfb-r-pill); }

/* Gerahmte Optionsgruppe (z. B. Rollenauswahl) */
.nfb-option-group {
    padding: var(--nfb-sp-3);
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
}
.nfb-option-group .form-check:last-child { margin-bottom: 0; }

/* Formular-Fußzeile mit klarer Primäraktion */
.nfb-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nfb-sp-2);
    padding-top: var(--nfb-sp-4);
    margin-top: var(--nfb-sp-5);
    border-top: 1px solid var(--nfb-border);
}


/* ==========================================================================
   07  CARDS, PANELS, LISTEN
   ========================================================================== */

.card,
.nfb-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--nfb-text);
    background-color: var(--nfb-surface) !important;
    background-image: none !important;
    border: 1px solid var(--nfb-border) !important;
    border-radius: var(--nfb-r-lg) !important;
    box-shadow: var(--nfb-shadow-xs);
}

.card-header,
.nfb-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nfb-sp-3);
    min-height: 46px;
    padding: var(--nfb-sp-2) var(--nfb-sp-4) !important;
    color: var(--nfb-text) !important;
    background-color: var(--nfb-surface-2) !important;
    border-bottom: 1px solid var(--nfb-border) !important;
    border-radius: var(--nfb-r-lg) var(--nfb-r-lg) 0 0 !important;
}
.card-header h5, .card-header h6, .card-header .card-title {
    margin: 0;
    color: var(--nfb-text) !important;
    font-size: var(--nfb-fs-h3);
    font-weight: 620;
}

/* Panel-Titel: kompakte, ruhige Variante für Werkzeugpanels */
.nfb-panel__title {
    display: inline-flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.nfb-panel__title .bi { font-size: 0.875rem; color: var(--nfb-text-muted); }
.nfb-panel__count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    color: var(--nfb-text);
    font-family: var(--nfb-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--nfb-surface-3);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-xs);
}

.card-body { padding: var(--nfb-sp-4); color: var(--nfb-text); }
.card-footer {
    padding: var(--nfb-sp-3) var(--nfb-sp-4) !important;
    background-color: var(--nfb-surface-2) !important;
    border-top: 1px solid var(--nfb-border) !important;
    border-radius: 0 0 var(--nfb-r-lg) var(--nfb-r-lg) !important;
}

/* Panel mit scrollbarem Inhalt */
.nfb-scroll { overflow-y: auto; overscroll-behavior: contain; }

/* Leerzustand */
.nfb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nfb-sp-2);
    padding: var(--nfb-sp-10) var(--nfb-sp-5);
    color: var(--nfb-text-muted);
    text-align: center;
}
.nfb-empty .bi { font-size: 1.75rem; opacity: 0.45; }
.nfb-empty strong { display: block; color: var(--nfb-text-secondary); font-size: var(--nfb-fs-sm); font-weight: 600; }
.nfb-empty span { font-size: var(--nfb-fs-xs); max-width: 44ch; }

/* Datenliste: Bezeichnung / Wert */
.nfb-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--nfb-sp-4) var(--nfb-sp-5);
}
.nfb-data-item { min-width: 0; }
.nfb-data-item__label {
    display: block;
    margin-bottom: 2px;
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nfb-data-item__value {
    display: block;
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    font-weight: 500;
    overflow-wrap: anywhere;
}
.nfb-data-item__value--empty { color: var(--nfb-text-muted); }
.nfb-data-item__value--id { font-family: var(--nfb-font-mono); font-size: var(--nfb-fs-xs); }

/* Hervorgehobener Fließtext, z. B. Erstmeldung */
.nfb-readout {
    padding: var(--nfb-sp-3) var(--nfb-sp-4);
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    line-height: 1.6;
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-left: 3px solid var(--nfb-primary);
    border-radius: var(--nfb-r-sm);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Bootstrap-Listen */
.list-group { border-radius: var(--nfb-r-md); }
.list-group-item {
    color: var(--nfb-text) !important;
    background-color: var(--nfb-surface-2) !important;
    border-color: var(--nfb-border) !important;
    font-size: var(--nfb-fs-sm);
}
.list-group-item-action { cursor: pointer; transition: background-color var(--nfb-t-fast); }
.list-group-item-action:hover { background-color: var(--nfb-surface-3) !important; }
.list-group-flush > .list-group-item { border-left: 0; border-right: 0; }

/* Auswahlliste für Autovervollständigung */
#addressSuggestions,
#ormSuggestions {
    background: var(--nfb-surface);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-md);
    box-shadow: var(--nfb-shadow-md);
    overflow: hidden;
}
#addressSuggestions:empty,
#ormSuggestions:empty { display: none; }
#addressSuggestions .list-group-item,
#ormSuggestions .list-group-item {
    background-color: var(--nfb-surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--nfb-border-subtle) !important;
    font-size: var(--nfb-fs-xs);
}
#addressSuggestions .list-group-item:last-child,
#ormSuggestions .list-group-item:last-child { border-bottom: 0 !important; }
#addressSuggestions .list-group-item-action:hover,
#ormSuggestions .list-group-item-action:hover { background-color: var(--nfb-primary-weak) !important; }


/* ==========================================================================
   08  TABELLEN
   ========================================================================== */

.table,
.nfb-table {
    width: 100%;
    margin: 0;
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    border-collapse: collapse;
    --bs-table-bg: transparent;
    --bs-table-color: var(--nfb-text);
    --bs-table-border-color: var(--nfb-border-subtle);
    --bs-table-hover-bg: var(--nfb-surface-2);
    --bs-table-hover-color: var(--nfb-text);
    --bs-table-striped-bg: var(--nfb-surface-2);
}

.table > thead > tr > th,
.nfb-table > thead > tr > th {
    padding: var(--nfb-sp-2) var(--nfb-sp-4);
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    background: var(--nfb-surface-2);
    border-bottom: 1px solid var(--nfb-border) !important;
    border-top: 0;
}
.card .table > thead > tr:first-child > th:first-child,
.card .nfb-table > thead > tr:first-child > th:first-child,
.nfb-panel .table > thead > tr:first-child > th:first-child,
.nfb-panel .nfb-table > thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--nfb-r-lg);
}
.card .table > thead > tr:first-child > th:last-child,
.card .nfb-table > thead > tr:first-child > th:last-child,
.nfb-panel .table > thead > tr:first-child > th:last-child,
.nfb-panel .nfb-table > thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--nfb-r-lg);
}

.table > tbody > tr > td,
.nfb-table > tbody > tr > td {
    padding: var(--nfb-sp-3) var(--nfb-sp-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--nfb-border-subtle) !important;
    border-top: 0;
}
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }

.table > tbody > tr { transition: background-color var(--nfb-t-fast); }
.table-hover > tbody > tr:hover > * { background-color: var(--nfb-surface-2) !important; color: var(--nfb-text) !important; }

.table .text-end, .nfb-table .text-end { text-align: right; }
.table td.nfb-td-id, .nfb-table td.nfb-td-id { font-family: var(--nfb-font-mono); font-size: var(--nfb-fs-xs); }
.table td strong { font-weight: 620; }

.table-responsive { border-radius: 0 0 var(--nfb-r-lg) var(--nfb-r-lg); }

/* Bootstrap-Dunkelvariante neutralisieren, damit ein Tabellenstil gilt */
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nfb-text);
    --bs-table-border-color: var(--nfb-border-subtle);
    --bs-table-hover-bg: var(--nfb-surface-2);
    --bs-table-hover-color: var(--nfb-text);
}


/* ==========================================================================
   09  STATUS-BADGES
   ========================================================================== */

.nfb-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 7px;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--nfb-surface-3);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-xs);
}
.nfb-status::before {
    content: "";
    width: 5px; height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}
.nfb-status--plain::before { display: none; }
.nfb-status .bi { font-size: 0.75rem; }

.nfb-status--available { color: var(--nfb-st-available); background: color-mix(in srgb, var(--nfb-st-available) 12%, transparent); border-color: color-mix(in srgb, var(--nfb-st-available) 34%, transparent); }
.nfb-status--enroute   { color: var(--nfb-st-enroute);   background: color-mix(in srgb, var(--nfb-st-enroute) 12%, transparent);   border-color: color-mix(in srgb, var(--nfb-st-enroute) 34%, transparent); }
.nfb-status--onsite    { color: var(--nfb-st-onsite);    background: color-mix(in srgb, var(--nfb-st-onsite) 12%, transparent);    border-color: color-mix(in srgb, var(--nfb-st-onsite) 34%, transparent); }
.nfb-status--active    { color: var(--nfb-st-active);    background: color-mix(in srgb, var(--nfb-st-active) 12%, transparent);    border-color: color-mix(in srgb, var(--nfb-st-active) 34%, transparent); }
.nfb-status--critical  { color: var(--nfb-st-critical);  background: color-mix(in srgb, var(--nfb-st-critical) 13%, transparent);  border-color: color-mix(in srgb, var(--nfb-st-critical) 38%, transparent); }
.nfb-status--warning   { color: var(--nfb-st-warning);   background: color-mix(in srgb, var(--nfb-st-warning) 12%, transparent);   border-color: color-mix(in srgb, var(--nfb-st-warning) 34%, transparent); }
.nfb-status--info      { color: var(--nfb-st-info);      background: color-mix(in srgb, var(--nfb-st-info) 12%, transparent);      border-color: color-mix(in srgb, var(--nfb-st-info) 34%, transparent); }
.nfb-status--done      { color: var(--nfb-st-done);      background: color-mix(in srgb, var(--nfb-st-done) 12%, transparent);      border-color: color-mix(in srgb, var(--nfb-st-done) 32%, transparent); }
.nfb-status--offline   { color: var(--nfb-st-offline);   background: color-mix(in srgb, var(--nfb-st-offline) 10%, transparent);   border-color: color-mix(in srgb, var(--nfb-st-offline) 30%, transparent); }
.nfb-status--neutral   { color: var(--nfb-text-secondary); }

/* Ereignisart / Meldebild – sachliche Kennzeichnung, keine Statusfarbe */
.nfb-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    max-width: 100%;
    padding: 0 7px;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-label);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--nfb-surface-3);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-xs);
}
.nfb-tag--role { color: var(--nfb-primary-text); background: var(--nfb-primary-weak); border-color: var(--nfb-primary-line); }

/* Bootstrap-Badges in das System einordnen */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 7px;
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    border-radius: var(--nfb-r-xs);
}
.badge.bg-primary   { color: var(--nfb-primary-text) !important; background: var(--nfb-primary-weak) !important; border-color: var(--nfb-primary-line) !important; }
.badge.bg-secondary { color: var(--nfb-text-secondary) !important; background: var(--nfb-surface-3) !important; border-color: var(--nfb-border-strong) !important; }
.badge.bg-success   { color: var(--nfb-st-available) !important; background: color-mix(in srgb, var(--nfb-st-available) 12%, transparent) !important; border-color: color-mix(in srgb, var(--nfb-st-available) 34%, transparent) !important; }
.badge.bg-warning   { color: var(--nfb-st-warning) !important; background: color-mix(in srgb, var(--nfb-st-warning) 12%, transparent) !important; border-color: color-mix(in srgb, var(--nfb-st-warning) 34%, transparent) !important; }
.badge.bg-danger    { color: var(--nfb-st-critical) !important; background: color-mix(in srgb, var(--nfb-st-critical) 13%, transparent) !important; border-color: color-mix(in srgb, var(--nfb-st-critical) 38%, transparent) !important; }
.badge.bg-info      { color: var(--nfb-st-info) !important; background: color-mix(in srgb, var(--nfb-st-info) 12%, transparent) !important; border-color: color-mix(in srgb, var(--nfb-st-info) 34%, transparent) !important; }
.badge.bg-dark      { color: var(--nfb-text-secondary) !important; background: var(--nfb-surface-3) !important; border-color: var(--nfb-border-strong) !important; }


/* ==========================================================================
   10  MELDUNGEN (ALERTS)
   ========================================================================== */

.alert,
.nfb-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--nfb-sp-3);
    padding: var(--nfb-sp-3) var(--nfb-sp-4);
    margin-bottom: var(--nfb-sp-4);
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    line-height: 1.5;
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-left: 3px solid var(--nfb-text-muted);
    border-radius: var(--nfb-r-sm);
}
.alert .bi, .nfb-alert__icon {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 1rem;
    line-height: 1.2;
}
.alert-success, .nfb-alert--success { border-left-color: var(--nfb-st-available); background: color-mix(in srgb, var(--nfb-st-available) 7%, var(--nfb-surface-2)); }
.alert-success .bi, .nfb-alert--success .nfb-alert__icon { color: var(--nfb-st-available); }

.alert-danger, .nfb-alert--danger { border-left-color: var(--nfb-st-critical); background: color-mix(in srgb, var(--nfb-st-critical) 8%, var(--nfb-surface-2)); }
.alert-danger .bi, .nfb-alert--danger .nfb-alert__icon { color: var(--nfb-st-critical); }

.alert-warning, .nfb-alert--warning { border-left-color: var(--nfb-st-warning); background: color-mix(in srgb, var(--nfb-st-warning) 8%, var(--nfb-surface-2)); }
.alert-warning .bi, .nfb-alert--warning .nfb-alert__icon { color: var(--nfb-st-warning); }

.alert-info, .nfb-alert--info { border-left-color: var(--nfb-st-info); background: color-mix(in srgb, var(--nfb-st-info) 7%, var(--nfb-surface-2)); }
.alert-info .bi, .nfb-alert--info .nfb-alert__icon { color: var(--nfb-st-info); }


/* ==========================================================================
   11  KENNZAHLEN
   ========================================================================== */

.nfb-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--nfb-sp-3);
    margin-bottom: var(--nfb-sp-4);
}
.nfb-metric {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--nfb-sp-1);
    padding: var(--nfb-sp-3) var(--nfb-sp-4);
    background: var(--nfb-surface);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-lg);
    overflow: hidden;
}
.nfb-metric::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2px;
    background: var(--nfb-border-strong);
}
.nfb-metric--active::before    { background: var(--nfb-st-active); }
.nfb-metric--available::before { background: var(--nfb-st-available); }
.nfb-metric--onsite::before    { background: var(--nfb-st-onsite); }
.nfb-metric--warning::before   { background: var(--nfb-st-warning); }

.nfb-metric__label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.nfb-metric__label .bi { font-size: 0.8125rem; }
.nfb-metric__value {
    color: var(--nfb-text);
    font-size: 1.5rem;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.nfb-metric__hint { color: var(--nfb-text-muted); font-size: var(--nfb-fs-xs); }


/* ==========================================================================
   12  EINSATZLISTE UND EINSATZDETAILS
   ========================================================================== */

.nfb-incident-list { display: flex; flex-direction: column; gap: var(--nfb-sp-2); }

.nfb-incident {
    position: relative;
    display: block;
    padding: var(--nfb-sp-3) var(--nfb-sp-3) var(--nfb-sp-3) var(--nfb-sp-4);
    color: var(--nfb-text);
    text-decoration: none;
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
    transition: background-color var(--nfb-t-fast), border-color var(--nfb-t-fast);
}
.nfb-incident::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; bottom: -1px;
    width: 3px;
    background: var(--nfb-st-active);
    border-radius: var(--nfb-r-md) 0 0 var(--nfb-r-md);
}
.nfb-incident:hover { color: var(--nfb-text); background: var(--nfb-surface-3); border-color: var(--nfb-border-strong); }
.nfb-incident:focus-visible { outline-offset: 1px; }

.nfb-incident.is-selected {
    background: var(--nfb-surface-3);
    border-color: var(--nfb-primary-line);
    box-shadow: 0 0 0 1px var(--nfb-primary-line);
}
.nfb-incident.is-selected::before { background: var(--nfb-primary); }

.nfb-incident__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nfb-sp-2);
    margin-bottom: 5px;
}
.nfb-incident__title {
    margin: 0;
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    font-weight: 640;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.nfb-incident__line {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs);
    line-height: 1.45;
}
.nfb-incident__line .bi { flex-shrink: 0; color: var(--nfb-text-muted); font-size: 0.8125rem; }
.nfb-incident__line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfb-incident__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nfb-sp-2);
    margin-top: var(--nfb-sp-2);
    padding-top: var(--nfb-sp-2);
    border-top: 1px solid var(--nfb-border-subtle);
}
.nfb-incident--archived::before { background: var(--nfb-st-done); }
.nfb-incident--archived.is-selected::before { background: var(--nfb-primary); }

/* Kopfzeile der Einsatz-Detailansicht */
.nfb-incident-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nfb-sp-4);
    flex-wrap: wrap;
    padding: var(--nfb-sp-4);
    background: var(--nfb-surface-2);
    border-bottom: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-lg) var(--nfb-r-lg) 0 0;
}
.nfb-incident-head__title {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-3);
    margin: 0 0 var(--nfb-sp-2);
    font-size: var(--nfb-fs-h2);
    font-weight: 650;
    overflow-wrap: anywhere;
}
.nfb-incident-head__facts {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-2) var(--nfb-sp-4);
    flex-wrap: wrap;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs);
}
.nfb-incident-head__facts > span { display: inline-flex; align-items: center; gap: 5px; }
.nfb-incident-head__facts .bi { color: var(--nfb-text-muted); }
.nfb-incident-head__actions { display: flex; align-items: center; gap: var(--nfb-sp-2); }

/* Werkzeugfeld innerhalb der Dispositionsleiste */
.nfb-tool {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--nfb-sp-3);
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
}
.nfb-tool__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--nfb-sp-3);
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.nfb-tool__title .bi { color: var(--nfb-text-muted); font-size: 0.875rem; }
.nfb-tool__body { flex: 1 1 auto; }
.nfb-tool__footer { margin-top: var(--nfb-sp-3); }


/* ==========================================================================
   13  CHRONIK (TIMELINE)
   ========================================================================== */

.nfb-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--nfb-sp-2);
    padding-left: 24px;
}
.nfb-timeline::before {
    content: "";
    position: absolute;
    top: 12px; bottom: 12px; left: 8px;
    width: 2px;
    background: var(--nfb-border-strong);
}

.nfb-event {
    position: relative;
    padding: var(--nfb-sp-3);
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
}
.nfb-event::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -20px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background: var(--nfb-surface);
    border: 2px solid var(--nfb-border-strong);
    border-radius: 50%;
    transform: translateY(-50%);
}
.nfb-event:first-child::before {
    border-color: var(--nfb-primary);
    background: var(--nfb-primary);
    box-shadow: 0 0 0 3px var(--nfb-primary-weak);
}

.nfb-event__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nfb-sp-3);
    margin-bottom: 5px;
}
.nfb-event__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    font-weight: 640;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}
.nfb-event__title .bi { flex-shrink: 0; color: var(--nfb-text-muted); font-size: 0.875rem; }
.nfb-event__text {
    margin: 0;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs);
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.nfb-event__media { margin-top: var(--nfb-sp-2); }
.nfb-event__media img {
    display: block;
    max-height: 92px;
    cursor: pointer;
    background: var(--nfb-surface-sunken);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-sm);
    transition: border-color var(--nfb-t-fast);
}
.nfb-event__media img:hover { border-color: var(--nfb-primary-line); }


/* ==========================================================================
   14  TABS UND PILLS
   ========================================================================== */

.nfb-tabs,
.nav-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--nfb-sp-1);
    flex-wrap: wrap;
    margin: 0 0 var(--nfb-sp-5);
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--nfb-border) !important;
}
.nav-tabs .nav-link,
.nfb-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    height: 38px;
    padding: 0 var(--nfb-sp-3);
    color: var(--nfb-text-secondary) !important;
    font-size: var(--nfb-fs-sm);
    font-weight: 550;
    white-space: nowrap;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    transition: color var(--nfb-t-fast), border-color var(--nfb-t-fast);
}
.nav-tabs .nav-link .bi, .nfb-tabs__link .bi { font-size: 0.9375rem; opacity: 0.85; }
.nav-tabs .nav-link:hover, .nfb-tabs__link:hover {
    color: var(--nfb-text) !important;
    border-bottom-color: var(--nfb-border-strong) !important;
}
.nav-tabs .nav-link.active,
.nfb-tabs__link.is-active {
    color: var(--nfb-text) !important;
    font-weight: 640;
    background: transparent !important;
    border-bottom-color: var(--nfb-primary) !important;
}
.nav-tabs .nav-link.active .bi, .nfb-tabs__link.is-active .bi { color: var(--nfb-primary); opacity: 1; }

/* Filter-Pills */
.nfb-filterbar,
.nav-pills {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-1);
    flex-wrap: wrap;
    margin: 0 0 var(--nfb-sp-4);
    padding: var(--nfb-sp-1);
    list-style: none;
    background: var(--nfb-surface);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-lg);
}
.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 var(--nfb-sp-3);
    color: var(--nfb-text-secondary) !important;
    font-size: var(--nfb-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: var(--nfb-r-sm) !important;
    cursor: pointer;
    transition: color var(--nfb-t-fast), background-color var(--nfb-t-fast);
}
.nav-pills .nav-link .bi { font-size: 0.8125rem; opacity: 0.8; }
.nav-pills .nav-link:hover { color: var(--nfb-text) !important; background: var(--nfb-secondary-weak) !important; }
.nav-pills .nav-link.active {
    color: var(--nfb-text) !important;
    background: var(--nfb-surface-3) !important;
    border-color: var(--nfb-border-strong);
}
.nav-pills .nav-link.active .bi { color: var(--nfb-primary); opacity: 1; }


/* ==========================================================================
   15  MODALS UND DROPDOWNS
   ========================================================================== */

.modal-backdrop.show { opacity: 0.7; background: #04070b; }

.modal-content {
    color: var(--nfb-text);
    background: var(--nfb-surface) !important;
    background-image: none !important;
    border: 1px solid var(--nfb-border-strong) !important;
    border-radius: var(--nfb-r-lg) !important;
    box-shadow: var(--nfb-shadow-lg);
    overflow: hidden;
}
.modal-header {
    align-items: center;
    gap: var(--nfb-sp-3);
    padding: var(--nfb-sp-3) var(--nfb-sp-4) !important;
    background: var(--nfb-surface-2);
    border-bottom: 1px solid var(--nfb-border) !important;
}
.modal-title {
    display: inline-flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    color: var(--nfb-text) !important;
    font-size: var(--nfb-fs-h3);
    font-weight: 640;
}
.modal-title .bi { color: var(--nfb-text-muted); font-size: 1rem; }
.modal-body { padding: var(--nfb-sp-4) !important; font-size: var(--nfb-fs-sm); }
.modal-footer {
    gap: var(--nfb-sp-2);
    padding: var(--nfb-sp-3) var(--nfb-sp-4) !important;
    background: var(--nfb-surface-2);
    border-top: 1px solid var(--nfb-border) !important;
}
.modal-footer > * { margin: 0; }

.btn-close {
    width: 26px; height: 26px;
    padding: 0;
    margin: 0;
    opacity: 0.6;
    filter: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239dadc2'%3E%3Cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-size: 13px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--nfb-r-sm);
    transition: opacity var(--nfb-t-fast), background-color var(--nfb-t-fast);
}
.btn-close:hover { opacity: 1; background-color: var(--nfb-secondary-weak); }

.dropdown-menu {
    min-width: 210px;
    padding: var(--nfb-sp-1);
    color: var(--nfb-text);
    background: var(--nfb-surface) !important;
    border: 1px solid var(--nfb-border-strong) !important;
    border-radius: var(--nfb-r-md) !important;
    box-shadow: var(--nfb-shadow-md);
}
.dropdown-header {
    padding: var(--nfb-sp-2) var(--nfb-sp-3);
    margin-bottom: var(--nfb-sp-1);
    color: var(--nfb-text) !important;
    border-bottom: 1px solid var(--nfb-border);
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    padding: var(--nfb-sp-2) var(--nfb-sp-3);
    color: var(--nfb-text-secondary) !important;
    font-size: var(--nfb-fs-sm);
    border-radius: var(--nfb-r-sm);
    transition: color var(--nfb-t-fast), background-color var(--nfb-t-fast);
}
.dropdown-item .bi { font-size: 0.9375rem; opacity: 0.85; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--nfb-text) !important; background: var(--nfb-surface-3) !important; }
.dropdown-item.text-danger { color: var(--nfb-st-critical) !important; }
.dropdown-item.text-danger:hover { color: #fff !important; background: var(--nfb-st-critical) !important; }
.dropdown-divider { margin: var(--nfb-sp-1) 0; border-color: var(--nfb-border); }

.tooltip-inner {
    padding: 5px 9px;
    font-size: var(--nfb-fs-xs);
    background: var(--nfb-surface-3);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-sm);
}
.tooltip.show { opacity: 1; }


/* ==========================================================================
   16  KARTE, MEDIEN
   ========================================================================== */

.nfb-map {
    width: 100%;
    background: var(--nfb-surface-sunken);
}
.leaflet-container {
    font-family: var(--nfb-font);
    background: var(--nfb-surface-sunken);
    border-radius: 0 0 var(--nfb-r-lg) var(--nfb-r-lg);
}
[data-bs-theme="dark"] .leaflet-tile-pane,
:root:not([data-bs-theme="light"]) .leaflet-tile-pane { filter: saturate(0.62) brightness(0.82) contrast(1.06); }
.leaflet-control-attribution {
    color: var(--nfb-text-muted) !important;
    font-size: 10px !important;
    background: var(--nfb-surface) !important;
}
.leaflet-control-attribution a { color: var(--nfb-text-secondary) !important; }
.leaflet-bar a {
    color: var(--nfb-text) !important;
    background: var(--nfb-surface) !important;
    border-color: var(--nfb-border) !important;
}
.leaflet-bar a:hover { background: var(--nfb-surface-3) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    color: var(--nfb-text);
    background: var(--nfb-surface);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-md);
    box-shadow: var(--nfb-shadow-md);
}
.leaflet-popup-content { margin: var(--nfb-sp-3); font-size: var(--nfb-fs-xs); line-height: 1.5; }

/* Medien-Galerie */
.nfb-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--nfb-sp-3);
}
.nfb-media-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
    transition: border-color var(--nfb-t-fast);
}
.nfb-media-card:hover { border-color: var(--nfb-border-strong); }
.nfb-media-card__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 158px;
    padding: var(--nfb-sp-2);
    background: var(--nfb-surface-sunken);
    border-bottom: 1px solid var(--nfb-border);
}
.nfb-media-card__preview img {
    max-width: 100%;
    max-height: 142px;
    object-fit: contain;
    cursor: pointer;
    border-radius: var(--nfb-r-xs);
}
.nfb-media-card__preview .bi { font-size: 2rem; color: var(--nfb-text-muted); }
.nfb-media-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--nfb-sp-2);
    padding: var(--nfb-sp-3);
}
.nfb-media-card__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nfb-sp-2);
    color: var(--nfb-text);
    font-size: var(--nfb-fs-xs);
    font-weight: 620;
    overflow-wrap: anywhere;
}
.nfb-media-card__desc {
    margin: 0;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nfb-media-card__actions { display: flex; gap: var(--nfb-sp-2); margin-top: auto; }
.nfb-media-card__actions > * { flex: 1 1 0; }

.img-thumbnail {
    padding: 2px;
    background: var(--nfb-surface-sunken);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-sm);
}


/* ==========================================================================
   17  STATUSLEISTE
   ========================================================================== */

.nfb-bottombar {
    position: fixed;
    bottom: 0; left: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nfb-sp-4);
    width: 100%;
    height: var(--nfb-bottombar-h);
    padding: 0 var(--nfb-sp-6);
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-xs);
    background: var(--nfb-surface);
    border-top: 1px solid var(--nfb-border);
}
.nfb-bottombar__group {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-4);
    min-width: 0;
}
.nfb-bottombar__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nfb-bottombar__item .bi { font-size: 0.8125rem; }
.nfb-bottombar__product { color: var(--nfb-text-secondary); font-weight: 620; letter-spacing: 0.01em; }
.nfb-bottombar__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--nfb-st-available);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nfb-st-available) 18%, transparent);
}


/* ==========================================================================
   18  AUTHENTIFIZIERUNG
   ========================================================================== */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--nfb-sp-6);
    background: var(--nfb-canvas);
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    width: min(100%, 1020px);
    overflow: hidden;
    background: var(--nfb-surface);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-xl);
    box-shadow: var(--nfb-shadow-lg);
}

.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--nfb-sp-8);
    min-height: 520px;
    padding: var(--nfb-sp-8);
    color: #eef2f8;
    background:
        linear-gradient(rgba(16, 24, 34, 0.58), rgba(26, 20, 24, 0.68)),
        url('login-hintergrund/login-hintergrund-1920x1080.webp') center/cover no-repeat,
        radial-gradient(120% 90% at 8% 0%, rgba(226, 0, 26, 0.16), transparent 58%),
        linear-gradient(158deg, #101822 0%, #131d2a 55%, #1a1418 100%);
    overflow: hidden;
}
.auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(145deg, #000 10%, transparent 78%);
    -webkit-mask-image: linear-gradient(145deg, #000 10%, transparent 78%);
}
.auth-aside > * { position: relative; z-index: 1; }

.auth-aside .nfb-brand__name { color: #fff; font-size: 1rem; }
.auth-aside .nfb-brand__sub { color: rgba(238, 242, 248, 0.55); }

.auth-aside h1 {
    max-width: 21ch;
    margin: 0 0 var(--nfb-sp-3);
    color: #fff;
    font-size: 1.75rem;
    font-weight: 640;
    line-height: 1.22;
    letter-spacing: -0.018em;
}
.auth-aside p {
    max-width: 46ch;
    margin: 0;
    color: rgba(226, 233, 243, 0.72);
    font-size: var(--nfb-fs-sm);
    line-height: 1.6;
}
.auth-kicker {
    display: block;
    margin-bottom: var(--nfb-sp-3);
    color: rgba(255, 168, 178, 0.9);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Betriebsmerkmale im Anmeldebereich */
.auth-facts {
    display: flex;
    flex-direction: column;
    gap: var(--nfb-sp-2);
    padding-top: var(--nfb-sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.auth-facts__item {
    display: flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    color: rgba(226, 233, 243, 0.68);
    font-size: var(--nfb-fs-xs);
}
.auth-facts__item .bi { color: rgba(255, 255, 255, 0.42); font-size: 0.875rem; }

.auth-status {
    display: inline-flex;
    align-items: center;
    gap: var(--nfb-sp-2);
    width: fit-content;
    padding: 5px var(--nfb-sp-3);
    color: rgba(226, 233, 243, 0.82);
    font-size: var(--nfb-fs-xs);
    font-weight: 550;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--nfb-r-sm);
}
.auth-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--auth-dot-color, var(--nfb-st-available));
    box-shadow: 0 0 0 3px var(--auth-dot-shadow, rgba(52, 199, 123, 0.18));
}


.auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--nfb-sp-8);
    background: var(--nfb-surface);
}
.auth-card__head { margin-bottom: var(--nfb-sp-6); }
.auth-card__head h2 {
    margin: 0 0 var(--nfb-sp-1);
    font-size: 1.1875rem;
    font-weight: 640;
}
.auth-card__head p {
    margin: 0;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-sm);
}
.auth-card .form-control,
.auth-card .input-group-text { min-height: 42px; line-height: 40px; }
.auth-card .btn { height: 42px; }
.auth-card .form-label { margin-bottom: 5px; }

.auth-field { margin-bottom: var(--nfb-sp-4); }
.auth-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nfb-sp-3);
}
.auth-link {
    color: var(--nfb-primary-text);
    font-size: var(--nfb-fs-xs);
    font-weight: 550;
    text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

.auth-note {
    display: flex;
    align-items: flex-start;
    gap: var(--nfb-sp-2);
    padding-top: var(--nfb-sp-4);
    margin-top: var(--nfb-sp-5);
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-xs);
    line-height: 1.5;
    border-top: 1px solid var(--nfb-border);
}
.auth-note .bi { flex-shrink: 0; margin-top: 1px; }

/* Einspaltige Auth-Karte (Passwortvergabe) */
.auth-single {
    width: min(100%, 430px);
    padding: var(--nfb-sp-8);
    background: var(--nfb-surface);
    border: 1px solid var(--nfb-border-strong);
    border-radius: var(--nfb-r-xl);
    box-shadow: var(--nfb-shadow-lg);
}
.card-box { /* Rückwärtskompatibler Alias */
    width: min(100%, 430px);
    color: var(--nfb-text);
    background: var(--nfb-surface) !important;
    border: 1px solid var(--nfb-border-strong) !important;
    border-radius: var(--nfb-r-xl) !important;
    box-shadow: var(--nfb-shadow-lg) !important;
}
.auth-single__icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    margin-bottom: var(--nfb-sp-4);
    color: var(--nfb-st-warning);
    background: color-mix(in srgb, var(--nfb-st-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--nfb-st-warning) 30%, transparent);
    border-radius: var(--nfb-r-md);
}
.auth-single__icon .bi { font-size: 1.125rem; }


/* ==========================================================================
   19  UTILITIES
   ========================================================================== */

.nfb-stack   { display: flex; flex-direction: column; gap: var(--nfb-sp-3); }
.nfb-stack-2 { display: flex; flex-direction: column; gap: var(--nfb-sp-2); }
.nfb-row     { display: flex; align-items: center; gap: var(--nfb-sp-2); }
.nfb-row--between { display: flex; align-items: center; justify-content: space-between; gap: var(--nfb-sp-3); }
.nfb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfb-divider { height: 1px; margin: var(--nfb-sp-4) 0; background: var(--nfb-border); border: 0; }
.nfb-vr { width: 1px; height: 20px; background: var(--nfb-border); }

.nfb-search { position: relative; max-width: 340px; }
.nfb-search .bi {
    position: absolute;
    top: 50%; left: var(--nfb-sp-3);
    transform: translateY(-50%);
    color: var(--nfb-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}
.nfb-search .form-control { padding-left: var(--nfb-sp-8); }

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Bootstrap-Hintergründe neutralisieren, damit ein Flächensystem gilt */
.bg-dark, .bg-black { background-color: var(--nfb-surface) !important; }
.bg-body-tertiary { background-color: var(--nfb-surface-2) !important; }
.border-secondary { border-color: var(--nfb-border) !important; }


/* ==========================================================================
   20  RESPONSIVE
   ========================================================================== */

@media (max-width: 1399.98px) {
    .nfb-main { padding-left: var(--nfb-sp-5); padding-right: var(--nfb-sp-5); }
    .nfb-topbar__inner { padding-left: var(--nfb-sp-5); padding-right: var(--nfb-sp-5); }
    .nfb-bottombar { padding-left: var(--nfb-sp-5); padding-right: var(--nfb-sp-5); }
}

@media (max-width: 1199.98px) {
    .nfb-nav__link { padding: 0 var(--nfb-sp-2); }
    .nfb-nav__link span { display: none; }
    .nfb-nav__link .bi { font-size: 1.0625rem; }
    .nfb-nav__link.is-active::after { left: 6px; right: 6px; }
}

@media (max-width: 991.98px) {
    :root { --nfb-topbar-h: 54px; }

    .nfb-topbar__inner { flex-wrap: wrap; gap: var(--nfb-sp-3); }
    .nfb-topbar__toggle { display: inline-flex; order: 2; margin-left: auto; }
    .nfb-topbar__user { order: 3; margin-left: 0; }

    .nfb-topbar__collapse { order: 4; flex-basis: 100%; padding-bottom: var(--nfb-sp-3); }
    .nfb-nav { flex-direction: column; align-items: stretch; gap: 2px; }
    .nfb-nav__link { height: 38px; justify-content: flex-start; }
    .nfb-nav__link span { display: inline; }
    .nfb-nav__link.is-active::after { display: none; }
    .nfb-nav__link.is-active { box-shadow: inset 2px 0 0 var(--nfb-primary); }

    .auth-shell { grid-template-columns: 1fr; max-width: 480px; }
    .auth-aside { min-height: auto; padding: var(--nfb-sp-6); gap: var(--nfb-sp-5); }
    .auth-aside h1 { font-size: 1.375rem; }
    .auth-aside .auth-facts, .auth-aside p { display: none; }
    .auth-card { padding: var(--nfb-sp-6); }
}

@media (max-width: 767.98px) {
    .nfb-main { padding: var(--nfb-sp-4) var(--nfb-sp-4) var(--nfb-sp-6); }
    .nfb-topbar__inner { padding-left: var(--nfb-sp-4); padding-right: var(--nfb-sp-4); }
    .nfb-bottombar { padding-left: var(--nfb-sp-4); padding-right: var(--nfb-sp-4); }

    .nfb-page-header { flex-direction: column; align-items: stretch; gap: var(--nfb-sp-3); }
    .nfb-page-header__actions { justify-content: flex-start; }
    .nfb-metrics { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .nfb-data-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--nfb-sp-3); }
    .nfb-incident-head { flex-direction: column; }
    .nfb-form-footer { flex-direction: column-reverse; align-items: stretch; }
    .nfb-form-footer .btn { width: 100%; }
    .modal-footer { flex-direction: column-reverse; align-items: stretch; }
    .modal-footer .btn { width: 100%; }
}

@media (max-width: 575.98px) {
    :root { --nfb-bottombar-h: 30px; }
    .nfb-brand__text { display: none; }
    .nfb-user-meta { display: none; }
    .nfb-bottombar { font-size: 0.6875rem; }
    .nfb-bottombar__item--optional { display: none; }
    .auth-page { padding: var(--nfb-sp-3); }
    .auth-aside, .auth-card, .auth-single { padding: var(--nfb-sp-5); }
    .nfb-media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Druckausgabe */
@media print {
    .nfb-topbar, .nfb-bottombar, .nfb-page-header__actions, .btn, .modal { display: none !important; }
    body { padding: 0; background: #fff; color: #000; }
    .card, .nfb-panel { border-color: #ccc !important; box-shadow: none; }
}

/* =====================================================================================
   Mandantenlogo (hochgeladen in IncidentWatch Central)
   Jedes Format und Seitenverhältnis wird in einen festen Rahmen EINGEPASST – nie verzerrt,
   nie angeschnitten. Die helle Fläche hält auch dunkle Logos auf dunklem Hintergrund lesbar.
   ===================================================================================== */
.nfb-tenant-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
    line-height: 0;
    overflow: hidden;
}
.nfb-tenant-logo img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
}
.nfb-tenant-logo--login {
    align-self: flex-start;
    padding: 10px 16px;
    margin-bottom: var(--nfb-sp-6);
}
.nfb-tenant-logo--login img { max-height: 56px; max-width: 240px; }
.nfb-tenant-logo--header { padding: 6px 12px; }
.nfb-tenant-logo--header img { max-height: 32px; max-width: 190px; }
.nfb-tenant-logo--footer {
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: var(--nfb-sp-2);
}
.nfb-tenant-logo--footer img { max-height: 20px; max-width: 110px; }
/* Einsatz-Detailansicht (Lagebild): Kopf über die volle Breite, Register, Karte + Chronik stehen fest */
@media (min-width: 768px) {
    .nfb-einsatz-kopf .nfb-incident-head > div:first-child { flex: 1 1 520px; min-width: 0; }
}
@media (max-width: 575.98px) {
    .nfb-einsatz-register > .card-header { padding-left: var(--nfb-sp-2) !important; padding-right: var(--nfb-sp-2) !important; }
    .nfb-einsatz-register > .card-header .nav-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .nfb-einsatz-register > .card-header .nav-link { width: 100%; min-width: 0; padding: 0 var(--nfb-sp-2); gap: 6px; }
    .nfb-einsatz-register > .card-header .nav-link > .bi { display: none; }
}
.nfb-einsatz-register > .card-header .nav-tabs { gap: 2px; flex-wrap: wrap; }
.nfb-einsatz-register > .card-header .nav-link { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nfb-einsatz-register .tab-pane > section.card {
    margin-bottom: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
    background-color: transparent !important;
}
.nfb-einsatz-register .tab-pane > section.card + section.card { border-top: 1px solid var(--nfb-border) !important; }
.nfb-einsatz-register .tab-pane > section.card > .card-header { background: transparent !important; }
.nfb-chronik #timelineContainer { height: clamp(260px, 36vh, 380px); }
@media (min-width: 1200px) {
    /* Karte, Anfahrt und Chronik bleiben beim Blättern stehen; die Chronik hat eine feste, kurze Höhe und scrollt */
    .nfb-einsatz-seite {
        position: sticky;
        top: calc(var(--nfb-topbar-h) + var(--nfb-sp-3));
        align-self: flex-start;
        max-height: calc(100vh - var(--nfb-topbar-h) - var(--nfb-bottombar-h) - 2 * var(--nfb-sp-3));
    }
    .nfb-einsatz-seite .nfb-chronik { margin-bottom: 0 !important; min-height: 0; flex: 0 1 auto; }
    .nfb-einsatz-seite .nfb-chronik #timelineContainer { min-height: 160px; flex: 0 1 auto; }
}

/* ==========================================================================
   Berichtsangaben im Lagebild (Register): Stand + Karten je Feld, offene Felder sichtbar
   ========================================================================== */
.nfb-ba { padding: var(--nfb-sp-4) !important; }
.nfb-ba__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nfb-sp-3); flex-wrap: wrap; }
.nfb-ba__stand { display: flex; align-items: center; gap: var(--nfb-sp-3); min-width: 0; }
.nfb-ba__zahl { font-family: var(--nfb-font-mono); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--nfb-text); font-variant-numeric: tabular-nums; }
.nfb-ba__zahl span { font-size: 0.95rem; font-weight: 600; color: var(--nfb-text-muted); }
.nfb-ba__titel { font-size: var(--nfb-fs-sm); font-weight: 600; color: var(--nfb-text); }
.nfb-ba__meter { display: flex; gap: 3px; margin-top: 5px; }
.nfb-ba__meter i { display: block; width: 18px; height: 4px; border-radius: 2px; background: var(--nfb-border-strong); }
.nfb-ba__meter i.is-voll { background: var(--nfb-st-available); }
.nfb-ba__hinweis { margin: var(--nfb-sp-2) 0 var(--nfb-sp-3); font-size: var(--nfb-fs-xs); color: var(--nfb-text-muted); }
.nfb-ba__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--nfb-sp-2); }
.nfb-ba__feld {
    position: relative; min-width: 0;
    padding: 10px 12px 9px;
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-md);
    transition: border-color var(--nfb-t-fast), background-color var(--nfb-t-fast);
}
.nfb-ba__feld--breit { grid-column: 1 / -1; }
.nfb-ba__feld.is-offen { background: transparent; border-style: dashed; }
.nfb-ba__feld.js-nfb-ba-bearbeiten, .nfb-ba__feld.js-nfb-ba-auf { cursor: pointer; }
.nfb-ba__feld.js-nfb-ba-bearbeiten:hover, .nfb-ba__feld.js-nfb-ba-bearbeiten:focus-visible { border-color: var(--nfb-primary-line); background: var(--nfb-surface-3); outline: none; }
.nfb-ba__feld-kopf { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nfb-ba__punkt { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--nfb-st-available); }
.nfb-ba__feld.is-offen .nfb-ba__punkt { background: transparent; border: 1.5px solid var(--nfb-text-muted); }
.nfb-ba__label { margin: 0; font-size: var(--nfb-fs-sm); font-weight: 600; color: var(--nfb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfb-ba__feld.is-offen .nfb-ba__label { color: var(--nfb-text-secondary); }
.nfb-ba__quelle {
    flex: 0 0 auto; font-size: 0.625rem; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: var(--nfb-r-pill);
    color: var(--nfb-text-secondary); background: var(--nfb-secondary-weak); border: 1px solid var(--nfb-border);
}
.nfb-ba__stift { margin-left: auto; font-size: 0.8rem; color: var(--nfb-text-muted); opacity: 0; transition: opacity var(--nfb-t-fast); }
.nfb-ba__feld:hover .nfb-ba__stift, .nfb-ba__feld:focus-visible .nfb-ba__stift { opacity: 1; color: var(--nfb-primary-text); }
.nfb-ba__text { margin: 5px 0 0; font-size: var(--nfb-fs-sm); line-height: 1.5; color: var(--nfb-text-secondary); overflow-wrap: anywhere; }
.nfb-ba__text.is-lang { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nfb-ba__feld.is-auf .nfb-ba__text.is-lang { display: block; -webkit-line-clamp: unset; }
.nfb-ba__meta { margin-top: 5px; font-size: var(--nfb-fs-label); color: var(--nfb-text-muted); }
.nfb-ba__leer { margin: 4px 0 0; font-size: var(--nfb-fs-xs); font-style: italic; color: var(--nfb-text-muted); }

/* ==========================================================================
   Anfahrt des Notdienstes (über der Einsatzkarte): unterwegs · rechnerisch vor Ort · vor Ort
   ========================================================================== */
.nfb-anfahrt {
    --anf-ton: var(--nfb-primary);
    --anf-ton-weich: var(--nfb-primary-weak);
    position: relative; overflow: hidden;
    margin-bottom: var(--nfb-sp-3);
    padding: 10px 14px 9px;
    background: linear-gradient(100deg, var(--anf-ton-weich) 0%, transparent 46%), var(--nfb-surface);
    border: 1px solid var(--nfb-border);
    border-left: 3px solid var(--anf-ton);
    border-radius: var(--nfb-r-lg);
    box-shadow: var(--nfb-shadow-xs);
}
.nfb-anfahrt--erwartet   { --anf-ton: var(--nfb-st-warning);   --anf-ton-weich: rgba(240, 169, 42, 0.12); }
.nfb-anfahrt--angekommen { --anf-ton: var(--nfb-st-available); --anf-ton-weich: rgba(52, 199, 123, 0.13); }
.nfb-anfahrt__kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nfb-anfahrt__symbol {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--anf-ton); background: var(--anf-ton-weich); font-size: 0.85rem;
}
.nfb-anfahrt__titel { font-size: var(--nfb-fs-sm); font-weight: 650; color: var(--nfb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfb-anfahrt__wert {
    margin-left: auto; flex: 0 0 auto; white-space: nowrap;
    font-family: var(--nfb-font-mono); font-size: var(--nfb-fs-xs); font-weight: 700; color: var(--anf-ton);
    padding: 2px 8px; border-radius: var(--nfb-r-pill); background: var(--anf-ton-weich);
}
.nfb-anfahrt__strecke { position: relative; height: 24px; margin: 6px 4px 2px 6px; }
.nfb-anfahrt__strecke::before {
    content: ""; position: absolute; left: 0; right: 10px; top: 50%; height: 2px; transform: translateY(-50%);
    background-image: repeating-linear-gradient(90deg, var(--nfb-border-strong) 0 6px, transparent 6px 11px);
}
.nfb-anfahrt__start {
    position: absolute; left: -3px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%);
    border-radius: 50%; background: var(--anf-ton); box-shadow: 0 0 0 3px var(--anf-ton-weich);
}
.nfb-anfahrt__fuellung {
    position: absolute; left: 0; top: 50%; height: 4px; transform: translateY(-50%);
    border-radius: 4px; overflow: visible;
    background: linear-gradient(90deg, color-mix(in srgb, var(--anf-ton) 45%, transparent), var(--anf-ton));
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nfb-anfahrt--unterwegs .nfb-anfahrt__fuellung::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: nfbAnfahrtGlanz 2.8s ease-in-out infinite;
}
.nfb-anfahrt__fahrzeug {
    position: absolute; right: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--anf-ton); color: #fff; font-size: 0.72rem;
    box-shadow: 0 0 0 3px var(--nfb-surface), 0 2px 8px color-mix(in srgb, var(--anf-ton) 55%, transparent);
    animation: nfbAnfahrtFahrt 1.8s ease-in-out infinite;
}
.nfb-anfahrt--erwartet .nfb-anfahrt__fahrzeug, .nfb-anfahrt--angekommen .nfb-anfahrt__fahrzeug { display: none; }
.nfb-anfahrt__ziel {
    position: absolute; right: -4px; top: 50%; transform: translateY(-58%);
    font-size: 1.05rem; line-height: 1; color: var(--nfb-text-muted);
}
.nfb-anfahrt--erwartet .nfb-anfahrt__ziel, .nfb-anfahrt--angekommen .nfb-anfahrt__ziel { color: var(--anf-ton); }
.nfb-anfahrt--erwartet .nfb-anfahrt__ziel::after, .nfb-anfahrt--angekommen .nfb-anfahrt__ziel::after {
    content: ""; position: absolute; left: 50%; bottom: -3px; width: 14px; height: 6px; margin-left: -7px;
    border-radius: 50%; border: 2px solid var(--anf-ton); opacity: 0;
    animation: nfbAnfahrtZiel 2.2s ease-out infinite;
}
.nfb-anfahrt--angekommen .nfb-anfahrt__ziel::after { animation-iteration-count: 3; }
.nfb-anfahrt__neben { font-size: var(--nfb-fs-xs); color: var(--nfb-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes nfbAnfahrtGlanz { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }
@keyframes nfbAnfahrtFahrt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes nfbAnfahrtZiel { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .nfb-anfahrt__fuellung { transition: none; }
    .nfb-anfahrt__fuellung::after, .nfb-anfahrt__fahrzeug, .nfb-anfahrt__ziel::after { animation: none !important; }
}

/* ==========================================================================
   Einsatzchronik – kompakte Liste (includes/chronik.php): Uhrzeit · Knoten · Inhalt
   ========================================================================== */
.nfb-chronik-liste { list-style: none; margin: 0; padding: 0; width: 100%; }
.nfb-chronik-tag {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: var(--nfb-sp-2);
    padding: 6px 0 4px; margin: 0;
    background: var(--nfb-surface);
    font-size: var(--nfb-fs-label); font-weight: 600; color: var(--nfb-text-muted);
}
.nfb-chronik-tag::after { content: ""; flex: 1; height: 1px; background: var(--nfb-border-subtle); }
.nfb-ce {
    --ce-ton: var(--nfb-primary);
    position: relative;
    display: grid;
    grid-template-columns: 38px 20px minmax(0, 1fr);
    column-gap: 8px;
    padding: 5px 4px 7px 0;
    border-radius: var(--nfb-r-sm);
}
.nfb-ce::before {
    content: ""; position: absolute; left: 55px; top: 0; bottom: 0; width: 2px;
    background: var(--nfb-border); z-index: 0;
}
.nfb-chronik-tag + .nfb-ce::before { top: 10px; }
.nfb-ce:last-child::before { bottom: calc(100% - 16px); }
.nfb-ce:hover { background: var(--nfb-secondary-weak); }
.nfb-ce--erfolg   { --ce-ton: var(--nfb-st-available); }
.nfb-ce--kritisch { --ce-ton: var(--nfb-st-critical); }
.nfb-ce--hinweis  { --ce-ton: var(--nfb-st-warning); }
.nfb-ce--info     { --ce-ton: #2bb8d0; }
.nfb-ce--system   { --ce-ton: var(--nfb-text-muted); }
.nfb-ce__zeit {
    grid-column: 1; padding-top: 2px; text-align: right;
    font-family: var(--nfb-font-mono); font-size: var(--nfb-fs-xs); font-weight: 600;
    color: var(--nfb-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nfb-ce__knoten {
    grid-column: 2; position: relative; z-index: 1;
    width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nfb-surface); border: 2px solid var(--ce-ton); color: var(--ce-ton);
    font-size: 10px; line-height: 1;
}
.nfb-ce__inhalt { grid-column: 3; min-width: 0; }
.nfb-ce__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-height: 22px; }
.nfb-ce__titel {
    font-size: var(--nfb-fs-xs); font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--nfb-text); overflow-wrap: anywhere;
}
.nfb-ce--system .nfb-ce__titel { color: var(--nfb-text-secondary); font-weight: 600; }
.nfb-ce__marke {
    font-size: 0.625rem; font-weight: 600; line-height: 1; padding: 3px 5px; border-radius: var(--nfb-r-xs);
    color: var(--nfb-st-warning); background: rgba(240, 169, 42, 0.12); border: 1px solid rgba(240, 169, 42, 0.35);
}
.nfb-ce__marke--privat { color: var(--nfb-st-critical); background: rgba(255, 77, 94, 0.10); border-color: rgba(255, 77, 94, 0.35); }
.nfb-ce__text {
    margin: 1px 0 0; font-size: var(--nfb-fs-sm); line-height: 1.45; color: var(--nfb-text-secondary);
    overflow-wrap: anywhere;
}
.nfb-ce--system .nfb-ce__text { font-size: var(--nfb-fs-xs); color: var(--nfb-text-muted); }
.nfb-ce__text.is-lang:not(.is-offen) {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.nfb-ce__mehr {
    margin: 2px 0 0; padding: 0; border: 0; background: none;
    font-size: var(--nfb-fs-xs); font-weight: 600; color: var(--nfb-primary-text); cursor: pointer;
}
.nfb-ce__mehr:hover { text-decoration: underline; }
.nfb-ce__bild {
    display: inline-block; margin-top: 6px; line-height: 0; border-radius: var(--nfb-r-md);
    border: 1px solid var(--nfb-border); overflow: hidden; background: var(--nfb-surface-sunken);
    transition: border-color var(--nfb-t-fast);
}
.nfb-ce__bild:hover, .nfb-ce__bild:focus-visible { border-color: var(--nfb-primary); }
.nfb-ce__bild img { display: block; height: 68px; width: auto; max-width: 160px; object-fit: cover; }
.nfb-ce__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.nfb-ce__chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    padding: 2px 8px; border-radius: var(--nfb-r-pill);
    font-size: var(--nfb-fs-xs); font-weight: 600; line-height: 1.5; text-decoration: none;
    color: var(--nfb-text-secondary); background: var(--nfb-surface-2); border: 1px solid var(--nfb-border);
    cursor: pointer;
}
.nfb-ce__chip:hover { color: var(--nfb-text); border-color: var(--nfb-border-strong); }
.nfb-ce__marke--bericht { color: var(--nfb-primary-text); background: var(--nfb-primary-weak); border-color: var(--nfb-primary-line); }
.nfb-ce.is-ausgeblendet .nfb-ce__titel, .nfb-ce.is-ausgeblendet .nfb-ce__text { text-decoration: line-through; text-decoration-color: var(--nfb-text-muted); opacity: 0.6; }
.nfb-ce.is-nachtrag .nfb-ce__knoten { border-style: dashed; }
.nfb-ce.js-nfb-ce-bearbeiten { cursor: pointer; }
.nfb-ce.js-nfb-ce-bearbeiten:focus-visible { outline: 2px solid var(--nfb-primary); outline-offset: 1px; }
.nfb-ce__stift { margin-left: auto; font-size: 0.75rem; color: var(--nfb-text-muted); opacity: 0; transition: opacity var(--nfb-t-fast); }
.nfb-ce.js-nfb-ce-bearbeiten:hover .nfb-ce__stift, .nfb-ce.js-nfb-ce-bearbeiten:focus-visible .nfb-ce__stift { opacity: 1; color: var(--nfb-primary-text); }
.nfb-ce.is-ungespeichert { background: rgba(240, 169, 42, 0.08); }
.nfb-feld-blitz { animation: nfbFeldBlitz 1.3s ease-out; }
@keyframes nfbFeldBlitz { 0% { box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.6); } 100% { box-shadow: 0 0 0 3px rgba(61, 123, 255, 0); } }
.nfb-editor-gruppe { margin: 0 0 var(--nfb-sp-4); padding: 0; border: 0; min-width: 0; }
.nfb-editor-gruppe > legend { float: none; width: auto; margin: 0 0 6px; padding: 0; font-size: var(--nfb-fs-xs); font-weight: 650; color: var(--nfb-text-secondary); }
.nfb-editor-gruppe .form-label { margin-bottom: 2px; font-size: var(--nfb-fs-xs); color: var(--nfb-text-secondary); }
.nfb-editor-original { padding: 8px 10px; border-left: 3px solid var(--nfb-border-strong); background: var(--nfb-surface-2); border-radius: 0 var(--nfb-r-sm) var(--nfb-r-sm) 0; font-size: var(--nfb-fs-sm); color: var(--nfb-text-secondary); }
.nfb-editor-original > span { display: block; font-size: var(--nfb-fs-label); font-weight: 600; color: var(--nfb-text-muted); margin-bottom: 2px; }
.nfb-ce__chip-name { font-weight: 500; color: var(--nfb-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }

/* ==========================================================================
   Bericht-Editor (archive.php): Kopf mit Berichtsstand, Werkbank Eingabe · Chronik · Live-Vorschau
   ========================================================================== */
.nfb-page-header--kompakt { padding-bottom: var(--nfb-sp-3); margin-bottom: var(--nfb-sp-3); }
@media (min-width: 768px) { .nfb-page-header--kompakt { align-items: center; } }
@media (max-width: 767.98px) { .nfb-incident-head__title { flex-wrap: wrap; } }
.nfb-bericht-leiste {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--nfb-sp-3);
    padding: var(--nfb-sp-3) var(--nfb-sp-4);
}
.nfb-bericht-leiste__symbol {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--nfb-r-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nfb-primary-weak); color: var(--nfb-primary-text); font-size: 1.1rem;
}
.nfb-bericht-leiste__info { flex: 1 1 260px; min-width: 0; }
.nfb-bericht-leiste__titel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-weight: 650; font-size: var(--nfb-fs-body); color: var(--nfb-text); }
.nfb-bericht-leiste__meta { margin-top: 2px; font-size: var(--nfb-fs-xs); color: var(--nfb-text-secondary); overflow-wrap: anywhere; }
.nfb-bericht-leiste__aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.nfb-bericht-leiste__aktionen .btn, .nfb-versionen__aktionen .btn, .nfb-incident-head__actions .btn { white-space: nowrap; }
.nfb-incident-head__actions { flex-wrap: wrap; }
.nfb-versionen { list-style: none; margin: 0; padding: 0 var(--nfb-sp-4) var(--nfb-sp-2); border-top: 1px solid var(--nfb-border-subtle); }
.nfb-versionen__zeile {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--nfb-sp-3); align-items: start;
    padding: var(--nfb-sp-3) 0; border-bottom: 1px solid var(--nfb-border-subtle);
    font-size: var(--nfb-fs-sm); color: var(--nfb-text);
}
.nfb-versionen__zeile:last-child { border-bottom: 0; }
.nfb-versionen__nr { font-family: var(--nfb-font-mono); font-weight: 700; color: var(--nfb-primary-text); padding-top: 1px; }
.nfb-versionen__meta { display: block; margin-top: 2px; font-size: var(--nfb-fs-xs); color: var(--nfb-text-secondary); }
.nfb-versionen__hash { display: block; margin-top: 2px; font-family: var(--nfb-font-mono); font-size: 0.6875rem; color: var(--nfb-text-muted); overflow-wrap: anywhere; }
.nfb-versionen__aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.nfb-offcanvas { --bs-offcanvas-width: min(390px, 92vw); background: var(--nfb-surface) !important; color: var(--nfb-text); border-right: 1px solid var(--nfb-border) !important; }
.nfb-offcanvas .offcanvas-header { border-bottom: 1px solid var(--nfb-border); padding: var(--nfb-sp-3) var(--nfb-sp-4); }
.nfb-offcanvas .offcanvas-title { margin: 0; }
.nfb-offcanvas .offcanvas-body { padding: var(--nfb-sp-3); }
[data-bs-theme="dark"] .nfb-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

.nfb-werkbank {
    display: grid; gap: var(--nfb-sp-3);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eingabe" "umschalter" "seite";
    margin-bottom: var(--nfb-sp-3);
}
.nfb-werkbank > .card { margin: 0; }
.nfb-werkbank__eingabe { grid-area: eingabe; }
.nfb-werkbank__chronik, .nfb-werkbank__vorschau { grid-area: seite; min-width: 0; }
.nfb-werkbank[data-ansicht="vorschau"] .nfb-werkbank__chronik { display: none; }
.nfb-werkbank[data-ansicht="chronik"] .nfb-werkbank__vorschau { display: none; }
.nfb-werkbank__kopf { flex-wrap: nowrap; }
.nfb-werkbank__kopf .nav-tabs { align-self: flex-end; margin: 0 !important; border-bottom: 0 !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nfb-werkbank__kopf .nav-tabs .badge { font-family: var(--nfb-font-mono); font-weight: 600; }
.nfb-werkbank__eingabe > .card-header { padding-top: 4px !important; padding-bottom: 0 !important; }
.nfb-werkbank__hinweis { font-size: var(--nfb-fs-xs); color: var(--nfb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfb-werkbank__inhalt { padding: var(--nfb-sp-4); }
.nfb-werkbank__chronik .nfb-werkbank__inhalt { padding: var(--nfb-sp-2) var(--nfb-sp-3); max-height: 70vh; overflow-y: auto; }
.nfb-werkbank__umschalter {
    grid-area: umschalter; display: flex; gap: 4px; padding: 3px;
    background: var(--nfb-surface-sunken); border: 1px solid var(--nfb-border); border-radius: var(--nfb-r-lg);
}
.nfb-werkbank__umschalter button {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
    padding: 6px 10px; border: 0; border-radius: var(--nfb-r-md); background: transparent;
    color: var(--nfb-text-secondary); font-size: var(--nfb-fs-sm); font-weight: 600; cursor: pointer;
}
.nfb-werkbank__umschalter button:hover { color: var(--nfb-text); }
.nfb-werkbank__umschalter button.is-aktiv { background: var(--nfb-surface-3); color: var(--nfb-text); box-shadow: var(--nfb-shadow-xs); }
.nfb-werkbank__umschalter button:focus-visible { outline: 2px solid var(--nfb-primary); outline-offset: 1px; }
.nfb-werkbank__fuss {
    display: flex; align-items: center; gap: var(--nfb-sp-2);
    padding: var(--nfb-sp-2) var(--nfb-sp-3) !important;
    background: var(--nfb-surface-2); border-top: 1px solid var(--nfb-border);
}
.nfb-werkbank__grund { flex: 1 1 auto; min-width: 0; }
.nfb-werkbank__status { font-size: var(--nfb-fs-xs); font-weight: 600; color: var(--nfb-st-warning); white-space: nowrap; }
.nfb-werkbank__status:not(.is-offen) { color: var(--nfb-text-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.nfb-werkbank__status.is-offen::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.nfb-werkbank__fuss .btn { white-space: nowrap; flex: 0 0 auto; }

.nfb-editor-hinweis { margin: 0 0 var(--nfb-sp-3); font-size: var(--nfb-fs-xs); color: var(--nfb-text-secondary); }
.nfb-editor-feld { margin-bottom: var(--nfb-sp-4); }
.nfb-editor-feld:last-child { margin-bottom: 0; }
.nfb-editor-feld__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nfb-sp-2); margin-bottom: 4px; }
.nfb-editor-feld__kopf label { font-size: var(--nfb-fs-sm); font-weight: 600; color: var(--nfb-text); }
.nfb-editor-feld__stand { min-width: 0; font-size: var(--nfb-fs-label); color: var(--nfb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfb-editor-feld textarea { field-sizing: content; min-height: 4.6em; max-height: 24em; resize: vertical; line-height: 1.5; }
.nfb-editor-feld textarea#bt_sachverhalt { min-height: 8em; }

.nfb-vorschau-rahmen { position: relative; overflow: hidden; height: 72vh; background: #e9edf2; border-radius: 0 0 var(--nfb-r-lg) var(--nfb-r-lg); }
.nfb-vorschau-rahmen iframe { position: absolute; top: 0; left: 0; width: 860px; height: 100%; border: 0; transform-origin: 0 0; background: #e9edf2; }

@media (min-width: 992px) {
    .nfb-werkbank {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas: "eingabe umschalter" "eingabe seite";
        height: var(--werkbank-h, calc(100vh - var(--nfb-topbar-h) - var(--nfb-bottombar-h) - 2 * var(--nfb-sp-3)));
        margin-bottom: 0;
    }
    .nfb-werkbank > .card { display: flex; flex-direction: column; min-height: 0; }
    .nfb-werkbank[data-ansicht="vorschau"] .nfb-werkbank__chronik,
    .nfb-werkbank[data-ansicht="chronik"] .nfb-werkbank__vorschau { display: none; }
    .nfb-werkbank__inhalt, .nfb-werkbank__chronik .nfb-werkbank__inhalt { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
    .nfb-vorschau-rahmen { flex: 1 1 auto; height: auto; min-height: 0; }
}
@media (min-width: 1400px) {
    .nfb-werkbank {
        grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "eingabe chronik vorschau";
    }
    .nfb-werkbank--ohne-vorschau { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); grid-template-areas: "eingabe chronik"; }
    .nfb-werkbank__umschalter { display: none; }
    .nfb-werkbank[data-ansicht] .nfb-werkbank__chronik { grid-area: chronik; display: flex; }
    .nfb-werkbank[data-ansicht] .nfb-werkbank__vorschau { grid-area: vorschau; display: flex; }
}

/* Kopfleiste: links neben dem angemeldeten Nutzer, auf jeder Seite */
.nfb-tenant-logo--topbar { padding: 4px 10px; border-radius: 6px; }
.nfb-tenant-logo--topbar img { max-height: 26px; max-width: 160px; }
@media (max-width: 640px) {
    .nfb-tenant-logo--header img { max-height: 32px; max-width: 150px; }
    .nfb-tenant-logo--topbar { padding: 3px 6px; }
    .nfb-tenant-logo--topbar img { max-height: 20px; max-width: 90px; }
    .nfb-tenant-logo--footer img { max-height: 16px; max-width: 80px; }
}
@media print {
    .nfb-tenant-logo { box-shadow: none; }
}

/* ==========================================================================
 * Archivieren (Bericht-Editor) und Einsatzarchiv (schreibgeschützt)
 * ========================================================================== */
.nfb-archiv-pruefung { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nfb-sp-2); }
.nfb-archiv-pruefung > li {
    display: flex; align-items: center; gap: var(--nfb-sp-3);
    padding: var(--nfb-sp-2) var(--nfb-sp-3);
    border: 1px solid var(--nfb-border); border-left-width: 3px; border-radius: var(--nfb-r-md);
    background: var(--nfb-surface-sunken);
}
.nfb-archiv-pruefung > li > i { font-size: 1.05rem; flex: 0 0 auto; }
.nfb-archiv-pruefung > li > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: var(--nfb-lh-tight); }
.nfb-archiv-pruefung > li strong { font-size: var(--nfb-fs-sm); color: var(--nfb-text); }
.nfb-archiv-pruefung > li span { font-size: var(--nfb-fs-xs); color: var(--nfb-text-secondary); margin-top: 2px; }
.nfb-archiv-pruefung > li .btn { flex: 0 0 auto; white-space: nowrap; }
.nfb-archiv-pruefung > li.is-ok   { border-left-color: var(--nfb-st-available); }
.nfb-archiv-pruefung > li.is-ok > i   { color: var(--nfb-st-available); }
.nfb-archiv-pruefung > li.is-warn { border-left-color: var(--nfb-st-warning); }
.nfb-archiv-pruefung > li.is-warn > i { color: var(--nfb-st-warning); }
.nfb-archiv-pruefung > li.is-fehlt { border-left-color: var(--nfb-st-critical); }
.nfb-archiv-pruefung > li.is-fehlt > i { color: var(--nfb-st-critical); }

/* Sperrhinweis im Einsatzarchiv */
.nfb-archiv-banner {
    display: flex; align-items: center; gap: var(--nfb-sp-3);
    margin: 0 var(--nfb-sp-4) var(--nfb-sp-3); padding: var(--nfb-sp-2) var(--nfb-sp-3);
    border: 1px solid var(--nfb-border); border-left: 3px solid var(--nfb-st-done); border-radius: var(--nfb-r-md);
    background: var(--nfb-secondary-weak); font-size: var(--nfb-fs-sm); color: var(--nfb-text-secondary);
}
.nfb-archiv-banner > i { font-size: 1.1rem; color: var(--nfb-st-done); flex: 0 0 auto; }
.nfb-archiv-banner strong { color: var(--nfb-text); font-weight: 600; }
.nfb-archiv-banner__meta { margin-left: auto; font-size: var(--nfb-fs-xs); color: var(--nfb-text-muted); white-space: nowrap; }
@media (max-width: 640px) {
    .nfb-archiv-banner { flex-wrap: wrap; }
    .nfb-archiv-banner__meta { margin-left: 0; white-space: normal; }
}
@media (max-width: 480px) {
    .nfb-archiv-pruefung > li { flex-wrap: wrap; }
    .nfb-archiv-pruefung > li > div { flex-basis: calc(100% - 1.05rem - var(--nfb-sp-3)); }
    .nfb-archiv-pruefung > li .btn { margin-left: calc(1.05rem + var(--nfb-sp-3)); }
}


/* ==========================================================================
   21  INCIDENTWATCH-OBERFLÄCHE (Redesign A, Okt. 2026)
   Reine Darstellung: Topbar, Nutzermenü, Seitenkopf, Stammdaten-Bereichs-
   navigation, Toasts, Segment-Filter, Nutzertabelle. Keine Logik.
   Markenrot (--nfb-brand) markiert „wo bin ich“, Blau bleibt Aktion.
   ========================================================================== */

/* --- Topbar ------------------------------------------------------------- */
.nfb-topbar__inner { gap: 28px; }
.nfb-brand { gap: 10px; }
.nfb-brand__signet { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.nfb-brand__name { font-weight: 700; letter-spacing: -0.01em; }
.nfb-brand__sub--iw {
    margin-top: 1px;
    font-size: 0.71875rem;   /* 11.5px */
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.nfb-topbar__collapse { align-self: stretch; }
.nfb-nav { align-self: stretch; align-items: stretch; gap: 2px; }
.nfb-nav > li { display: flex; }
.nfb-nav__link {
    height: var(--nfb-topbar-h);
    padding: 0 14px;
    font-size: 0.84375rem;    /* 13.5px */
    border: 0;
    border-radius: 0;
}
.nfb-nav__link .bi { font-size: 0.9375rem; opacity: 1; }
.nfb-nav__link.is-active {
    color: var(--nfb-text);
    background: transparent;
    border-color: transparent;
    font-weight: 650;
}
.nfb-nav__link.is-active .bi { color: var(--nfb-brand); }
.nfb-nav__link.is-active::after {
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    background: var(--nfb-brand);
    border-radius: 3px 3px 0 0;
}

.nfb-topbar__user { gap: 14px; }
.nfb-topbar__sep { width: 1px; height: 28px; background: var(--nfb-border); flex-shrink: 0; }

/* Nutzer-Chip: Avatar, Name, Rolle und Pfeil sind ein Klickziel */
.nfb-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 10px 0 4px;
    color: var(--nfb-text);
    font-family: var(--nfb-font);
    text-align: left;
    cursor: pointer;
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-lg);
    transition: border-color var(--nfb-t-fast), background-color var(--nfb-t-fast);
}
.nfb-user-chip:hover,
.nfb-user-chip[aria-expanded="true"] { border-color: var(--nfb-border-strong); background: var(--nfb-surface-3); }
.nfb-user-chip:focus-visible { outline: 2px solid var(--nfb-primary); outline-offset: 2px; }
.nfb-user-chip .nfb-avatar { width: 30px; height: 30px; cursor: inherit; }
.nfb-user-chip .nfb-user-meta { text-align: left; }
.nfb-user-chip .nfb-user-meta__name { font-size: var(--nfb-fs-sm); line-height: 1.15; }
.nfb-user-meta__role {
    font-size: 0.71875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.nfb-user-chip__caret { font-size: 0.6875rem; color: var(--nfb-text-muted); transition: transform var(--nfb-t-fast); }
.nfb-user-chip[aria-expanded="true"] .nfb-user-chip__caret { transform: rotate(180deg); }

/* Nutzermenü */
.nfb-user-menu { min-width: 280px; padding: 6px; border-radius: 12px; }
.nfb-user-menu__head { display: flex; align-items: center; gap: 10px; padding: 10px; font-size: var(--nfb-fs-sm); }
.nfb-user-menu__head .nfb-avatar { width: 36px; height: 36px; cursor: default; }
.nfb-user-menu__role { display: block; color: var(--nfb-text-muted); font-size: var(--nfb-fs-xs); }
.nfb-user-menu .dropdown-item { display: flex; align-items: center; gap: 10px; height: 36px; border-radius: var(--nfb-r-md); }
.nfb-user-menu__hint { margin-left: auto; color: var(--nfb-text-muted); font-size: var(--nfb-fs-xs); }

/* --- Seitenkopf --------------------------------------------------------- */
.nfb-page-header__eyebrow {
    font-size: 0.78125rem;    /* 12.5px */
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.nfb-page-header h1 { font-weight: 700; letter-spacing: -0.015em; }
.nfb-page-header--crumb { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }

.nfb-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--nfb-text-muted);
    font-size: 0.78125rem;
}
.nfb-crumb a { color: var(--nfb-text-secondary); text-decoration: none; }
.nfb-crumb a:hover { color: var(--nfb-text); text-decoration: underline; }
.nfb-crumb .bi { font-size: 0.625rem; }

/* Markenbutton: Einsatz anlegen */
.nfb-btn-brand {
    color: #fff;
    background: linear-gradient(170deg, var(--nfb-brand) 0%, var(--nfb-brand-deep) 100%);
    border-color: var(--nfb-brand-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--nfb-shadow-xs);
}
.nfb-btn-brand:hover,
.nfb-btn-brand:focus { color: #fff; background: var(--nfb-brand-deep); border-color: var(--nfb-brand-deep); }
.nfb-btn-brand:active { transform: translateY(1px); }
.nfb-btn-brand--lg { height: var(--nfb-control-h-lg); padding: 0 18px; font-size: 0.90625rem; }
.nfb-btn-brand--lg .bi { font-size: 1rem; }

/* --- Stammdaten: Bereichsnavigation + Inhalt ---------------------------- */
.nfb-settings {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: var(--nfb-sp-6);
    align-items: start;
}
.nfb-settings__content { min-width: 0; }
.nfb-settings__content h2 > .bi:first-child { display: none; }   /* Icon steht bereits in der Navigation */

.nfb-settings__rail {
    position: sticky;
    top: calc(var(--nfb-topbar-h) + var(--nfb-sp-5));
    padding: 8px;
    background: var(--nfb-surface);
    border: 1px solid var(--nfb-border);
    border-radius: 12px;
}
.nfb-settings__group { display: flex; flex-direction: column; gap: 1px; padding: 8px 0 4px; }
.nfb-settings__group + .nfb-settings__group { border-top: 1px solid var(--nfb-border-subtle); }
.nfb-settings__group-label {
    margin: 2px 10px 6px;
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-xs);
    font-weight: 600;
}
.nfb-settings__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px;
    color: var(--nfb-text-secondary);
    font-size: 0.84375rem;
    font-weight: 550;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--nfb-r-md);
    transition: color var(--nfb-t-fast), background-color var(--nfb-t-fast);
}
.nfb-settings__link .bi { width: 16px; font-size: 0.9375rem; text-align: center; }
.nfb-settings__link span { overflow: hidden; text-overflow: ellipsis; }
.nfb-settings__link:hover { color: var(--nfb-text); background: var(--nfb-secondary-weak); }
.nfb-settings__link:focus-visible { outline: 2px solid var(--nfb-primary); outline-offset: -2px; }
.nfb-settings__link.is-active { color: var(--nfb-text); font-weight: 650; background: var(--nfb-surface-3); }
.nfb-settings__link.is-active .bi { color: var(--nfb-brand); }
.nfb-settings__link.is-active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    background: var(--nfb-brand);
    border-radius: 0 3px 3px 0;
}

/* --- Toasts (Rückmeldungen) --------------------------------------------- */
.nfb-toast-stack {
    position: fixed;
    right: var(--nfb-sp-6);
    bottom: calc(var(--nfb-bottombar-h) + var(--nfb-sp-5));
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--nfb-sp-2);
    width: min(380px, calc(100vw - 2 * var(--nfb-sp-4)));
}
.nfb-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 10px 10px 14px;
    color: var(--nfb-text);
    font-size: var(--nfb-fs-sm);
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border-strong);
    border-left: 3px solid var(--nfb-st-available);
    border-radius: var(--nfb-r-lg);
    box-shadow: var(--nfb-shadow-md);
}
.nfb-toast--error { border-left-color: var(--nfb-st-error); }
.nfb-toast__icon { font-size: 1rem; color: var(--nfb-st-available); flex-shrink: 0; }
.nfb-toast--error .nfb-toast__icon { color: var(--nfb-st-error); }
.nfb-toast__text { flex: 1; min-width: 0; }
.nfb-toast__close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    color: var(--nfb-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--nfb-r-sm);
    cursor: pointer;
}
.nfb-toast__close:hover { color: var(--nfb-text); background: var(--nfb-secondary-weak); }
.nfb-toast__close .bi { font-size: 0.75rem; }

/* --- Segment-Filter (Filter-Pills) -------------------------------------- */
.nav-pills.nfb-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--nfb-surface-sunken);
    border-radius: 9px;
}
.nfb-seg .nav-link { gap: 7px; height: 28px; padding: 0 10px; font-size: 0.78125rem; border-radius: 6px !important; }
.nfb-seg .nav-link .bi { opacity: 1; }
.nfb-seg .nav-link.active { box-shadow: 0 0 0 1px var(--nfb-border-strong); border-color: transparent; }
.nfb-seg__n {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    color: var(--nfb-text-muted);
    font-size: var(--nfb-fs-label);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    background: var(--nfb-secondary-weak);
    border-radius: 5px;
}
.nfb-seg .nav-link.active .nfb-seg__n { color: var(--nfb-primary-text); background: var(--nfb-primary-weak); }
.nfb-seg__warn .nfb-seg__n { color: var(--nfb-st-warning); background: color-mix(in srgb, var(--nfb-st-warning) 16%, transparent); }
.nfb-seg__divider { align-self: stretch; width: 1px; margin: 4px 3px; background: var(--nfb-border-strong); list-style: none; }

/* --- Nutzertabelle ------------------------------------------------------ */
.nfb-user-table > thead > tr > th {
    font-size: var(--nfb-fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.nfb-user-table > tbody > tr > td { padding-top: 9px; padding-bottom: 9px; font-size: 0.84375rem; }
.nfb-user-table__id { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nfb-user-table__phone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nfb-muted { color: var(--nfb-text-muted); }

.nfb-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nfb-person__ava {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    font-size: var(--nfb-fs-xs);
    font-weight: 700;
    background: var(--nfb-surface-3);
    border: 1px solid var(--nfb-border-strong);
    border-radius: 50%;
}
.nfb-person__text { display: grid; min-width: 0; line-height: 1.3; }
.nfb-person__mail::before { content: attr(data-mail); color: var(--nfb-text-muted); font-size: var(--nfb-fs-xs); }

.nfb-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    margin: 1px 4px 1px 0;
    padding: 0 8px;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    background: var(--nfb-surface-3);
    border: 1px solid var(--nfb-border);
    border-radius: 6px;
}
.nfb-role--key { color: var(--nfb-primary-text); background: var(--nfb-primary-weak); border-color: var(--nfb-primary-line); }
.nfb-role--none {
    color: var(--nfb-st-warning);
    background: color-mix(in srgb, var(--nfb-st-warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--nfb-st-warning) 35%, transparent);
}

.nfb-dot { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nfb-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nfb-st-available); }
.nfb-dot--off { color: var(--nfb-text-muted); }
.nfb-dot--off::before { background: var(--nfb-st-offline); }

/* Zeilenaktionen ruhiger: Rahmen erst bei Hover */
.nfb-user-table .nfb-icon-btn { border-color: transparent; }
.nfb-user-table .nfb-icon-btn:hover { border-color: var(--nfb-border); }
.nfb-user-table .nfb-icon-btn--danger { color: color-mix(in srgb, var(--nfb-st-critical) 80%, var(--nfb-text-secondary)); }
.nfb-user-table .nfb-icon-btn--danger:hover { color: #fff; border-color: var(--nfb-st-critical); }
.nfb-row-lock {
    display: inline-grid;
    place-items: center;
    width: var(--nfb-control-h-sm);
    height: var(--nfb-control-h-sm);
    color: var(--nfb-text-muted);
    font-size: 0.8125rem;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .nfb-nav__link { padding: 0 10px; }
    .nfb-settings { grid-template-columns: 220px minmax(0, 1fr); gap: var(--nfb-sp-5); }
}
@media (max-width: 991.98px) {
    .nfb-topbar__collapse { align-self: auto; }
    .nfb-nav { align-self: auto; }
    .nfb-nav__link { height: 38px; padding: 0 var(--nfb-sp-3); border-radius: var(--nfb-r-md); }
    .nfb-nav__link.is-active { background: var(--nfb-surface-3); box-shadow: inset 3px 0 0 var(--nfb-brand); }
    .nfb-topbar__sep { display: none; }

    /* Bereichsnavigation wird zur waagerechten, scrollbaren Leiste */
    .nfb-settings { grid-template-columns: minmax(0, 1fr); gap: var(--nfb-sp-4); }
    .nfb-settings__rail {
        position: static;
        display: flex;
        gap: var(--nfb-sp-2);
        overflow-x: auto;
        padding: 6px;
    }
    .nfb-settings__group { flex-direction: row; align-items: center; padding: 0; gap: 2px; }
    .nfb-settings__group + .nfb-settings__group { border-top: 0; border-left: 1px solid var(--nfb-border-subtle); padding-left: var(--nfb-sp-2); }
    .nfb-settings__group-label { display: none; }
    .nfb-settings__link.is-active::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
}
@media (max-width: 575.98px) {
    .nfb-user-chip { padding-right: 6px; }
    .nfb-toast-stack { right: var(--nfb-sp-4); }
}
@media (prefers-reduced-motion: reduce) {
    .nfb-user-chip__caret { transition: none; }
}


/* ==========================================================================
   22  EINSATZCHRONIK IM EIGENEN FENSTER (chronik_fenster.php)
   ========================================================================== */

/* Knopf im Kopf der Chronik (Lagebild) */
.nfb-chronik-popout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    color: var(--nfb-text-secondary);
    font-family: var(--nfb-font);
    font-size: var(--nfb-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-sm);
    transition: color var(--nfb-t-fast), background-color var(--nfb-t-fast), border-color var(--nfb-t-fast);
}
.nfb-chronik-popout .bi { font-size: 0.75rem; }
.nfb-chronik-popout:hover { color: var(--nfb-text); background: var(--nfb-surface-3); border-color: var(--nfb-border-strong); }
.nfb-chronik-popout:focus-visible { outline: 2px solid var(--nfb-primary); outline-offset: 2px; }
.nfb-chronik-popout.is-offen { color: var(--nfb-primary-text); background: var(--nfb-primary-weak); border-color: var(--nfb-primary-line); }

/* Fenster */
html:has(body.nfb-cw), body.nfb-cw { height: 100%; }
body.nfb-cw {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background: var(--nfb-canvas);
}
.nfb-cw__kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-height: 56px;
    padding: 8px 14px;
    background: var(--nfb-surface);
    border-bottom: 1px solid var(--nfb-border);
}
.nfb-cw__titel { flex: 1; min-width: 0; line-height: 1.25; }
.nfb-cw__titel h1 { margin: 0; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.nfb-cw__titel p {
    display: flex;
    gap: 8px;
    margin: 1px 0 0;
    overflow: hidden;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs);
    white-space: nowrap;
}
.nfb-cw__einsatz { flex-shrink: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; color: var(--nfb-text); font-weight: 600; }
.nfb-cw__ort { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--nfb-text-muted); }

.nfb-cw__werkzeuge { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nfb-cw__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 9px;
    color: var(--nfb-text-secondary);
    font-size: var(--nfb-fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-pill);
}
.nfb-cw__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--nfb-st-offline); }
.nfb-cw__status[data-zustand="live"] .nfb-cw__punkt { background: var(--nfb-st-available); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nfb-st-available) 18%, transparent); }
.nfb-cw__status[data-zustand="fehler"] { color: var(--nfb-st-warning); border-color: color-mix(in srgb, var(--nfb-st-warning) 40%, transparent); }
.nfb-cw__status[data-zustand="fehler"] .nfb-cw__punkt { background: var(--nfb-st-warning); }

.nfb-cw__zoom {
    display: inline-flex;
    align-items: center;
    height: 26px;
    background: var(--nfb-surface-2);
    border: 1px solid var(--nfb-border);
    border-radius: var(--nfb-r-sm);
}
.nfb-cw__zoom button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 24px;
    padding: 0;
    color: var(--nfb-text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--nfb-r-sm);
    cursor: pointer;
}
.nfb-cw__zoom button:hover:not(:disabled) { color: var(--nfb-text); background: var(--nfb-surface-3); }
.nfb-cw__zoom button:disabled { opacity: 0.35; cursor: default; }
.nfb-cw__zoom button:focus-visible { outline: 2px solid var(--nfb-primary); outline-offset: -2px; }
.nfb-cw__zoom .bi { font-size: 0.75rem; }
#cwZoomWert { min-width: 42px; color: var(--nfb-text-muted); font-size: var(--nfb-fs-label); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.nfb-cw__inhalt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 14px 16px;
}
.nfb-cw__inhalt > * { zoom: var(--nfb-cw-zoom, 1); }
.nfb-cw__inhalt > .nfb-empty { margin-top: 12vh; }

@media (max-width: 460px) {
    .nfb-cw__kopf { flex-wrap: wrap; }
    .nfb-cw__werkzeuge { width: 100%; justify-content: space-between; }
}