/*! © 2026 Bemuar Technology (Resmuar). Alle Rechte vorbehalten. Urheberrechtlich geschützt (§§ 2, 69a UrhG): Vervielfältigung, Weitergabe und Nachbau ohne schriftliche Zustimmung nicht gestattet. https://resmuar.de/impressum */
/*
 * DIE PLATTFORM — das eigene Gesicht der Konsole (/konsole). 19.09.2026
 *
 * Diese Datei lädt NUR das Operator-Panel (OperatorPanelProvider → `->assets()`; Filament liefert
 * Panel-Assets nur für das Panel aus, das die Anfrage bedient). Das Panel der Inhaberin sieht sie
 * nie. Sie steht NACH panel-ui.css, und jede Regel trägt `.fi-panel-operator` — sie gewinnt gegen
 * die gemeinsame Schicht bei gleicher Spezifität durch die Reihenfolge, sonst durch die eine
 * Klasse mehr. Kein `!important` (bis auf die zwei Canvas-Masse, die Chart.js inline schreibt).
 *
 * ⛔ WAS DER AUFTRAG WAR. Der Betreiber: die Konsole sehe aus wie eine Admin-Vorlage — blaue
 *    Pille in der Schiene, vier gleiche Kacheln, eine Tabelle wie eine Datenbank, eine Matrix wie
 *    Excel, ein Assistent wie ein Formular. Sie soll aussehen wie der Leitstand hinter einer
 *    Restaurant-Plattform: präzise, ruhig, technisch — und NICHT wie das Panel eines Hauses.
 *
 * ZWEI PANELS, ZWEI CHARAKTERE, EIN SYSTEM:
 *    geteilt   Schrift (Archivo), Akzentfamilie (Terrakotta aus Marke::FARBE), Symbole
 *              (Heroicons, eine Familie), Abstände (4er-Raster), Bewegung (150/200/250 ms)
 *    getrennt  Das Haus: warm, schwebende Schiene, Kacheln, gastlich.
 *              Die Plattform: warmes Neutralgrau, bündige Schiene über die volle Höhe,
 *              Haarlinien statt Schatten, Flächen statt Karten, Tabellen als Werkzeug.
 *
 * ⚠️ KONTRAST IST GEMESSEN, NICHT GESCHÄTZT (WCAG 2.2, relative Leuchtdichte). Die Palette des
 *    Auftrags ist übernommen, bis auf die Stellen, an denen sie Text trägt und durchfällt:
 *      · #969892 («muted») auf Weiss 2.92:1 — nur für Symbole und Linien; Metatext ist #6E706B
 *        (5.01 auf Weiss, 4.55 auf #F3F4F4).
 *      · Weiss auf #C85B2F 4.21:1 — für 14-px-Knopftext zu wenig. Der Akzent bleibt #C85B2F
 *        (Markierungen, Fokus 3.82:1 auf dem Grund); gefüllte Knöpfe tragen #B4502A (5.10:1).
 *      · #B77A20 («warning») auf Weiss 3.61:1 — Punkt und Symbol; Warntext ist #8F5F17 (5.50).
 *      · Dunkel: Weiss auf #D56B3A 3.50:1 — Knöpfe tragen dort #BA532C (4.81:1).
 *
 * ⚠️ KEINE TAILWIND-UTILITIES in den Blades (panel-ui.css, Dateikopf): alles Eigene heisst `pf-*`.
 */

/* ═══ 1 · Token ═══════════════════════════════════════════════════════════════════════════ */

body.fi-panel-operator {
    /* Flächen */
    --pf-bg: #F3F4F4;
    --pf-surface: #FFFFFF;
    --pf-subtle: #EEEFEF;
    --pf-elevated: #FFFFFF;
    --pf-hover: #F5F6F6;
    --pf-border: #DFE0E0;
    --pf-border-soft: #E9EAEA;
    --pf-control: #8A8C86;               /* Rahmen von Bedienelementen — 3.44:1 auf Weiss (1.4.11) */

    /* Text */
    --pf-text: #20211F;                  /* 14.69:1 auf dem Grund */
    --pf-text-2: #686A66;                /*  4.97:1 */
    --pf-text-3: #6E706B;                /*  4.55:1 — Metatext, Spaltenköpfe, Etiketten */
    --pf-muted: #969892;                 /*  Symbole, Linien — nie Text */

    /* Akzent — Terrakotta, die dunkle Stufe der Marke (Marke::FARBE_DUNKEL #C6532B) */
    --pf-accent: #C85B2F;
    --pf-accent-strong: #B4502A;         /* gefüllte Knöpfe, Akzenttext — Weiss darauf 5.10:1 */
    --pf-accent-hover: #A2471F;
    --pf-accent-soft: #F8ECE5;           /* gewählter Eintrag, Akzentflächen */
    --pf-accent-text: #A3481F;           /* Text auf --pf-accent-soft — 5.32:1 */
    --pf-on-accent: #FFFFFF;

    /* Zustände — Vordergrund (Text), Punkt, Fläche */
    --pf-ok: #238463;      --pf-ok-fg: #1D7556;      --pf-ok-bg: #EBF5F0;
    --pf-warn: #D56B00;    --pf-warn-fg: #A34700;    --pf-warn-bg: #FFF1E6;
    --pf-danger: #B94B45;  --pf-danger-fg: #A8423C;  --pf-danger-bg: #FAEDEC;
    --pf-info: #557A9B;    --pf-info-fg: #4B6D8A;    --pf-info-bg: #EDF2F7;

    /* Schrift */
    --pf-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace;
    --pf-t-display: 28px;  --pf-lh-display: 34px;
    --pf-t-heading: 18px;  --pf-lh-heading: 24px;
    --pf-t-body: 14px;     --pf-lh-body: 20px;
    --pf-t-caption: 12.5px; --pf-lh-caption: 18px;
    --pf-t-label: 11px;    --pf-lh-label: 14px;

    /* Raster, Radien, Bewegung */
    --pf-s1: 4px; --pf-s2: 8px; --pf-s3: 12px; --pf-s4: 16px; --pf-s5: 20px;
    --pf-s6: 24px; --pf-s8: 32px; --pf-s10: 40px; --pf-s12: 48px;
    --pf-r-sm: 6px; --pf-r-md: 8px; --pf-r-lg: 12px; --pf-r-xl: 16px;
    --pf-fast: 150ms; --pf-mid: 200ms; --pf-slow: 250ms;
    --pf-ease: cubic-bezier(.2, .7, .2, 1);

    /* Schatten NUR für Schwebendes: Menüs, Fenster, die Schublade */
    --pf-shadow-pop: 0 1px 2px rgba(32, 33, 31, .06), 0 8px 24px -6px rgba(32, 33, 31, .16);
    --pf-shadow-modal: 0 2px 6px rgba(32, 33, 31, .08), 0 24px 56px -12px rgba(32, 33, 31, .28);

    --pf-topbar-h: 56px;
    --sidebar-width: 15.5rem;            /* 248 px */

    /* ── Filaments Rampen auf die warme Palette — trifft jede Regel, die diese Datei nie nennt */
    --gray-50: #F3F4F4;  --gray-100: #EEEFEF; --gray-200: #DFE0E0; --gray-300: #CCCDCD;
    --gray-400: #A3A59F; --gray-500: #7D817C; --gray-600: #62645F; --gray-700: #454743;
    --gray-800: #2B2F2C; --gray-900: #171918; --gray-950: #101211;

    --primary-50: #FBF3EF;  --primary-100: #F6E3DA; --primary-200: #EDC5B3; --primary-300: #E1A084;
    --primary-400: #D57A55; --primary-500: #C85B2F; --primary-600: #B4502A; --primary-700: #9A4323;
    --primary-800: #7E381E; --primary-900: #672F1A; --primary-950: #3A190D;

    --success-50: #EEF7F3;  --success-100: #D6EDE3; --success-200: #ADDAC6; --success-300: #7DC1A4;
    --success-400: #4FA982; --success-500: #2F9270; --success-600: #238463; --success-700: #1D7556;
    --success-800: #185640; --success-900: #134433; --success-950: #0A261D;

    --warning-50: #FFF4EC;  --warning-100: #FFE3CE; --warning-200: #FFC69F; --warning-300: #F9A469;
    --warning-400: #EB8533; --warning-500: #D56B00; --warning-600: #B75200; --warning-700: #943F00;
    --warning-800: #7A3300; --warning-900: #652A00; --warning-950: #371901;

    --danger-50: #FBEFEE;  --danger-100: #F6DAD8; --danger-200: #EDB6B2; --danger-300: #E28E88;
    --danger-400: #D66A61; --danger-500: #C8574F; --danger-600: #B94B45; --danger-700: #A8423C;
    --danger-800: #7C302C; --danger-900: #632724; --danger-950: #381614;

    --info-50: #EFF4F8;  --info-100: #DCE6EF; --info-200: #BACFE0; --info-300: #97B4CD;
    --info-400: #7C9DBD; --info-500: #6689AA; --info-600: #557A9B; --info-700: #4B6D8A;
    --info-800: #3D5970; --info-900: #31475A; --info-950: #1C2935;

    /* ── Die Token der gemeinsamen Schicht (panel-ui.css), auf die Plattform umgelegt ─────── */
    --bm-srf-0: var(--pf-bg);
    --bm-srf-1: var(--pf-surface);
    --bm-srf-2: var(--pf-subtle);
    --bm-row-hover: var(--pf-hover);
    --bm-line-hair: var(--pf-border);
    --bm-line-strong: var(--pf-control);
    --bm-txt-1: var(--pf-text);
    --bm-txt-2: var(--pf-text-2);
    --bm-txt-3: var(--pf-text-3);
    --bm-focus: var(--pf-accent);
    --bm-ok-fg: var(--pf-ok-fg);       --bm-ok-bg: var(--pf-ok-bg);       --bm-ok-line: #A9D6C2;
    --bm-wait-fg: var(--pf-info-fg);   --bm-wait-bg: var(--pf-info-bg);   --bm-wait-line: #B9CCDD;
    --bm-todo-fg: var(--pf-warn-fg);   --bm-todo-bg: var(--pf-warn-bg);   --bm-todo-line: #F9C7A3;
    --bm-risk-fg: var(--pf-danger-fg); --bm-risk-bg: var(--pf-danger-bg); --bm-risk-line: #EDBCB7;
    --bm-ident-fg: var(--pf-accent-text);
    --bm-ident-line: var(--pf-accent);
    --bm-ident-bg: var(--pf-accent-soft);
    --bm-row-sel: var(--pf-accent-soft);
    --bm-rail-bg: var(--pf-bg);
    --bm-rail-line: var(--pf-border);
    --bm-rail-ident: var(--pf-text);
    --bm-rail-hover: var(--pf-subtle);
    --bm-rail-sel: var(--pf-accent-soft);
    --bm-lift-1: none;
    --bm-lift-2: none;
    --bm-lift-3: var(--pf-shadow-pop);
    --bm-lift-4: var(--pf-shadow-modal);
    --bm-lift-kachel: none;
    --bm-topbar-h: var(--pf-topbar-h);

    background-color: var(--pf-bg);
    color: var(--pf-text);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * DUNKEL — kein umgedrehtes Hell. Tiefe Holzkohle statt Schwarz, erhöhte Flächen eine Stufe
 * heller statt Schatten, warmes Weiss statt #FFF (reines Weiss auf Dunkel halationiert).
 */
.dark body.fi-panel-operator {
    --pf-bg: #101211;
    --pf-surface: #171918;
    --pf-subtle: #1D201E;
    --pf-elevated: #1D201E;
    --pf-hover: #1B1E1C;
    --pf-border: #2B2F2C;
    --pf-border-soft: #232624;
    --pf-control: #6B706B;               /* 3.45:1 auf der Fläche */

    --pf-text: #EFF0F0;                  /* 16.48:1 */
    --pf-text-2: #B8BAB4;                /*  9.02:1 */
    --pf-text-3: #8A8E88;                /*  5.30:1 auf der Fläche, 4.94 auf erhöhten */
    --pf-muted: #7D817C;

    --pf-accent: #D56B3A;                /* 5.04:1 als Text auf der Fläche */
    --pf-accent-strong: #BA532C;         /* Weiss darauf 4.81:1 */
    --pf-accent-hover: #A84A27;
    --pf-accent-soft: #202121;
    --pf-accent-text: #E08A5E;           /* 6.14:1 auf --pf-accent-soft */

    --pf-ok: #4FA982;      --pf-ok-fg: #5DB891;      --pf-ok-bg: color-mix(in oklab, #4FA982 13%, transparent);
    /* D-170/b: Orange statt Ocker, und keine getönte Fläche — durchscheinendes Ocker auf Schwarz
       ist Braun. Die Farbe steht in Kante, Punkt und Schrift (D-178). */
    --pf-warn: #EB8533;    --pf-warn-fg: #F9A469;    --pf-warn-bg: rgba(239, 240, 240, .06);
    --pf-danger: #D66A61;  --pf-danger-fg: #DE7B72;  --pf-danger-bg: color-mix(in oklab, #D66A61 13%, transparent);
    --pf-info: #7C9DBD;    --pf-info-fg: #8DAACA;    --pf-info-bg: color-mix(in oklab, #7C9DBD 13%, transparent);

    --pf-shadow-pop: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 28px -6px rgba(0, 0, 0, .6);
    --pf-shadow-modal: 0 0 0 1px rgba(255, 255, 255, .07), 0 28px 60px -12px rgba(0, 0, 0, .7);

    --bm-ok-line: color-mix(in oklab, #4FA982 28%, transparent);
    --bm-wait-line: color-mix(in oklab, #7C9DBD 28%, transparent);
    --bm-todo-line: color-mix(in oklab, #EB8533 45%, transparent);
    --bm-risk-line: color-mix(in oklab, #D66A61 28%, transparent);
    --bm-rail-bg: #131514;
}

/* ═══ 2 · Das Gehäuse: Schiene über die volle Höhe, Kopfleiste nur über der Arbeit ═══════ */

@media (min-width: 64rem) {
    /*
     * ⛔ DIE SCHIENE SCHWEBTE ALS KARTE UNTER DER KOPFLEISTE — die Form des Hauses. Die Plattform
     *    bekommt die Form eines Werkzeugs: bündig links, von oben bis unten, eine Haarlinie
     *    daneben. Die Kopfleiste beginnt rechts davon (Polster = Schienenbreite).
     *
     *    `margin-top` negativ um die Kopfleiste: die Schiene liegt im Fluss NACH der Kopfleiste
     *    und klebt (`sticky`) bei 0 — so steht sie auch dann richtig, wenn der Balken «Sie arbeiten
     *    in …» darüber steht und beim Scrollen verschwindet.
     */
    .fi-panel-operator.fi-body-has-topbar .fi-sidebar {
        top: 0;
        height: 100dvh;
        margin: calc(-1 * var(--pf-topbar-h)) 0 0;
        border-radius: 0;
        border-inline-end: 1px solid var(--pf-border);
        box-shadow: none;
        background-color: var(--bm-rail-bg);
        z-index: 30;
    }

    .fi-panel-operator .fi-topbar {
        padding-inline: calc(var(--sidebar-width) + var(--pf-s8)) var(--pf-s8);
    }

    .fi-panel-operator.fi-body-has-topbar .fi-sidebar-header {
        display: flex;
        height: var(--pf-topbar-h);
        min-height: var(--pf-topbar-h);
        padding: 0 var(--pf-s5);
        border-bottom: 0;
        background: transparent;
    }

    .fi-panel-operator .fi-main {
        padding-inline: var(--pf-s8);
    }
}

.fi-panel-operator .fi-topbar {
    min-height: var(--pf-topbar-h);
    background-color: color-mix(in oklab, var(--pf-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--pf-border-soft);
    box-shadow: none;
}

.fi-panel-operator .fi-topbar-start {
    min-width: 0;
    flex: 1 1 auto;
}

.fi-panel-operator .fi-topbar-end {
    gap: var(--pf-s2);
}

.fi-panel-operator .fi-main-ctn {
    background-color: var(--pf-bg);
}

/* ═══ 3 · Die Marke ═══════════════════════════════════════════════════════════════════════ */

.fi-panel-operator .fi-logo:has(> .pf-marke) {
    display: flex;
    align-items: center;
    height: auto;
    max-width: 100%;
    margin: 0;
    overflow: visible;
    font-size: inherit;
    color: inherit;
}

.pf-marke {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pf-marke__zeichen {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: contain;
}

.pf-marke__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1;
}

.pf-marke__name {
    font-size: 14.5px;
    line-height: 17px;
    font-weight: 700;
    color: var(--pf-text);
}

.pf-marke__zusatz {
    margin-top: 2px;
    font-size: var(--pf-t-label);
    line-height: var(--pf-lh-label);
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--pf-text-3);
}

/* ═══ 4 · Die Schiene ═════════════════════════════════════════════════════════════════════ */

.fi-panel-operator .fi-sidebar-nav {
    padding: var(--pf-s2) var(--pf-s3) var(--pf-s6);
}

.fi-panel-operator .fi-sidebar-nav-groups {
    row-gap: var(--pf-s5);
    margin-inline: 0;
}

.fi-panel-operator .fi-sidebar-group-items {
    row-gap: 1px;
}

.fi-panel-operator .fi-sidebar-group-btn {
    min-height: 28px;
    padding: 0 var(--pf-s2) var(--pf-s1) 10px;
    gap: var(--pf-s2);
}

.fi-panel-operator .fi-sidebar-group-label {
    font-size: var(--pf-t-label);
    line-height: var(--pf-lh-label);
    font-weight: 600;
    color: var(--pf-text-3);
}

/* Der Einklapp-Pfeil ist da, aber leise — er erscheint, wenn die Hand zur Überschrift geht. */
.fi-panel-operator .fi-sidebar-group-collapse-btn {
    width: 22px;
    height: 22px;
    margin: -4px 0;
    color: var(--pf-muted);
    opacity: 0;
    transition: opacity var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-sidebar-group-btn:hover .fi-sidebar-group-collapse-btn,
.fi-panel-operator .fi-sidebar-group-collapse-btn:focus-visible,
.fi-panel-operator .fi-sidebar-group.fi-collapsed .fi-sidebar-group-collapse-btn {
    opacity: 1;
}

.fi-panel-operator .fi-sidebar-group-collapse-btn .fi-icon {
    width: 14px;
    height: 14px;
}

.fi-panel-operator .fi-sidebar-item-btn {
    min-height: 38px;
    padding: 0 10px;
    gap: 10px;
    border-radius: var(--pf-r-md);
    color: var(--pf-text-2);
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    transition: background-color var(--pf-fast) var(--pf-ease), color var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-sidebar-item-btn > .fi-icon,
.fi-panel-operator .fi-sidebar-item-icon {
    width: 18px;
    height: 18px;
    color: var(--pf-muted);
    transition: color var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-sidebar-item-label {
    font-size: var(--pf-t-body);
    line-height: var(--pf-lh-body);
    font-weight: 500;
    color: inherit;
}

@media (hover: hover) {
    .fi-panel-operator .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
        background-color: var(--pf-subtle);
        color: var(--pf-text);
    }

    .fi-panel-operator .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover > .fi-icon {
        color: var(--pf-text-2);
    }
}

/*
 * DER GEWÄHLTE EINTRAG — eine warme Fläche und das Symbol in Terrakotta. Keine Pille, kein
 * Verlauf, kein Schatten, kein Balken: EIN Zeichen genügt, wenn die übrigen ruhig sind.
 */
.fi-panel-operator .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--pf-accent-soft);
    background-image: none;
    box-shadow: none;
    color: var(--pf-text);
}

.fi-panel-operator .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--pf-text);
    font-weight: 600;
}

.fi-panel-operator .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-panel-operator .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-icon {
    color: var(--pf-accent);
}

/*
 * ⛔ DAS GEÖFFNETE HAUS — ab hier gehören die Daten jemand anderem. Eine Linie darüber, und die
 *    Überschrift in der Akzentfarbe mit einem Punkt davor: dieselbe Farbe wie der Balken «Sie
 *    arbeiten in …» oben, damit Balken und Regal als EIN Objekt gelesen werden.
 */
.fi-panel-operator .fi-sidebar-group.pf-regal-haus {
    margin-top: var(--pf-s1);
    padding-top: var(--pf-s4);
    border-top: 1px solid var(--pf-border);
}

.fi-panel-operator .pf-regal-haus .fi-sidebar-group-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pf-accent-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    font-weight: 600;
}

.fi-panel-operator .pf-regal-haus .fi-sidebar-group-label::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pf-accent);
}

/* Die Schiene rollt dünn — keine graue Leiste über die volle Höhe. */
.fi-panel-operator .fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--pf-muted) 40%, transparent) transparent;
}

/* ═══ 5 · Die Kopfleiste: Pfad, Befehlssuche, Anleitung, Konto ═══════════════════════════ */

.pf-pfad {
    display: none;
    min-width: 0;
}

@media (min-width: 64rem) {
    .pf-pfad { display: block; }
}

.pf-pfad__liste {
    display: flex;
    align-items: center;
    gap: var(--pf-s2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: var(--pf-lh-body);
    white-space: nowrap;
    overflow: hidden;
}

.pf-pfad__schritt {
    display: flex;
    align-items: center;
    gap: var(--pf-s2);
    min-width: 0;
    color: var(--pf-text-3);
}

.pf-pfad__schritt + .pf-pfad__schritt::before {
    content: '/';
    color: var(--pf-border);
    font-weight: 300;
}

.dark .pf-pfad__schritt + .pf-pfad__schritt::before { color: var(--pf-control); }

.pf-pfad__schritt [aria-current='page'] {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pf-text);
    font-weight: 500;
}

.pf-pfad__link {
    color: var(--pf-text-3);
    text-decoration: none;
    border-radius: var(--pf-r-sm);
}

.pf-pfad__link:hover { color: var(--pf-text); }

/* ── Die Befehlssuche ⌘K ─────────────────────────────────────────────────────────────── */

.fi-panel-operator .fi-global-search-field .fi-input-wrp {
    width: 17rem;
    min-height: 34px;
    border-radius: var(--pf-r-md);
    background-color: var(--pf-surface);
    --tw-ring-color: var(--pf-border);
    transition: box-shadow var(--pf-fast) var(--pf-ease), width var(--pf-mid) var(--pf-ease);
}

.fi-panel-operator .fi-global-search-field .fi-input-wrp:focus-within {
    --tw-ring-color: var(--pf-accent);
}

@media (min-width: 80rem) {
    .fi-panel-operator .fi-global-search-field .fi-input-wrp:focus-within { width: 22rem; }
}

.fi-panel-operator .fi-global-search-field .fi-input {
    font-size: 13.5px;
    padding-block: 6px;
}

.fi-panel-operator .fi-global-search-field .fi-input::placeholder { color: var(--pf-text-3); }

.fi-panel-operator .fi-global-search-field .fi-input-wrp-prefix .fi-icon {
    width: 16px;
    height: 16px;
    color: var(--pf-muted);
}

/* Das Tastenkürzel als Taste gezeichnet, nicht als Text. */
.fi-panel-operator .fi-global-search-field .fi-input-wrp-suffix {
    padding-inline-end: 6px;
}

.fi-panel-operator .fi-global-search-field .fi-input-wrp-suffix,
.fi-panel-operator .fi-global-search-field .fi-input-wrp-suffix > * {
    font-family: var(--pf-mono);
    font-size: 11px;
    color: var(--pf-text-3);
}

.fi-panel-operator .fi-global-search-field .fi-input-wrp-suffix > span,
.fi-panel-operator .fi-global-search-field .fi-input-wrp-label {
    padding: 1px 6px;
    border: 1px solid var(--pf-border);
    border-radius: 5px;
    background: var(--pf-subtle);
    line-height: 16px;
}

.fi-panel-operator .fi-global-search-results-ctn {
    width: min(32rem, calc(100vw - 2rem));
    max-height: min(28rem, 70dvh);
    margin-top: 6px;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-lg);
    background: var(--pf-elevated);
    box-shadow: var(--pf-shadow-pop);
    overflow: auto;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-panel-operator .fi-global-search-result-group-header {
    padding: 10px 14px 4px;
    font-size: var(--pf-t-label);
    line-height: var(--pf-lh-label);
    font-weight: 600;
    color: var(--pf-text-3);
    background: transparent;
    position: static;
    border: 0;
}

.fi-panel-operator .fi-global-search-result-group-results {
    padding: 2px 6px 6px;
    border: 0;
}

.fi-panel-operator .fi-global-search-result {
    border: 0;
}

.fi-panel-operator .fi-global-search-result-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pf-s3);
    padding: 8px 10px;
    border-radius: var(--pf-r-md);
    transition: background-color var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-global-search-result-link:hover,
.fi-panel-operator .fi-global-search-result-link:focus-visible {
    background-color: var(--pf-subtle);
    outline: none;
}

.fi-panel-operator .fi-global-search-result-heading {
    font-size: var(--pf-t-body);
    font-weight: 500;
    color: var(--pf-text);
}

.fi-panel-operator .fi-global-search-result-details {
    display: flex;
    gap: var(--pf-s2);
    margin: 0;
    flex: none;
}

.fi-panel-operator .fi-global-search-result-detail-value {
    font-size: var(--pf-t-caption);
    color: var(--pf-text-3);
}

.fi-panel-operator .fi-global-search-result-detail + .fi-global-search-result-detail::before {
    content: '·';
    margin-inline-end: var(--pf-s2);
    color: var(--pf-muted);
}

.fi-panel-operator .fi-global-search-no-results-message {
    padding: 14px;
    font-size: 13.5px;
    color: var(--pf-text-3);
}

/* ── Anleitung, Konto ─────────────────────────────────────────────────────────────────── */

.fi-panel-operator .bm-anleitung {
    min-height: 34px;
    padding: 0 10px;
    border-radius: var(--pf-r-md);
    color: var(--pf-text-2);
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color var(--pf-fast) var(--pf-ease), color var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .bm-anleitung:hover {
    background-color: var(--pf-subtle);
    color: var(--pf-text);
}

.fi-panel-operator .fi-user-menu .fi-avatar,
.fi-panel-operator .fi-user-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

@media (max-width: 47.99rem) {
    .fi-panel-operator .bm-anleitung__wort { display: none; }
    .fi-panel-operator .fi-global-search-field .fi-input-wrp { width: 2.25rem; }
    .fi-panel-operator .fi-global-search-field .fi-input-wrp:focus-within { width: min(18rem, 60vw); }
    .fi-panel-operator .fi-global-search-field .fi-input-wrp-suffix { display: none; }
}

/* ═══ 6 · Der Seitenkopf: Titel, Satz, Handlungen ════════════════════════════════════════ */

.fi-panel-operator .fi-page-header-main-ctn {
    padding-block: var(--pf-s8) var(--pf-s6);
    row-gap: var(--pf-s6);
}

.fi-panel-operator .fi-header {
    gap: var(--pf-s4) var(--pf-s6);
    align-items: flex-end;
}

.fi-panel-operator .fi-header-heading {
    font-size: var(--pf-t-display);
    line-height: var(--pf-lh-display);
    font-weight: 600;
    letter-spacing: -.022em;
    color: var(--pf-text);
}

.fi-panel-operator .fi-header-subheading {
    max-width: 72ch;
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 21px;
    color: var(--pf-text-2);
}

@media (max-width: 63.99rem) {
    .fi-panel-operator .fi-page-header-main-ctn { padding-block: var(--pf-s6) var(--pf-s4); }
    .fi-panel-operator .fi-header-heading { font-size: 24px; line-height: 30px; }
}

.fi-panel-operator .fi-page-content {
    row-gap: var(--pf-s6);
}

/* ═══ 7 · Knöpfe ══════════════════════════════════════════════════════════════════════════ */

.fi-panel-operator .fi-btn {
    min-height: 36px;
    padding-inline: 14px;
    gap: 6px;
    border-radius: var(--pf-r-md);
    font-size: var(--pf-t-body);
    font-weight: 550;
    letter-spacing: 0;
    box-shadow: none;
    transition: background-color var(--pf-fast) var(--pf-ease), box-shadow var(--pf-fast) var(--pf-ease),
                color var(--pf-fast) var(--pf-ease), transform var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-btn.fi-size-sm {
    min-height: 30px;
    padding-inline: 10px;
    font-size: 13px;
}

.fi-panel-operator .fi-btn.fi-size-lg {
    min-height: 40px;
    padding-inline: 18px;
}

.fi-panel-operator .fi-btn:hover { box-shadow: none; }
.fi-panel-operator .fi-btn:active { transform: translateY(.5px); }

.fi-panel-operator .fi-btn .fi-icon {
    width: 16px;
    height: 16px;
}

/* Hauptknopf: Terrakotta, die tiefe Stufe (Weiss darauf 5.10:1) — und hover dunkler, nicht heller. */
.fi-panel-operator .fi-btn.fi-color-primary:not(.fi-outlined) {
    background-color: var(--pf-accent-strong);
    color: var(--pf-on-accent);
}

.fi-panel-operator .fi-btn.fi-color-primary:not(.fi-outlined):hover {
    background-color: var(--pf-accent-hover);
}

.fi-panel-operator .fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon { color: var(--pf-on-accent); }

/*
 * Nebenknopf: Fläche, Haarlinie, dunkler Text — kein grauer Block.
 *
 * ⚠️ FILAMENT 4 GIBT EINEM GRAUEN KNOPF GAR KEINE FARBKLASSE — `fi-btn fi-size-sm`, sonst nichts
 *    (gemessen an «Verwalten» in der Restaurantliste). Eine Regel auf `.fi-color-gray` traf ihn nie;
 *    `:not(.fi-color)` trifft genau die Knöpfe ohne Farbe.
 */
.fi-panel-operator .fi-btn:is(.fi-color-gray, :not(.fi-color)):not(.fi-outlined):not(.fi-link) {
    background-color: var(--pf-surface);
    color: var(--pf-text);
    box-shadow: inset 0 0 0 1px var(--pf-border);
}

.fi-panel-operator .fi-btn:is(.fi-color-gray, :not(.fi-color)):not(.fi-outlined):not(.fi-link):hover {
    background-color: var(--pf-subtle);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pf-control) 55%, var(--pf-border));
}

.fi-panel-operator .fi-btn:is(.fi-color-gray, :not(.fi-color)):not(.fi-outlined):not(.fi-link) .fi-icon { color: var(--pf-text-3); }

.fi-panel-operator .fi-btn.fi-color-danger:not(.fi-outlined) {
    background-color: var(--pf-danger-fg);
    color: #FFFFFF;
}

.fi-panel-operator .fi-icon-btn {
    border-radius: var(--pf-r-md);
    color: var(--pf-text-3);
    transition: background-color var(--pf-fast) var(--pf-ease), color var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-icon-btn:hover {
    background-color: var(--pf-subtle);
    color: var(--pf-text);
}

.fi-panel-operator .fi-link {
    color: var(--pf-accent-strong);
    font-weight: 550;
}

.dark .fi-panel-operator .fi-link { color: var(--pf-accent); }

.fi-panel-operator .fi-link:hover { color: var(--pf-accent-hover); text-decoration: none; }

/* ═══ 8 · Flächen: Abschnitte statt schwebender Karten ════════════════════════════════════ */

.fi-panel-operator .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-lg);
    background-color: var(--pf-surface);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-panel-operator a.fi-section:hover,
.fi-panel-operator .fi-section.fi-clickable:hover { box-shadow: none; }

.fi-panel-operator .fi-section-header {
    padding: var(--pf-s4) var(--pf-s5) 0;
    gap: var(--pf-s3);
}

.fi-panel-operator .fi-section-content {
    padding: var(--pf-s4) var(--pf-s5) var(--pf-s5);
}

.fi-panel-operator .fi-section-header + .fi-section-content-ctn .fi-section-content,
.fi-panel-operator .fi-section-header + .fi-section-content { padding-top: var(--pf-s3); }

.fi-panel-operator .fi-section .fi-section-header-heading {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--pf-text);
}

.fi-panel-operator .fi-section .fi-section-header-description {
    margin-top: 2px;
    font-size: var(--pf-t-caption);
    line-height: var(--pf-lh-caption);
    color: var(--pf-text-3);
}

/* Der Hinweisstreifen der Flotte (und der Merkmale) — eine Zeile, warm, ohne Kasten im Kasten. */
.fi-panel-operator .bm-hinweis {
    display: flex;
    align-items: center;
    gap: var(--pf-s3);
    padding: 10px var(--pf-s4);
    border: 1px solid var(--bm-todo-line);
    border-radius: var(--pf-r-lg);
    background: var(--pf-warn-bg);
    color: var(--pf-text);
    font-size: 13.5px;
}

.fi-panel-operator .bm-hinweis .bm-zeichen {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--pf-warn);
}

.fi-panel-operator .bm-hinweis__text { flex: 1 1 auto; min-width: 0; }

.pf-hinweis-knopf {
    flex: none;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    color: var(--pf-accent-strong);
    cursor: pointer;
}

.dark .pf-hinweis-knopf { color: var(--pf-accent); }

/* Der Balken «Sie arbeiten in …» — die Farbe des Regals, das er meint. */
.fi-panel-operator .fi-banner {
    padding: 9px var(--pf-s8);
    background: var(--pf-accent-soft);
    border-bottom: 1px solid color-mix(in oklab, var(--pf-accent) 35%, transparent);
    font-size: 13.5px;
}

.fi-panel-operator .fi-banner strong { color: var(--pf-accent-text); }

/* ═══ 9 · Tabellen — ein Werkzeug zum Überfliegen ════════════════════════════════════════ */

/*
 * ⛔ DER KOPF STEHT AUF DER SEITE, NICHT IM FENSTER DER TABELLE. panel-ui.css verschmilzt auf
 *    Listen Überschrift und Tabelle zu einem Kasten (für das Haus richtig: dort ist die Liste das
 *    Fenster). Hier hat jede Seite denselben Kopf — Titel, Satz, Handlung — und die Tabelle ist
 *    eine Fläche darunter. Gleiche Seiten, gleicher Kopf.
 */
.fi-panel-operator .fi-page:has(.fi-page-content > .fi-ta:first-child) .fi-header {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.fi-panel-operator .fi-page:has(.fi-page-content > .fi-ta:first-child) .fi-header-heading {
    font-size: var(--pf-t-display);
    line-height: var(--pf-lh-display);
    letter-spacing: -.022em;
}

.fi-panel-operator .fi-page:has(.fi-page-content > .fi-ta:first-child) .fi-page-header-main-ctn {
    row-gap: var(--pf-s6);
}

.fi-panel-operator .fi-page-content:has(> .fi-ta:first-child) .fi-ta-ctn {
    border-radius: var(--pf-r-lg);
}

.fi-panel-operator .fi-ta-ctn {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-lg);
    background-color: var(--pf-surface);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    overflow: hidden;
}

.fi-panel-operator .fi-ta-header-ctn {
    padding: 0;
}

.fi-panel-operator .fi-ta-ctn .fi-ta-header-toolbar {
    padding: 10px var(--pf-s4);
    gap: var(--pf-s3);
    border-bottom: 1px solid var(--pf-border);
}

.fi-panel-operator .fi-ta-search-field .fi-input-wrp {
    min-width: 16rem;
    min-height: 34px;
    border-radius: var(--pf-r-md);
    --tw-ring-color: var(--pf-border);
}

.fi-panel-operator .fi-ta-search-field .fi-input-wrp:focus-within { --tw-ring-color: var(--pf-accent); }

.fi-panel-operator .fi-ta-search-field .fi-input { font-size: 13.5px; }

.fi-panel-operator .fi-ta-table > thead > tr > th:first-child,
.fi-panel-operator .fi-ta-table > thead > tr > th:last-child { border-radius: 0; }

.fi-panel-operator .fi-ta-header-cell {
    padding-block: 9px;
    background-color: var(--pf-surface);
    border-bottom: 1px solid var(--pf-border);
    font-size: 12px;
    line-height: 16px;
    font-weight: 550;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--pf-text-3);
}

.fi-panel-operator .fi-ta-header-cell-sort-btn { color: inherit; font-weight: inherit; }

.fi-panel-operator .fi-ta-table > thead > tr {
    background-color: var(--pf-surface);
}

.fi-panel-operator .fi-ta-row {
    border-color: var(--pf-border-soft);
    transition: background-color var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-ta-table > tbody > tr > td {
    border-bottom: 1px solid var(--pf-border-soft);
}

.fi-panel-operator .fi-ta-table > tbody > tr:last-child > td { border-bottom: 0; }

@media (hover: hover) {
    .fi-panel-operator .fi-ta-row:hover { background-color: var(--pf-hover); }
}

.fi-panel-operator .fi-ta-row .fi-ta-text,
.fi-panel-operator .fi-ta-row .fi-ta-actions {
    padding-block: 9px;
}

.fi-panel-operator .fi-ta-text-item,
.fi-panel-operator .fi-ta-text {
    font-size: var(--pf-t-body);
    color: var(--pf-text);
}

/* Die erste Spalte trägt Name UND Kennung — der Name führt, die Kennung folgt leise. */
.fi-panel-operator .fi-ta-cell-name .fi-ta-text-item {
    font-weight: 550;
}

.fi-panel-operator .fi-ta-text-description {
    margin-top: 1px;
    font-size: var(--pf-t-caption);
    line-height: var(--pf-lh-caption);
    color: var(--pf-text-3);
}

.fi-panel-operator .fi-ta-cell-name .fi-ta-text-description {
    font-family: var(--pf-mono);
    font-size: 12px;
    letter-spacing: -.01em;
}

.fi-panel-operator .pf-zelle-leise .fi-ta-text-item,
.fi-panel-operator .pf-zelle-zeit .fi-ta-text-item {
    color: var(--pf-text-2);
    font-variant-numeric: tabular-nums;
}

.fi-panel-operator .pf-zelle-mono .fi-ta-text-item {
    font-family: var(--pf-mono);
    font-size: 12.5px;
    color: var(--pf-text-2);
}

.fi-panel-operator .fi-ta-row.fi-clickable,
.fi-panel-operator .fi-ta-row:has(> td > a.fi-ta-record-url) { cursor: pointer; }

/* Die Handlungen einer Zeile: rechtsbündig, eng. */
.fi-panel-operator .fi-ta-actions {
    gap: var(--pf-s1);
    justify-content: flex-end;
    align-items: center;
}

/*
 * Eine Handlung als Verweis («Hier arbeiten» in der Flotte): Symbol und Wort auf EINER Linie.
 * Filament setzte das Wort einen halben Zeilenabstand über das Symbol — auch vor dieser Datei.
 */
.fi-panel-operator .fi-ta-actions .fi-link,
.fi-panel-operator .fi-header-actions-ctn .fi-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding-inline: 6px;
    border-radius: var(--pf-r-md);
    white-space: nowrap;
}

.fi-panel-operator .fi-ta-actions .fi-link:hover { background-color: var(--pf-accent-soft); }

.fi-panel-operator .fi-ta-actions .fi-link .fi-icon {
    width: 16px;
    height: 16px;
}

/* Zellen der Restaurantliste (TenantResource) */
.pf-mono {
    font-family: var(--pf-mono);
    font-size: 12.5px;
    letter-spacing: -.01em;
    color: var(--pf-text-2);
}

.pf-mehr {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pf-subtle);
    font-size: 11.5px;
    line-height: 18px;
    font-weight: 550;
    color: var(--pf-text-3);
}

.pf-leer { color: var(--pf-muted); }

.pf-merkmal {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pf-merkmal-zahl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 550;
    color: var(--pf-text);
    font-variant-numeric: tabular-nums;
}

/* Der Füllstand als 40 px kurze Linie — die Zahl ist die Auskunft, die Linie der Blick. */
.pf-merkmal-balken {
    position: relative;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--pf-subtle);
    overflow: hidden;
}

.pf-merkmal-balken::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--pf-anteil, 0%);
    border-radius: inherit;
    background: var(--pf-ok);
}

.pf-leise {
    font-size: var(--pf-t-caption);
    line-height: var(--pf-lh-caption);
    color: var(--pf-text-3);
}

.pf-eine-zeile {
    display: block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Fusszeile: Anzahl links, Seiten rechts — klein. */
.fi-panel-operator .fi-pagination {
    padding: 10px var(--pf-s4);
    border-top: 1px solid var(--pf-border);
    font-size: 13px;
}

.fi-panel-operator .fi-pagination-overview { color: var(--pf-text-3); font-size: 13px; }

.fi-panel-operator .fi-pagination-records-per-page-select .fi-input-wrp { min-height: 30px; }

/* Leerer Zustand: ein Satz und, wo es einen gibt, ein Weg. Keine Riesenkarte. */
.fi-panel-operator .fi-ta-empty-state,
.fi-panel-operator .fi-empty-state { padding-block: var(--pf-s12); }

.fi-panel-operator .fi-ta-empty-state-icon-ctn,
.fi-panel-operator .fi-empty-state-icon-ctn {
    width: 40px;
    height: 40px;
    border-radius: var(--pf-r-md);
    background-color: var(--pf-subtle);
    color: var(--pf-text-3);
}

.fi-panel-operator .fi-ta-empty-state-heading,
.fi-panel-operator .fi-empty-state-heading {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

.fi-panel-operator .fi-ta-empty-state-description,
.fi-panel-operator .fi-empty-state-description {
    max-width: 46ch;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--pf-text-3);
}

/* Streifen an der linken Kante (Flotte, Matrix) — dieselben Bedeutungen, die warme Palette. */
.fi-panel-operator .fi-ta-row.bm-kante--risk > td:first-child { box-shadow: inset 3px 0 0 var(--pf-danger); }
.fi-panel-operator .fi-ta-row.bm-kante--todo > td:first-child { box-shadow: inset 3px 0 0 var(--pf-warn); }
.fi-panel-operator .fi-ta-row.bm-kante--unbekannt > td:first-child { box-shadow: inset 3px 0 0 var(--pf-control); }

/* Filter-Dropdown und Filteranzeige */
.fi-panel-operator .fi-ta-filters-dropdown .fi-icon-btn-badge-ctn .fi-badge {
    min-width: 16px;
    min-height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--pf-subtle);
    color: var(--pf-text-3);
    font-size: 10.5px;
    line-height: 16px;
    box-shadow: 0 0 0 2px var(--pf-surface);
}

.fi-panel-operator .fi-ta-filters-dropdown .fi-dropdown-panel,
.fi-panel-operator .fi-dropdown-panel {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-lg);
    background-color: var(--pf-elevated);
    box-shadow: var(--pf-shadow-pop);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-panel-operator .fi-dropdown-list { padding: 4px; }

.fi-panel-operator .fi-dropdown-list-item {
    min-height: 34px;
    padding: 6px 10px;
    gap: 10px;
    border-radius: var(--pf-r-sm);
    font-size: 13.5px;
    color: var(--pf-text);
    transition: background-color var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-dropdown-list-item:hover,
.fi-panel-operator .fi-dropdown-list-item:focus-visible {
    background-color: var(--pf-subtle);
}

.fi-panel-operator .fi-dropdown-list-item .fi-icon {
    width: 16px;
    height: 16px;
    color: var(--pf-text-3);
}

.fi-panel-operator .fi-dropdown-list + .fi-dropdown-list {
    border-top: 1px solid var(--pf-border);
}

.fi-panel-operator .fi-dropdown-list-item.fi-color-danger { color: var(--pf-danger-fg); }
.fi-panel-operator .fi-dropdown-list-item.fi-color-danger .fi-icon { color: var(--pf-danger); }

.fi-panel-operator .fi-ta-filter-indicators {
    padding: 8px var(--pf-s4);
    border-bottom: 1px solid var(--pf-border);
    background: var(--pf-subtle);
}

/* ═══ 10 · Etiketten und Zustände ═════════════════════════════════════════════════════════ */

.fi-panel-operator .fi-badge {
    min-height: 22px;
    padding: 1px 8px;
    gap: 5px;
    border-radius: var(--pf-r-sm);
    font-size: 12px;
    line-height: 18px;
    font-weight: 550;
    letter-spacing: 0;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-panel-operator .fi-badge .fi-icon {
    width: 14px;
    height: 14px;
}

.fi-panel-operator .fi-badge.fi-color-success { background: var(--pf-ok-bg); color: var(--pf-ok-fg); }
.fi-panel-operator .fi-badge.fi-color-warning { background: var(--pf-warn-bg); color: var(--pf-warn-fg); }
.fi-panel-operator .fi-badge.fi-color-danger  { background: var(--pf-danger-bg); color: var(--pf-danger-fg); }
.fi-panel-operator .fi-badge.fi-color-info    { background: var(--pf-info-bg); color: var(--pf-info-fg); }
.fi-panel-operator .fi-badge.fi-color-primary { background: var(--pf-accent-soft); color: var(--pf-accent-text); }
.fi-panel-operator .fi-badge.fi-color-gray    { background: var(--pf-subtle); color: var(--pf-text-2); }

.fi-panel-operator .fi-badge.fi-color-success .fi-icon { color: var(--pf-ok); }
.fi-panel-operator .fi-badge.fi-color-warning .fi-icon { color: var(--pf-warn); }
.fi-panel-operator .fi-badge.fi-color-danger .fi-icon  { color: var(--pf-danger); }
.fi-panel-operator .fi-badge.fi-color-info .fi-icon    { color: var(--pf-info); }
.fi-panel-operator .fi-badge.fi-color-gray .fi-icon    { color: var(--pf-text-3); }

/* Etiketten neben langem Text (Freigabe) schrumpfen nicht zu «Eng…». */
.fi-panel-operator .bm-liste__punkt > .fi-badge { flex: none; }

/* Der Status als Punkt und Wort — im Kopf der Seite eines Hauses. */
.pf-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--pf-text);
}

.pf-status__punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pf-muted);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-muted) 18%, transparent);
}

.pf-status--success .pf-status__punkt { background: var(--pf-ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-ok) 18%, transparent); }
.pf-status--warning .pf-status__punkt { background: var(--pf-warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-warn) 20%, transparent); }
.pf-status--danger .pf-status__punkt  { background: var(--pf-danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-danger) 18%, transparent); }
.pf-status--info .pf-status__punkt    { background: var(--pf-info); box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-info) 18%, transparent); }

.pf-kopfzeile {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--pf-s4);
}

.pf-kopfzeile > * + *::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-inline-end: var(--pf-s4);
    vertical-align: -1px;
    background: var(--pf-border);
}

.pf-kopf-link {
    color: var(--pf-text-2);
    text-decoration: none;
}

.pf-kopf-link:hover { color: var(--pf-accent-strong); text-decoration: underline; text-underline-offset: 3px; }

.pf-marke-demo {
    padding: 0 7px;
    border-radius: var(--pf-r-sm);
    background: var(--pf-info-bg);
    color: var(--pf-info-fg);
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

.pf-etikett {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border-radius: var(--pf-r-sm);
    background: var(--pf-subtle);
    color: var(--pf-text-2);
    font-size: 11.5px;
    line-height: 20px;
    font-weight: 550;
}

.pf-etikett--akzent {
    background: var(--pf-accent-soft);
    color: var(--pf-accent-text);
}

/* ═══ 11 · Formulare ══════════════════════════════════════════════════════════════════════ */

.fi-panel-operator .fi-input-wrp {
    min-height: 38px;
    border-radius: var(--pf-r-md);
    background-color: var(--pf-surface);
    transition: box-shadow var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-input-wrp:not(.fi-disabled):focus-within {
    --tw-ring-color: var(--pf-accent);
    box-shadow: 0 0 0 1px var(--pf-accent), 0 0 0 4px color-mix(in oklab, var(--pf-accent) 16%, transparent);
}

.fi-panel-operator .fi-input,
.fi-panel-operator .fi-select-input {
    font-size: var(--pf-t-body);
    color: var(--pf-text);
}

.fi-panel-operator .fi-input::placeholder { color: var(--gray-500); }

.fi-panel-operator .fi-fo-field-label {
    font-size: 13.5px;
    font-weight: 550;
    color: var(--pf-text);
}

.fi-panel-operator .fi-fo-field-label-required-mark { color: var(--pf-accent); }

.fi-panel-operator .fi-fo-field-wrp-helper-text,
.fi-panel-operator .fi-fo-field-helper-text,
.fi-panel-operator .fi-sc-text {
    font-size: var(--pf-t-caption);
    line-height: var(--pf-lh-caption);
    color: var(--pf-text-3);
}

/* Fehler: im Satz, am Feld, ohne roten Kasten. */
.fi-panel-operator .fi-fo-field-wrp-error-message,
.fi-panel-operator .fi-fo-field-error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--pf-t-caption);
    font-weight: 500;
    color: var(--pf-danger-fg);
}

.fi-panel-operator .fi-fo-field-wrp-error-message::before,
.fi-panel-operator .fi-fo-field-error-message::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pf-danger);
}

.fi-panel-operator .fi-input-wrp.fi-invalid,
.fi-panel-operator .fi-invalid .fi-input-wrp { --tw-ring-color: var(--pf-danger); }

/* Umschalter: an = Terrakotta. */
.fi-panel-operator .fi-toggle.fi-toggle-on,
.fi-panel-operator .fi-fo-toggle .fi-toggle.fi-toggle-on,
.fi-panel-operator button[role='switch'].fi-toggle[aria-checked='true'] {
    background-color: var(--pf-accent-strong);
}

.fi-panel-operator .fi-checkbox-input:checked,
.fi-panel-operator .fi-radio-input:checked {
    background-color: var(--pf-accent-strong);
    border-color: var(--pf-accent-strong);
}

/* ═══ 12 · Der Assistent «Neues Restaurant» ══════════════════════════════════════════════ */

/*
 * ⛔ DREI GROSSE KÄSTEN MIT PFEILEN UND «01 02 03» — das Bild eines Formulars aus der Vorlage.
 *    Jetzt ein schmaler Fortschritt: Kreis mit Zahl, Wort, eine Linie zum nächsten Schritt;
 *    der aktuelle in Terrakotta, erledigte mit Haken, kommende gedämpft. Das Formular darunter
 *    ist so breit wie ein Satz, nicht wie der Bildschirm.
 */
.fi-panel-operator .fi-page:has(.fi-sc-wizard) .fi-page-main,
.fi-panel-operator .fi-page:has(.fi-sc-wizard) .fi-page-header-main-ctn {
    max-width: 52rem;
}

.fi-panel-operator .fi-sc-wizard {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-lg);
    background-color: var(--pf-surface);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    overflow: hidden;
}

.fi-panel-operator .fi-sc-wizard-header {
    display: flex;
    gap: 0;
    padding: var(--pf-s4) var(--pf-s5);
    border-bottom: 1px solid var(--pf-border);
    background: var(--pf-surface);
    --tw-divide-x-reverse: 0;
}

.fi-panel-operator .fi-sc-wizard-header > * { border: 0; }

.fi-panel-operator .fi-sc-wizard-header-step {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.fi-panel-operator .fi-sc-wizard-header-step-separator { display: none; }

.fi-panel-operator .fi-sc-wizard-header-step-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 0;
    background: none;
    text-align: start;
}

/* Die Linie zum nächsten Schritt — zwischen Wort und nächstem Kreis. */
.fi-panel-operator .fi-sc-wizard-header-step:not(:last-child) .fi-sc-wizard-header-step-btn::after {
    content: '';
    flex: 1 1 auto;
    min-width: 16px;
    height: 1px;
    margin-inline: var(--pf-s3);
    background: var(--pf-border);
}

.fi-panel-operator .fi-sc-wizard-header-step.fi-completed:not(:last-child) .fi-sc-wizard-header-step-btn::after {
    background: color-mix(in oklab, var(--pf-accent) 45%, var(--pf-border));
}

.fi-panel-operator .fi-sc-wizard-header-step-icon-ctn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--pf-border);
    border-radius: 50%;
    background: var(--pf-surface);
    color: var(--pf-text-3);
    transition: background-color var(--pf-mid) var(--pf-ease), border-color var(--pf-mid) var(--pf-ease),
                color var(--pf-mid) var(--pf-ease);
}

.fi-panel-operator .fi-sc-wizard-header-step-number {
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.fi-panel-operator .fi-sc-wizard-header-step-icon-ctn .fi-icon {
    width: 14px;
    height: 14px;
    color: inherit;
}

.fi-panel-operator .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--pf-accent-strong);
    background: var(--pf-accent-strong);
    color: var(--pf-on-accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--pf-accent) 15%, transparent);
}

.fi-panel-operator .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
    border-color: color-mix(in oklab, var(--pf-accent) 40%, var(--pf-border));
    background: var(--pf-accent-soft);
    color: var(--pf-accent-text);
}

.fi-panel-operator .fi-sc-wizard-header-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fi-panel-operator .fi-sc-wizard-header-step-label {
    font-size: 13.5px;
    line-height: 18px;
    font-weight: 550;
    color: var(--pf-text-3);
    white-space: nowrap;
}

.fi-panel-operator .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label,
.fi-panel-operator .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-label {
    color: var(--pf-text);
}

.fi-panel-operator .fi-sc-wizard-header-step-description {
    font-size: 12px;
    line-height: 16px;
    color: var(--pf-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-panel-operator .fi-sc-wizard-step {
    padding: var(--pf-s6) var(--pf-s6) var(--pf-s2);
}

.fi-panel-operator .fi-sc-wizard-step .fi-sc,
.fi-panel-operator .fi-sc-wizard-step > .fi-sc-component {
    row-gap: var(--pf-s5);
}

.fi-panel-operator .fi-sc-wizard-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--pf-s3);
    padding: var(--pf-s4) var(--pf-s6) var(--pf-s5);
    border-top: 1px solid var(--pf-border-soft);
    margin-top: var(--pf-s4);
}

/* Die Merkmale im dritten Schritt: zwei Spalten, jede mit Satz — kein Stapel aus elf Zeilen. */
@media (min-width: 48rem) {
    .fi-panel-operator .fi-sc-wizard-step:has(.fi-fo-toggle) > .fi-sc {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--pf-s4) var(--pf-s6);
    }

    .fi-panel-operator .fi-sc-wizard-step:has(.fi-fo-toggle) > .fi-sc > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 47.99rem) {
    .fi-panel-operator .fi-sc-wizard-header-step-description { display: none; }
    .fi-panel-operator .fi-sc-wizard-header-step:not(.fi-active) .fi-sc-wizard-header-step-text { display: none; }
    .fi-panel-operator .fi-sc-wizard-header-step { flex: 0 0 auto; }
    .fi-panel-operator .fi-sc-wizard-header-step.fi-active { flex: 1 1 auto; }
    .fi-panel-operator .fi-sc-wizard-step { padding: var(--pf-s5) var(--pf-s4) 0; }
    .fi-panel-operator .fi-sc-wizard-footer { padding: var(--pf-s4); }
}

/* Der Einladungslink nach dem Anlegen — das eine Ding, das man JETZT kopiert. */
.fi-panel-operator .bm-link {
    padding: var(--pf-s3) var(--pf-s4);
    border: 1px dashed color-mix(in oklab, var(--pf-accent) 50%, var(--pf-border));
    border-radius: var(--pf-r-md);
    background: var(--pf-accent-soft);
}

.fi-panel-operator .bm-link__wert,
.fi-panel-operator .bm-code {
    font-family: var(--pf-mono);
    font-size: 12.5px;
    color: var(--pf-text);
    user-select: all;
    overflow-wrap: anywhere;
}

/* ═══ 13 · Die Übersicht ══════════════════════════════════════════════════════════════════ */

/*
 * DER ZUSTAND DER PLATTFORM ALS EINE LEISTE — nicht als vier gleiche Kacheln.
 *
 * Eine Fläche, vier Felder mit Haarlinien dazwischen. Das erste (die Häuser, live) ist breiter
 * und trägt die grössere Zahl und die Verlaufslinie; die anderen drei sind seine Fussnoten. Die
 * Symbole der Kacheln sind weg: das Wort über der Zahl sagt es, das Zeichen war Schmuck.
 */
.fi-panel-operator .fi-wi-stats-overview .fi-section-not-contained > .fi-section-header {
    padding: 0 0 var(--pf-s3);
}

.fi-panel-operator .fi-wi-stats-overview .fi-section-header-heading {
    font-size: var(--pf-t-label);
    line-height: var(--pf-lh-label);
    font-weight: 600;
    color: var(--pf-text-3);
}

.fi-panel-operator .fi-wi-stats-overview .fi-section-content-ctn,
.fi-panel-operator .fi-wi-stats-overview .fi-section-content {
    padding: 0;
}

.fi-panel-operator .fi-wi-stats-overview .fi-section-content.fi-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1fr;
    gap: 0;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-lg);
    background: var(--pf-surface);
    overflow: hidden;
}

/* Gemessen: Filament legt jede Kennzahl in `.fi-grid-col > .fi-sc-component > a.stat`. */
.fi-panel-operator .fi-wi-stats-overview .fi-section-content.fi-grid > .fi-grid-col {
    grid-column: auto;
    min-width: 0;
}

.fi-panel-operator .fi-wi-stats-overview .fi-grid-col > .fi-sc-component { height: 100%; }

.fi-panel-operator .fi-wi-stats-overview-stat {
    display: flex;
    flex-direction: column;
    min-height: 132px;
    height: 100%;
    margin: 0;
    padding: var(--pf-s5) var(--pf-s5) var(--pf-s4);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    transition: background-color var(--pf-fast) var(--pf-ease);
}

.fi-panel-operator .fi-wi-stats-overview .fi-grid-col + .fi-grid-col .fi-wi-stats-overview-stat {
    border-inline-start: 1px solid var(--pf-border);
}

@media (hover: hover) {
    .fi-panel-operator a.fi-wi-stats-overview-stat:hover { background-color: var(--pf-hover); box-shadow: none; }
}

.fi-panel-operator .fi-wi-stats-overview-stat-label-ctn {
    min-height: 0;
    justify-content: flex-start;
}

.fi-panel-operator .fi-wi-stats-overview-stat-label-ctn > svg { display: none; }

.fi-panel-operator .fi-wi-stats-overview-stat-label {
    font-size: 12.5px;
    line-height: 16px;
    font-weight: 550;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pf-text-2);
}

.fi-panel-operator .fi-wi-stats-overview-stat-value {
    margin-top: var(--pf-s2);
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--pf-text);
    font-variant-numeric: tabular-nums;
}

/* Das erste Feld: die eine Zahl, die das Geschäft beschreibt. */
.fi-panel-operator .fi-wi-stats-overview .fi-grid-col:first-child .fi-wi-stats-overview-stat-value {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -.035em;
}

.fi-panel-operator .fi-wi-stats-overview-stat-description {
    margin: var(--pf-s2) 0 0;
    padding: 0;
    border: 0;
    gap: 6px;
    font-size: var(--pf-t-caption);
    line-height: var(--pf-lh-caption);
    color: var(--pf-text-3);
}

.fi-panel-operator .fi-wi-stats-overview-stat-description > svg {
    width: 14px;
    height: 14px;
    order: -1;
}

.fi-panel-operator .fi-wi-stats-overview-stat.bm-stat--todo .fi-wi-stats-overview-stat-value { color: var(--pf-warn-fg); }
.fi-panel-operator .fi-wi-stats-overview-stat.bm-stat--todo .fi-wi-stats-overview-stat-description > svg { color: var(--pf-warn); }

/*
 * Die Verlaufslinie läuft am Fuss über die volle Breite des Feldes. Zehn Monate lang war die
 * Plattform leer, also liegt sie meist flach am Boden und steigt am rechten Rand — die Daten,
 * nicht ein Zeichenfehler.
 */
.fi-panel-operator .fi-wi-stats-overview-stat > div:has(> .fi-wi-stats-overview-stat-chart) {
    margin: auto calc(-1 * var(--pf-s5)) calc(-1 * var(--pf-s4));
    padding-top: var(--pf-s3);
    height: 44px;
    border-radius: 0;
    background: transparent;
}

.fi-panel-operator .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-chart { height: 44px; }
.fi-panel-operator .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-chart > canvas { height: 44px !important; }
.fi-panel-operator .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-chart-bg-color { color: color-mix(in oklab, var(--pf-accent) 10%, transparent); }
.fi-panel-operator .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-chart-border-color { color: var(--pf-accent); }

@media (max-width: 79.99rem) {
    /* Tablett: die Hauptzahl über die volle Breite, die drei Fussnoten darunter in einer Reihe. */
    .fi-panel-operator .fi-wi-stats-overview .fi-section-content.fi-grid { grid-template-columns: repeat(3, 1fr); }

    /* Dieselbe Spezifität wie die allgemeine Zellregel oben, sonst gewinnt deren `auto`. */
    .fi-panel-operator .fi-wi-stats-overview .fi-section-content.fi-grid > .fi-grid-col:first-child { grid-column: 1 / -1; }

    .fi-panel-operator .fi-wi-stats-overview .fi-grid-col + .fi-grid-col .fi-wi-stats-overview-stat {
        border-top: 1px solid var(--pf-border);
    }

    .fi-panel-operator .fi-wi-stats-overview .fi-grid-col:nth-child(2) .fi-wi-stats-overview-stat { border-inline-start: 0; }
}

@media (max-width: 39.99rem) {
    .fi-panel-operator .fi-wi-stats-overview .fi-section-content.fi-grid { grid-template-columns: 1fr; }

    .fi-panel-operator .fi-wi-stats-overview .fi-grid-col + .fi-grid-col .fi-wi-stats-overview-stat { border-inline-start: 0; }
}

/* ── Die Wachstumskurve ─────────────────────────────────────────────────────────────── */

.fi-panel-operator .fi-wi-chart .fi-section-content {
    padding: var(--pf-s2) var(--pf-s5) var(--pf-s4);
}

.fi-panel-operator .fi-wi-chart .fi-section-content > div:has(> canvas),
.fi-panel-operator .fi-wi-chart .fi-section-content > canvas,
.fi-panel-operator .fi-wi-chart .fi-wi-chart-frame {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* Chart.js liest Raster- und Schriftfarbe aus diesen zwei Fühlern (Filament): warm statt grau. */
.fi-panel-operator .fi-wi-chart .fi-wi-chart-grid-color { color: var(--pf-border-soft); }
.fi-panel-operator .fi-wi-chart .fi-wi-chart-text-color { color: var(--pf-text-3); }
.fi-panel-operator .fi-wi-chart .fi-wi-chart-border-color { color: var(--pf-accent); }
.fi-panel-operator .fi-wi-chart .fi-wi-chart-bg-color { color: color-mix(in oklab, var(--pf-accent) 12%, transparent); }

.fi-panel-operator .fi-wi-chart-filter.fi-input-wrp {
    min-height: 30px;
    width: auto;
}

.fi-panel-operator .fi-wi-chart-filter .fi-select-input {
    padding-block: 4px;
    font-size: 13px;
}

/* ── Letzte Aktivität: eine Zeitleiste ─────────────────────────────────────────────── */

.pf-zeitleiste {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-zeitleiste__eintrag {
    position: relative;
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    gap: var(--pf-s4);
    padding: 10px 0;
}

.pf-zeitleiste__eintrag + .pf-zeitleiste__eintrag { border-top: 1px solid var(--pf-border-soft); }

/* Die Achse: ein Punkt vor jedem Eintrag, auf einer feinen Linie. */
.pf-zeitleiste__inhalt {
    position: relative;
    min-width: 0;
    padding-inline-start: var(--pf-s5);
}

.pf-zeitleiste__inhalt::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pf-surface);
    box-shadow: inset 0 0 0 1.5px var(--pf-muted);
}

.pf-zeitleiste__eintrag:first-child .pf-zeitleiste__inhalt::before {
    box-shadow: inset 0 0 0 4px var(--pf-accent);
}

.pf-zeitleiste__zeit {
    display: flex;
    flex-direction: column;
    font-size: var(--pf-t-caption);
    line-height: 16px;
    color: var(--pf-text-3);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.pf-zeitleiste__zeit > span {
    font-size: 13px;
    font-weight: 550;
    color: var(--pf-text);
}

.pf-zeitleiste__art {
    margin: 0;
    font-size: var(--pf-t-body);
    line-height: var(--pf-lh-body);
    font-weight: 550;
    color: var(--pf-text);
}

.pf-zeitleiste__satz {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 19px;
    color: var(--pf-text-2);
    overflow-wrap: anywhere;
}

.pf-zeitleiste__haus { color: var(--pf-text); font-weight: 500; }

.pf-zeitleiste__wer {
    margin: 0;
    font-size: var(--pf-t-caption);
    color: var(--pf-text-3);
}

.pf-zeitleiste__satz .pf-zeitleiste__wer { display: inline; }

/* ═══ 14 · Die Seite eines Hauses ═════════════════════════════════════════════════════════ */

.pf-haus {
    display: flex;
    flex-direction: column;
    gap: var(--pf-s5);
}

.pf-reiter {
    display: flex;
    gap: var(--pf-s1);
    border-bottom: 1px solid var(--pf-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.pf-reiter__knopf {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 var(--pf-s3);
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--pf-t-body);
    font-weight: 550;
    color: var(--pf-text-3);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--pf-fast) var(--pf-ease);
}

.pf-reiter__knopf::after {
    content: '';
    position: absolute;
    inset: auto var(--pf-s3) -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--pf-accent);
    opacity: 0;
    transform: scaleX(.6);
    transition: opacity var(--pf-mid) var(--pf-ease), transform var(--pf-mid) var(--pf-ease);
}

.pf-reiter__knopf:hover { color: var(--pf-text); }

.pf-reiter__knopf[aria-selected='true'] { color: var(--pf-text); }

.pf-reiter__knopf[aria-selected='true']::after {
    opacity: 1;
    transform: none;
}

.pf-reiter__zahl {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pf-subtle);
    font-size: 11.5px;
    line-height: 18px;
    font-weight: 550;
    color: var(--pf-text-3);
    font-variant-numeric: tabular-nums;
}

.pf-flaeche {
    display: flex;
    flex-direction: column;
    gap: var(--pf-s5);
    animation: pf-auftauchen var(--pf-mid) var(--pf-ease);
}

@keyframes pf-auftauchen {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

.pf-raster {
    display: grid;
    gap: var(--pf-s5);
}

@media (min-width: 64rem) {
    .pf-raster--zwei { grid-template-columns: 1fr 1fr; }
    .pf-raster--drei { grid-template-columns: repeat(3, 1fr); }
}

.pf-block {
    min-width: 0;
    padding: var(--pf-s5);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-lg);
    background: var(--pf-surface);
}

.pf-block__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pf-s2) var(--pf-s4);
    margin-bottom: var(--pf-s3);
}

.pf-block__kopf--frei {
    margin: 0;
    padding: 0 2px;
}

.pf-block__kopf .pf-block__titel { margin-bottom: 0; }

.pf-block__titel {
    margin: 0 0 var(--pf-s3);
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--pf-text);
}

.pf-block__etikett {
    margin: 0 0 var(--pf-s2);
    font-size: var(--pf-t-label);
    line-height: var(--pf-lh-label);
    font-weight: 600;
    color: var(--pf-text-3);
}

.pf-daten {
    margin: 0;
}

.pf-daten__zeile {
    display: grid;
    grid-template-columns: minmax(9rem, 38%) 1fr;
    gap: var(--pf-s4);
    align-items: baseline;
    padding: 9px 0;
    border-top: 1px solid var(--pf-border-soft);
}

.pf-daten__zeile:first-child { border-top: 0; padding-top: 0; }

.pf-daten dt {
    font-size: 13px;
    color: var(--pf-text-3);
}

.pf-daten dd {
    margin: 0;
    min-width: 0;
    font-size: var(--pf-t-body);
    color: var(--pf-text);
    overflow-wrap: anywhere;
}

.pf-zahl { font-variant-numeric: tabular-nums; font-weight: 550; }

.pf-hinweis {
    margin: var(--pf-s3) 0 0;
    padding: 10px var(--pf-s3);
    border-radius: var(--pf-r-md);
    background: var(--pf-subtle);
    font-size: 13px;
    line-height: 19px;
    color: var(--pf-text-2);
}

.pf-satz {
    margin: 0;
    font-size: var(--pf-t-body);
    line-height: 21px;
    color: var(--pf-text);
}

.pf-mono-zeit {
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.pf-ok-zeile {
    display: flex;
    align-items: center;
    gap: var(--pf-s2);
    margin: 0;
    font-size: var(--pf-t-body);
    color: var(--pf-ok-fg);
}

.pf-ok-zeile__zeichen {
    width: 18px;
    height: 18px;
    color: var(--pf-ok);
}

.pf-punkte {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-punkte__eintrag {
    position: relative;
    padding-inline-start: var(--pf-s4);
    font-size: 13.5px;
    line-height: 20px;
    color: var(--pf-text);
}

.pf-punkte__eintrag::before {
    content: '';
    position: absolute;
    inset-inline-start: 2px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pf-warn);
}

.pf-marken {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-marken__eintrag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--pf-border);
    border-radius: 999px;
    font-size: 13px;
    line-height: 18px;
    color: var(--pf-text);
}

.pf-marken__punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pf-ok);
}

.pf-marken__eintrag.is-aus {
    border-style: dashed;
    color: var(--pf-text-3);
}

.pf-marken__eintrag.is-aus .pf-marken__punkt {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--pf-muted);
}

.pf-zeilen {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-zeilen__eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-s2) var(--pf-s4);
    padding: 11px 0;
    border-top: 1px solid var(--pf-border-soft);
}

.pf-zeilen__eintrag:first-child { border-top: 0; }

.pf-zeilen__haupt {
    font-size: 13.5px;
    color: var(--pf-text);
}

.pf-zeilen__marken {
    display: flex;
    gap: 6px;
}

.fi-panel-operator .fi-resource-view-record-page .fi-page-main {
    max-width: 76rem;
}

/* ═══ 15 · Merkmale: zwei Ansichten ═══════════════════════════════════════════════════════ */

.pf-segment {
    display: inline-flex;
    align-self: flex-start;
    justify-self: start;
    width: fit-content;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    background: var(--pf-subtle);
}

.pf-segment__knopf {
    min-height: 30px;
    padding: 0 var(--pf-s3);
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    color: var(--pf-text-3);
    cursor: pointer;
    transition: background-color var(--pf-fast) var(--pf-ease), color var(--pf-fast) var(--pf-ease),
                box-shadow var(--pf-fast) var(--pf-ease);
}

.pf-segment__knopf:hover { color: var(--pf-text); }

.pf-segment__knopf.is-aktiv {
    background: var(--pf-surface);
    color: var(--pf-text);
    box-shadow: 0 0 0 1px var(--pf-border), 0 1px 2px rgba(32, 33, 31, .06);
}

.pf-zweispaltig {
    display: grid;
    gap: var(--pf-s5);
    align-items: start;
}

@media (min-width: 64rem) {
    .pf-zweispaltig { grid-template-columns: 17rem minmax(0, 1fr); }
}

.pf-hauswahl {
    display: flex;
    flex-direction: column;
    gap: var(--pf-s2);
}

@media (min-width: 64rem) {
    .pf-hauswahl {
        position: sticky;
        top: calc(var(--pf-topbar-h) + var(--pf-s4));
        max-height: calc(100dvh - var(--pf-topbar-h) - var(--pf-s8));
        overflow: auto;
        padding: var(--pf-s2);
        border: 1px solid var(--pf-border);
        border-radius: var(--pf-r-lg);
        background: var(--pf-surface);
    }

    .pf-hauswahl__feld { display: none; }
}

@media (max-width: 63.99rem) {
    .pf-hauswahl__gruppe { display: none; }
}

.pf-auswahl {
    width: 100%;
    min-height: 40px;
    padding: 0 var(--pf-s3);
    border: 1px solid var(--pf-control);
    border-radius: var(--pf-r-md);
    background: var(--pf-surface);
    color: var(--pf-text);
    font: inherit;
    font-size: var(--pf-t-body);
}

.pf-hauswahl__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 4px;
    font-size: var(--pf-t-label);
    line-height: var(--pf-lh-label);
    font-weight: 600;
    color: var(--pf-text-3);
    cursor: pointer;
    list-style: none;
}

.pf-hauswahl__kopf::-webkit-details-marker { display: none; }

.pf-hauswahl__zahl {
    letter-spacing: 0;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

.pf-hauswahl__liste {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 0 var(--pf-s2);
    padding: 0;
    list-style: none;
}

.pf-hauswahl__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-s2);
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--pf-r-md);
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--pf-fast) var(--pf-ease);
}

.pf-hauswahl__eintrag:hover { background: var(--pf-subtle); }

.pf-hauswahl__eintrag.is-aktiv { background: var(--pf-accent-soft); }

.pf-hauswahl__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13.5px;
    line-height: 18px;
    font-weight: 550;
    color: var(--pf-text);
}

.pf-hauswahl__id {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--pf-mono);
    font-size: 11.5px;
    font-weight: 400;
    color: var(--pf-text-3);
}

.pf-hauswahl__warnung {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pf-warn);
}

.pf-hausmerkmale {
    display: flex;
    flex-direction: column;
    gap: var(--pf-s4);
    min-width: 0;
}

.pf-hausmerkmale__kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pf-s4);
    padding: 0 2px;
}

.pf-hausmerkmale__name {
    margin: 0;
    font-size: var(--pf-t-heading);
    line-height: var(--pf-lh-heading);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pf-text);
}

.pf-block--regal { padding: var(--pf-s4) var(--pf-s5) var(--pf-s2); }

.pf-merkmalliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-merkmalliste__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-s5);
    padding: var(--pf-s3) 0;
    border-top: 1px solid var(--pf-border-soft);
}

.pf-merkmalliste__eintrag:first-child { border-top: 0; }

.pf-merkmalliste__text { min-width: 0; }

.pf-merkmalliste__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--pf-s2);
    margin: 0;
    font-size: var(--pf-t-body);
    line-height: var(--pf-lh-body);
    font-weight: 550;
    color: var(--pf-text);
}

.pf-merkmalliste__satz {
    margin: 2px 0 0;
    max-width: 62ch;
    font-size: 13px;
    line-height: 19px;
    color: var(--pf-text-3);
}

.pf-zustand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 12px;
    line-height: 18px;
    font-weight: 550;
    color: var(--pf-text-3);
    white-space: nowrap;
}

.pf-zustand__punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--pf-muted);
}

.pf-zustand--filled { color: var(--pf-ok-fg); }
.pf-zustand--filled .pf-zustand__punkt { background: var(--pf-ok); box-shadow: none; }
.pf-zustand--empty { color: var(--pf-warn-fg); }
.pf-zustand--empty .pf-zustand__punkt { background: var(--pf-warn); box-shadow: none; }

/*
 * DER SCHALTER — gezeichnet, nicht Filaments: er schaltet nicht selbst, er öffnet die Frage.
 * 44 × 24, Trefferfläche über das Polster auf 44 × 44.
 */
.pf-schalter {
    position: relative;
    flex: none;
    width: 40px;
    height: 24px;
    margin: 10px 2px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--gray-300);
    cursor: pointer;
    transition: background-color var(--pf-mid) var(--pf-ease);
}

.dark .pf-schalter { background: var(--gray-700); }

.pf-schalter::before {
    content: '';
    position: absolute;
    inset: -10px -2px;
}

.pf-schalter__knopf {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform var(--pf-mid) var(--pf-ease);
}

.pf-schalter.is-an { background: var(--pf-accent-strong); }
.pf-schalter.is-an .pf-schalter__knopf { transform: translateX(16px); }
[dir='rtl'] .pf-schalter.is-an .pf-schalter__knopf { transform: translateX(-16px); }

.pf-schalter:disabled { opacity: .6; cursor: progress; }

/* ── Die Matrix: erste Spalte steht, der Rest rollt; Spaltenköpfe lesbar ───────────── */

.fi-panel-operator .pf-matrix .fi-ta-content-ctn,
.fi-panel-operator .pf-matrix .fi-ta-content {
    overflow-x: auto;
}

.fi-panel-operator .pf-matrix .fi-ta-table > thead > tr > th:first-child,
.fi-panel-operator .pf-matrix .fi-ta-table > tbody > tr > td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background-color: var(--pf-surface);
    box-shadow: inset -1px 0 0 var(--pf-border);
}

.fi-panel-operator .pf-matrix .fi-ta-row:hover > td:first-child { background-color: var(--pf-hover); }

.fi-panel-operator .pf-matrix .fi-ta-header-cell:not(:first-child) {
    min-width: 7rem;
    text-align: center;
    white-space: normal;
    line-height: 15px;
}

.fi-panel-operator .pf-matrix .fi-ta-table > tbody > tr > td:not(:first-child) {
    box-shadow: inset 1px 0 0 var(--pf-border-soft);
}

.fi-panel-operator .pf-matrix .fi-ta-row.bm-kante--todo > td:first-child {
    box-shadow: inset 3px 0 0 var(--pf-warn), inset -1px 0 0 var(--pf-border);
}

/* In der Matrix sind «aus» und «—» Wörter, keine Etiketten: ohne Fläche. */
.fi-panel-operator .pf-matrix .fi-badge.fi-color-gray {
    background: transparent;
    color: var(--pf-text-3);
}

.fi-panel-operator .bm-legende {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    color: var(--pf-text-2);
}

.pf-leerzustand {
    padding: var(--pf-s12) var(--pf-s6);
    border: 1px dashed var(--pf-border);
    border-radius: var(--pf-r-lg);
    text-align: center;
}

.pf-leerzustand__titel {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-text);
}

.pf-leerzustand__satz {
    margin: 6px auto 0;
    max-width: 46ch;
    font-size: 13.5px;
    color: var(--pf-text-3);
}

/* ═══ 16 · Fenster, Meldungen, Laden ══════════════════════════════════════════════════════ */

.fi-panel-operator .fi-modal-window {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-xl);
    background-color: var(--pf-elevated);
    box-shadow: var(--pf-shadow-modal);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-panel-operator .fi-modal-heading {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--pf-text);
}

.fi-panel-operator .fi-modal-description {
    font-size: 13.5px;
    line-height: 20px;
    color: var(--pf-text-2);
}

.fi-panel-operator .fi-modal-close-overlay {
    background-color: color-mix(in oklab, #101211 45%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.fi-panel-operator .fi-no-notification {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-lg);
    background-color: var(--pf-elevated);
    box-shadow: var(--pf-shadow-pop);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-panel-operator .fi-no-notification-title {
    font-size: var(--pf-t-body);
    font-weight: 600;
    color: var(--pf-text);
}

.fi-panel-operator .fi-no-notification-body {
    font-size: 13px;
    color: var(--pf-text-2);
}

/*
 * LADEN — ein Schimmer an der Stelle, wo gleich Inhalt steht, kein Kreisel in der Mitte.
 * Filament zeichnet für träge Widgets einen leeren Platzhalter; hier trägt er die Form.
 */
.fi-panel-operator .fi-wi-widget:has(> [x-intersect*='__lazyLoad']),
.fi-panel-operator [x-intersect*='__lazyLoad'] {
    min-height: 120px;
    border-radius: var(--pf-r-lg);
    background:
        linear-gradient(90deg, transparent 0, color-mix(in oklab, var(--pf-surface) 70%, transparent) 50%, transparent 100%) 0 0 / 40% 100% no-repeat,
        var(--pf-subtle);
    animation: pf-schimmer 1.4s var(--pf-ease) infinite;
}

@keyframes pf-schimmer {
    from { background-position: -60% 0, 0 0; }
    to { background-position: 160% 0, 0 0; }
}

/* Knöpfe, die gerade arbeiten, sehen so aus: nicht klickbar, leicht blass — nie eingefroren. */
.fi-panel-operator .fi-btn[disabled],
.fi-panel-operator .fi-btn.fi-processing { opacity: .7; }

/* ═══ 17 · Fokus: sichtbar, in der Akzentfarbe ═══════════════════════════════════════════ */

.fi-panel-operator :is(a, button, [role='button'], [role='tab'], [role='switch'], summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--pf-accent);
    outline-offset: 2px;
    border-radius: var(--pf-r-sm);
}

.fi-panel-operator .fi-input:focus-visible,
.fi-panel-operator .fi-global-search-field .fi-input:focus-visible {
    outline: none;
}

/* ═══ 18 · Telefon und Tablett ════════════════════════════════════════════════════════════ */

@media (max-width: 63.99rem) {
    /*
     * Die Schublade: dieselbe Schiene, über dem Inhalt. Der Schatten NUR, solange sie offen ist —
     * geschlossen liegt sie links neben dem Bildschirm, und ihr Schatten fiel als grauer Streifen
     * auf jede Seite (gemessen auf 390 px).
     */
    .fi-panel-operator .fi-sidebar {
        background-color: var(--pf-bg);
        box-shadow: none;
        border-radius: 0;
        margin: 0;
    }

    .fi-panel-operator .fi-sidebar.fi-sidebar-open { box-shadow: var(--pf-shadow-modal); }

    /* Filament blendet den Anfang der Kopfleiste auf dem Telefon ganz aus — und mit ihm die Marke. */
    .fi-panel-operator .fi-topbar-start {
        display: flex;
        align-items: center;
    }

    .fi-panel-operator .fi-topbar {
        padding-inline: var(--pf-s3);
    }

    .fi-panel-operator .fi-topbar-start .fi-logo:has(> .pf-marke) {
        margin-inline-start: 4px;
    }

    .fi-panel-operator .pf-marke__zusatz { display: none; }

    .fi-panel-operator .fi-main { padding-inline: var(--pf-s4); }

    .fi-panel-operator .fi-banner { padding-inline: var(--pf-s4); }

    .fi-panel-operator .fi-header { align-items: flex-start; }

    .fi-panel-operator .fi-header-actions-ctn { width: 100%; }

    .fi-panel-operator .fi-ta-ctn .fi-ta-header-toolbar { flex-wrap: wrap; }

    .fi-panel-operator .fi-ta-search-field { flex: 1 1 100%; }

    .fi-panel-operator .fi-ta-search-field .fi-input-wrp { min-width: 0; width: 100%; }

    .pf-daten__zeile { grid-template-columns: 1fr; gap: 2px; }

    .pf-zeitleiste__eintrag { grid-template-columns: 3.5rem 1fr; gap: var(--pf-s3); }
}

@media (max-width: 39.99rem) {
    .pf-merkmalliste__eintrag { align-items: flex-start; }
    .pf-hausmerkmale__kopf { flex-direction: column; align-items: flex-start; }
}

/* ═══ 19 · Weniger Bewegung ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .fi-panel-operator .pf-flaeche,
    .fi-panel-operator [x-intersect*='__lazyLoad'] { animation: none; }
}

/* ═══ 20 · Der Leitstand der Plattform (D-178) ═══════════════════════════════════════════════
 *
 * Der Betreiber, 26.09.2026, nach dem farbigen Leitstand der Häuser (D-176): «tamam şimdi benim
 * panelimi de böyle yap». Die Übersicht der Konsole besteht seitdem aus denselben Bauteilen
 * (`bm-lt-*`, leitstand.css): Kennzahlleiste mit kleiner Linie, Ringe, Liste der Arbeit.
 *
 * ⛔ DIE BAUTEILE BLEIBEN IN leitstand.css, DIE FARBEN KOMMEN VON HIER. Diese Brücke legt die
 *    `--color-*`-Marken, die jene Datei liest, auf die Marken der Plattform. Eine Kopie der
 *    Bauteile mit `pf-`-Namen wäre dieselbe Form zweimal — und die zweite liefe beim nächsten
 *    Feinschliff der ersten hinterher.
 *
 * ⚠️ KEINE ORANGE- UND OCKERFLÄCHE (D-170/b): `--color-warning-tint` ist neutral, die Warnung
 *    steht in Kante und Schrift. Terrakotta bleibt der Akzent (Marke::FARBE) — für Wege und Fokus.
 */
body.fi-panel-operator {
    --color-surface: var(--pf-surface);
    --color-surface-2: var(--pf-subtle);
    --color-border: var(--pf-border);
    --color-border-soft: var(--pf-border-soft);
    --color-border-strong: var(--pf-control);
    --color-spur: #E3E4E4;
    --color-text: var(--pf-text);
    --color-text-2: var(--pf-text-2);
    --color-text-muted: var(--pf-text-3);
    --color-text-faint: var(--pf-muted);
    --color-accent: var(--pf-accent);
    --color-accent-strong: var(--pf-accent-strong);
    --color-accent-text: var(--pf-accent-text);
    --color-accent-tint: var(--pf-accent-soft);
    --color-on-accent: var(--pf-on-accent);
    --color-focus: var(--pf-accent);
    --bm-dash-akzent: var(--pf-accent-strong);
    --color-success: var(--pf-ok);
    --color-success-text: var(--pf-ok-fg);
    --color-success-tint: var(--pf-ok-bg);
    --color-warning: var(--pf-warn);
    --color-warning-text: var(--pf-warn-fg);
    --color-warning-tint: rgba(32, 33, 31, .045);
    --color-danger: var(--pf-danger);
    --color-danger-text: var(--pf-danger-fg);
    --color-danger-tint: var(--pf-danger-bg);
    --color-info: var(--pf-info);
    --color-info-text: var(--pf-info-fg);
    --color-info-tint: var(--pf-info-bg);
    --chart-vergleich: #838484;
    --space-4: var(--pf-s4);
    --r-panel: var(--pf-r-lg);
    --r-control: var(--pf-r-md);
    --shadow-card: none;
    --dur-fast: var(--pf-fast);
    --ease: var(--pf-ease);
}

.dark body.fi-panel-operator {
    --color-spur: #3A3E3B;
    --color-warning-tint: rgba(239, 240, 240, .06);
    --bm-dash-akzent: var(--pf-accent);
    --chart-vergleich: #727474;
}

/* Die Seite: breiter als die Lesebreite, wie der Leitstand des Hauses. */
@media (min-width: 64rem) {
    .fi-panel-operator .fi-page.bm-uebersicht { max-width: 1600px; }
}

/* Die Karten der Plattform tragen Haarlinien statt Schatten — wie jede Fläche dieser Datei. */
.fi-panel-operator .bm-lt-karte,
.fi-panel-operator .bm-lt-zahlen { border-color: var(--pf-border); }

/* Die Kennzahl der Häuser («4 live») ist Text, keine Zahl allein: etwas kleiner, damit sie in
   ihrer Kachel neben vier anderen nicht umbricht. */
.fi-panel-operator .bm-lt-kz__wert { font-size: 28px; line-height: 34px; }

/* Die Wachstumskurve steht in einer Karte des Leitstands: dieselbe Höhe wie ihr Nachbar, die Demo.
   Filaments Diagrammkarte besteht aus drei Hüllen; jede muss mitwachsen. */
.fi-panel-operator .bm-lt__feld[data-feld="wachstum"] :is(.fi-wi-widget, .fi-wi-chart, .fi-section) { height: 100%; }
.fi-panel-operator .bm-lt__feld[data-feld="wachstum"] .fi-section { display: flex; flex-direction: column; }
.fi-panel-operator .bm-lt__feld[data-feld="wachstum"] .fi-section-content-ctn { flex: 1; }

/* Funktionen und Demo: eine Zeile je Grösse, der Balken darunter. Über die ganze Breite in
   Spalten (D-179): elf volle Zeilen über 1200 px waren Balken, die niemand zu Ende liest. */
.pf-lt-balken {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 12px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Die Arbeit über die ganze Breite (D-179): die Punkte in Spalten, damit sieben Punkte nicht
   eine Säule von 700 px werden. */
.fi-panel-operator .bm-lt__feld[data-feld="aufgaben"] .bm-lt-tun__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 10px;
}

/* Die Demo steht neben der Kurve und ist so hoch wie sie: in einer schmalen Karte stehen die
   drei Zahlen untereinander, Wort links, Zahl rechts. */
.pf-lt-demo { container-type: inline-size; }

.pf-lt-balken__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "wort zahl" "spur spur";
    align-items: center;
    gap: 4px 10px;
}

.pf-lt-balken__wort { grid-area: wort; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--pf-text); }
.pf-lt-balken__zahl { grid-area: zahl; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pf-text-2); }

.pf-lt-balken__spur {
    grid-area: spur;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--color-spur);
}

.pf-lt-balken__spur > span { display: block; height: 100%; border-radius: 999px; background-color: var(--kf, var(--pf-accent)); }

.pf-lt-demo__zahlen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-r-md);
    background-color: var(--pf-border);
}

.pf-lt-demo__zahl { padding: 12px 14px; background-color: var(--pf-subtle); }
.pf-lt-demo__zahl dt { font-size: 12px; line-height: 16px; color: var(--pf-text-3); }
.pf-lt-demo__zahl dd { margin: 4px 0 0; font-size: 20px; line-height: 26px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pf-text); }
/* Der Hinweis unter einem Ring (D-179): ein Satz und ein Weg, wenn der Ring nur «kein Vertrag» sagt. */
.pf-lt-ring__hinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--pf-border);
    font-size: 12.5px;
    line-height: 18px;
    color: var(--pf-text-2);
}

/* Die Demo-Vorlage: wann sie gebaut wurde; ist sie älter als eine Nacht, in der Farbe der Aufgabe. */
.pf-lt-demo__vorlage { margin-top: 2px; }
.pf-lt-demo__vorlage.is-alt { color: var(--pf-warn-fg); font-weight: 600; }

.pf-lt-demo__quote { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--pf-text-3); }

.pf-lt-demo__wochen {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
    flex: 1;
    min-height: 96px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--pf-control);
}

.pf-lt-demo__woche { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.pf-lt-demo__saeule { display: block; min-height: 2px; border-radius: 4px 4px 0 0; background-color: var(--kf, var(--pf-accent)); }
.pf-lt-demo__achse { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 11.5px; color: var(--pf-text-3); font-variant-numeric: tabular-nums; }

@container (max-width: 26rem) {
    .pf-lt-demo__zahlen { grid-template-columns: minmax(0, 1fr); }
    .pf-lt-demo__zahl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; }
    .pf-lt-demo__zahl dd { margin: 0; font-size: 16px; line-height: 22px; }
}

@media (max-width: 39.99rem) {
    .pf-lt-demo__zahlen { grid-template-columns: minmax(0, 1fr); }

    /* Auf dem Telefon nur der eine Weg nach vorn (Neues Restaurant); Flotte, Abrechnung und
       Meldungen stehen im Menü — vier Knöpfe in zwei Reihen schoben die Zahlen nach unten. */
    .fi-panel-operator .bm-uebersicht .fi-header .fi-ac .fi-btn:not(.fi-color-primary) { display: none; }
}