/* Standard-Grid FnDataGrid — das Aussehen.
 *
 * QUELLE, ZEILE FUER ZEILE: der <style>-Block der ABGENOMMENEN Vorschau
 * docs/concepts/VORSCHAU-Standard-Grid.html (Abnahme Niko 05.09.2026: "das ist jetzt Perfekt").
 * Niko am 06.09.2026: "meine Entscheidung kennst du mit der Abnahme des Grids" — wo die Vorschau
 * und eine bestehende Datei sich widersprechen, gewinnt die Vorschau.
 *
 * WARUM GLOBAL UND NICHT ALS .razor.css: FnDataGrid nimmt fremde RenderFragments auf (Spalten,
 * Zellen, die Toolbar des Wirts). Bereichsbezogenes CSS traegt ein b-Attribut und endet an der
 * Komponentengrenze — genau daran ist .fn-toolbar-search gescheitert: die Regel existiert in
 * FnListToolbar.razor.css und hat das Grid nie erreicht (AGENTS.md R5).
 *
 * WARUM ES DIESE DATEI VORHER NICHT GAB: Das Grid fuehrte 17 eigene Klassen ein und hatte fuer
 * KEINE davon eine Regel — nachgewiesen am 06.09.2026 im Repository, im kompilierten Bundle und
 * live ueber document.styleSheets. Der Nutzer sah rohe Browser-Steuerelemente: helle Systemflaeche,
 * zweifach abgesetzter heller Rahmen, kein Radius. Die Frage "wo liegt das CSS?" stand unbeantwortet
 * in AUDIT-Standard-Grid-FnDataGrid.md Punkt 3.6.
 *
 * NICHT HIER, WEIL SCHON GLOBAL VORHANDEN und mit der Vorschau deckungsgleich:
 * .fn-sym/.fn-stack (fn-list.css), .wl-grp-lbl/-tools/-iconbar/-divider/.wl-grp-row/.wl-tbl-act
 * (watchlists.css), table.fn-list th/td (fn-list.css). Sie werden NICHT dupliziert — eine zweite
 * Wahrheit waere genau der Fehler, den das Standard-Grid beenden soll.
 */

/* Abschnitt 1 (die Kachelhuelle .fn-card*) stand hier und ist am 06.09.2026 wieder
   entfernt worden: KEIN Markup verwendet sie bisher. Regeln auf Vorrat sind tot und
   verstossen gegen R4 - sie kommen zurueck, wenn die Huelle gebaut wird (Schnitt 2).
   Dasselbe gilt fuer den Verwalter-Knopf .fn-admin. */

/* ============================================================================
 * 2 · Die Werkzeugleiste — alle Steuerelemente 30 px hoch, auf EINER Linie
 * ==========================================================================*/

.fn-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 16px;
    /* Einzeilig, nie Umbruch, nie Abschneiden - passt die Zeile nicht, rollt sie waagerecht
       (E14, Niko 12.09.2026: "horizontal scrollen! (der Superuser traegt die Verantwortung das
       nutzbar fuer den User bereitzustellen)"). */
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Ein fokussiertes Feld wird mit Abstand ins Bild geholt (UX-Pruefung 13.09.2026). */
    scroll-padding-inline: 16px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-bg-alt);
}

/* Beim Rollen behaelt jedes Element seine Breite - sonst quetschte flex die Felder zusammen, statt
   die Zeile rollen zu lassen. */
.fn-toolbar > * {
    flex-shrink: 0;
}

.fn-toolbar-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    flex: 0 0 220px;
    min-width: 180px;
    max-width: 300px;
    padding: 0 11px; /* Vorgabe 2b, Nachtrag 1.12: Hoehe exakt 30px hat Vorrang - 6px liess das Feld browserabhaengig auf 35px wachsen */
    border-radius: 8px;
    border: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-input-bg);
    margin-left: auto;
}

.fn-toolbar-search:focus-within { border-color: var(--fn-primary); }
/* Die Lupe: FnIcon setzt einen Platzhalter <i class="fn-icon">, den das Symbol-Skript mit einem
   <svg> fuellt und dem es die Klassen des Platzhalters mitgibt. Beide muessen gemasst werden —
   die Regel der Vorschau traf nur das <svg> und verlor gegen die allgemeine Symbolgroesse; die
   Lupe stand mit 20x20 ueber ihrem 17x17-Platzhalter hinaus (UX-Pruefung 06.09.2026).
   Der Wirt-Selektor .fn-grid ist noetig, nicht Zierde: .app .lucide aus settings.css hat
   dieselbe Spezifitaet (0,2,0) und wird SPAETER geladen - bei Gleichstand gewinnt die spaetere
   Regel. Mit 0,3,0 entscheidet die Spezifitaet statt der Ladereihenfolge. */
.fn-grid .fn-toolbar-search .fn-icon,
.fn-grid .fn-toolbar-search .lucide,
.fn-grid .fn-toolbar-search svg { width: 14px; height: 14px; color: var(--fn-text-tertiary); flex: none; }

.fn-toolbar-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    color: var(--fn-text);
    font: inherit;
    font-size: 12.5px;
}

.fn-toolbar-search input::placeholder { color: var(--fn-text-tertiary); }

.fn-toolbar-refresh {
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border-radius: 7px;
    border: var(--fn-border-width) solid var(--fn-border);
    background: transparent;
    color: var(--fn-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fn-toolbar-refresh:hover:not(:disabled) {
    background: var(--fn-bg-muted);
    color: var(--fn-text);
    border-color: var(--fn-border-strong);
}

.fn-toolbar-refresh:disabled { opacity: .45; cursor: not-allowed; }

/* Die Sanduhr beim Nachladen sitzt auf derselben 30-px-Linie wie das Aktualisieren-Zeichen
   daneben - sie darf die Leiste nicht hoeher machen, sonst springt sie bei jedem Filterklick. */
.fn-grid-reloading {
    width: 30px;
    height: 30px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fn-text-secondary);
}
.fn-toolbar-refresh svg { width: 15px; height: 15px; }

/* Dasselbe wie bei der Lupe oben: FnIcon rendert <i class="fn-icon">, das Symbol-Skript macht daraus ein
   .lucide-svg, und .app .lucide (settings.css, 20 px) gewinnt gegen die Regel darueber - live gemessen
   20 statt 15 px (Auditor 13.09.2026, 04:20). Mit dem Wirt .fn-grid entscheidet die Spezifitaet. */
.fn-grid .fn-toolbar-refresh .fn-icon,
.fn-grid .fn-toolbar-refresh .lucide,
.fn-grid .fn-toolbar-refresh svg { width: 15px; height: 15px; }
.fn-toolbar-refresh.fn-spinning svg { animation: fn-toolbar-spin 1s linear infinite; }

@keyframes fn-toolbar-spin { to { transform: rotate(360deg); } }

/* Der Knopf der Leiste ist ein PRIMITIV und steht deshalb nicht hier, sondern in
   wwwroot/css/fn-buttons.css als .fn-btn-toolbar (Gate FINCOMP001: Buttons und Felder
   kommen ausschliesslich aus den geteilten Fn*-Primitiven). Das Markup benutzt FnButton
   mit Variant="Ghost" und CssClass="fn-btn-toolbar" — die Masse stammen 1:1 aus der
   abgenommenen Vorschau, nur der Ablageort folgt der Architekturregel. */

.fn-tb-sel {
    height: 30px;
    padding: 0 9px;
    background: var(--fn-input-bg);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    color: var(--fn-text);
    font-size: 12.5px;
    font-family: inherit;
}

.fn-tb-sel:focus { outline: none; border-color: var(--fn-primary); }

/* Filterfeld mit gesetztem Wert: blauer Rand, 1:1 Vorschau (.fn-tb-sel.set) - Auditor 13.09.2026:
   die Klasse wurde gesetzt, eine Regel fehlte. */
.fn-tb-sel.set { border-color: var(--fn-primary); color: var(--fn-text); }

/* Auswahlfeld im Filter: geschlossen hoechstens die Zeichen, die der Verwalter je
   Filterfeld setzt (Vorgabe 10), danach Auslassung; die aufgeklappte Liste zeigt den vollen Wert (Niko
   13.09.2026). --fn-flt-chars setzt FnGridFilterBar; fehlt es (volle Breite), ist die Deklaration
   ungueltig und es gilt keine Grenze. 30 px sind Innenabstand und Pfeil. */
.fn-flt-row .fn-tb-sel {
    max-width: calc(var(--fn-flt-chars) * 1ch + 30px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Summenzeile eingeschaltet: Rand und Zeichen blau, Flaeche transparent - 1:1 Vorschau (.wl-tbl-act.on). */
.fn-grid .wl-tbl-act.on { border-color: var(--fn-primary); color: var(--fn-primary); background: transparent; }
.fn-tb-sel:disabled { opacity: .35; cursor: not-allowed; }

/* Zaehler neben den Filterfeldern - "9 von 9.408", 1:1 Vorschau der Boersenschliesstage (PR 1835, .zaehler). */
.fn-flt-count {
    font-size: 11.5px;
    color: var(--fn-text-tertiary);
    white-space: nowrap;
}

/* Summenzeile: Sigma und Zeilenzahl nebeneinander auf einer Linie. Das Symbol traegt die
   Bedeutung, die Zahl sagt worueber summiert wurde - der fruehere Text "Summe · 71 Zeilen"
   ist entfallen (Niko 12.09.2026). */
.fn-grid tfoot td.lbl,
.fn-grid tr.sum td.lbl {
    display: flex;
    align-items: center;
    gap: 7px;
}

.fn-grid td.lbl .cnt { color: var(--fn-text-secondary); }

.fn-tb-label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fn-text-tertiary);
}

/* Der zweite Trenner haengt direkt in der Leiste, die an der Unterkante ausrichtet.
   Die 3 px sind genau die Haelfte der Differenz (30-24)/2 — kein geschaetzter Wert. */
.fn-toolbar > .wl-grp-divider { align-self: flex-end; margin-bottom: 3px; }

/* ============================================================================
 * 3 · Die Gruppierungs-Ecke
 *
 * .wl-grp-ctl steht in watchlists.css auf flex-direction:column — dort richtig, denn die
 * Watchliste traegt die Beschriftung ueber der GANZEN Reihe. Die Vorschau des Grids setzt
 * dieselbe Klasse auf row und legt die Beschriftung in einen eigenen Stapel ueber NUR die
 * Felder. Die Ueberschreibung steht deshalb bewusst unter .fn-grid: sonst verspringt die
 * Watchliste, die noch nicht auf dem Grid steht (offener Auftrag
 * tasks/new/FIN-TASK-2026-09-05-watchliste-erbt-fndatagrid.md). Faellt weg, sobald sie erbt.
 * ==========================================================================*/

.fn-grid .wl-grp-ctl {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
}

/* Der Stapel traegt NUR die Felder — deshalb steht die Beschriftung ueber ihnen zentriert
   und nicht ueber der ganzen Reihe einschliesslich der Pfeile. */
.wl-grp-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.wl-grp-ctl.senkrecht .wl-grp-stack { flex-direction: row; align-items: center; gap: 8px; }

/* ============================================================================
 * 4 · Die Liste — Rollbereich, Gruppen-, Summen- und Gesamtzeile
 * ==========================================================================*/

.fn-scroll { overflow-x: auto; }

/* Kopfzeile: die Vorschau sagt Sekundaerfarbe und Schnitt "medium", fn-list.css sagt
   Tertiaerfarbe und 600. Niko am 06.09.2026: die Abnahme des Grids ist die Entscheidung —
   also gewinnt die Vorschau. Bewusst NUR im Grid, damit keine Liste ausserhalb sich
   ungefragt aendert; sie erben es, sobald sie auf das Grid umgestellt sind. */
.fn-grid table.fn-list th {
    color: var(--fn-text-secondary);
    font-weight: var(--fn-font-weight-medium);
}

tr.grp > th {
    background: var(--fn-surface-alt);
    border-top: var(--fn-border-width) solid var(--fn-border-strong);
}

tr.grp .glabel {
    /* In der Vorschau ist die Gruppen-Beschriftung ein <span>; im Produkt ist sie ein <button>,
       damit die Gruppe per Tastatur auf- und zugeklappt werden kann. Die 1:1 uebernommene Regel
       setzte deshalb nur die Schrift — die Knopf-Grundform des Browsers blieb stehen und war am
       06.09.2026 die EINZIGE helle Flaeche der ganzen Seite (Luminanzabtastung der UX-Pruefung).
       Sie zog die Gruppenzeile ausserdem von 39 auf 47 px auf. */
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fn-text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

tr.grp .gcount {
    font-family: var(--fn-font-mono);
    font-size: 10.5px;
    color: var(--fn-text-secondary);
    background: var(--fn-bg-muted);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-pill);
    padding: 1px 8px;
    letter-spacing: 0;
    text-transform: none;
}

tr.grp .caret {
    color: var(--fn-text-tertiary);
    font-size: 10px;
    width: 10px;
    display: inline-block;
}

/* Gruppierung nach mehreren Spalten — abgenommene Vorschau
   VORSCHAU-Standard-Grid-Gruppierung-mehrere-Spalten.html, Niko 11.09.2026: 34 px je Ebene.
   Die 14 px sind der Zellabstand aus fn-list.css (table.fn-list th/td, padding …px 14px); die
   oberste Ebene (--grp-level 0) steht damit genau dort, wo sie immer stand. --grp-level ist
   eine oertliche Rechengroesse, kein Design-Token - deshalb ohne das Praefix --fn-. */
.fn-grid tr.grp > th.gname,
.fn-grid td.gind {
    padding-left: calc(14px + 34px * var(--grp-level, 0));
}

/* Ab der zweiten Ebene: leisere Flaeche und Beschriftung — das einzig Neue neben der Einrueckung. */
.fn-grid tr.grp.sub > th {
    background: var(--fn-bg-muted);
    border-top-color: var(--fn-border);
}

.fn-grid tr.grp.sub .glabel {
    font-weight: var(--fn-font-weight-medium);
    color: var(--fn-text-secondary);
}

/* Das Gruppierungskennzeichen 1/2 am gewaehlten Feld — eine Anzeige, keine Eingabe. Es steht auf
   dem angewaehlten Schalter (.wl-mode-on, Flaeche --fn-primary) und nimmt deshalb dessen
   Schriftfarbe an; in --fn-primary waere es auf --fn-primary unsichtbar. */
.fn-grid .fn-grp-rank {
    font-family: var(--fn-font-mono);
    font-size: 9.5px;
    line-height: 14px;
    padding: 0 5px;
    border: var(--fn-border-width) solid currentColor;
    border-radius: var(--fn-radius-pill);
}

/* Ein angewaehlter Schalter bleibt angewaehlt - auch unter dem Mauszeiger. .fn-btn-ghost:hover
   (fn-buttons.css, Spezifitaet 0,3,0) schlug .wl-mode-tab.wl-mode-on (0,2,0): das Feld wurde beim
   Ueberfahren dunkel und sah nicht mehr gewaehlt aus. Mit der Mehrfach-Gruppierung traf das genau den
   Kernablauf - nach Shift + Klick steht der Zeiger auf dem gerade gewaehlten Feld (Befund von
   UX-Designer und Auditor, 11.09.2026). Instandsetzung des abgenommenen Zustands, nur im Grid. */
.fn-grid .wl-mode-tab.wl-mode-on:hover:not([disabled]) {
    background: var(--fn-primary);
    color: var(--fn-on-primary);
}

tr.sum > td {
    background: var(--fn-bg-muted);
    border-bottom: var(--fn-border-width) solid var(--fn-border-strong);
    font-weight: var(--fn-font-weight-medium);
    padding-top: 9px;
    padding-bottom: 9px;
}

tr.sum .agg {
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fn-text-tertiary);
    display: block;
    margin-bottom: 1px;
    font-family: "IBM Plex Sans", sans-serif;
}

tr.sum td.lbl {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fn-text-secondary);
}

tr.total > td {
    background: var(--fn-surface-alt);
    border-bottom: 0;
    border-top: 2px solid var(--fn-border-strong);
}

/* ============================================================================
 * 5 · Spalten umstellen — Griff und Ziehzustaende
 * ==========================================================================*/

.grip {
    cursor: grab;
    color: var(--fn-text-tertiary);
    font-size: 11px;
    margin-right: 6px;
    letter-spacing: -1px;
    vertical-align: 1px;
}

.fn-grid th:hover .grip { color: var(--fn-primary); }
.fn-grid th.drag-src { opacity: .4; }
.fn-grid th.drag-tgt { box-shadow: inset 3px 0 0 var(--fn-primary); }
.fn-grid th.drag-tgt-r { box-shadow: inset -3px 0 0 var(--fn-primary); }

/* ============================================================================
 * 6 · Tastaturfokus
 *
 * Am 06.09.2026 gemessen: auf vier von sechs Bedienelementen und allen Sortierkoepfen war
 * nur der fast schwarze Chromium-Standardrahmen sichtbar — Kontrast 1,10:1 gegen die
 * Kartenflaeche, WCAG 2.2 SC 1.4.11 verlangt 3:1. Es ist dieselbe Zeile, die .wl-tbl-act
 * in watchlists.css bereits traegt.
 * ==========================================================================*/

.fn-toolbar :is(button, select, input):focus-visible,
.fn-grid :is(button, select, input, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--fn-focus-ring);
    border-radius: var(--fn-radius-sm);
}

/* ============================================================================
 * 7 · Was das Grid ueber die Vorschau hinaus mitbringt
 *
 * ❗ Diese vier Bereiche kommen in VORSCHAU-Standard-Grid.html NICHT vor — sie sind beim Bauen
 * entstanden (Ablegezone beim Spaltenumstellen, Leerzustand, Spaltendialog). Sie sind deshalb
 * ausdruecklich KEIN "1:1", sondern ein Vorschlag: gebaut ausschliesslich aus den Tokens und
 * Massen, die die Vorschau fuer verwandte Elemente verwendet (30px-Linie, --fn-radius-sm,
 * --fn-border, --fn-bg-muted). Sie gehoeren dem Pruefer vorgelegt, nicht stillschweigend gesetzt.
 * ==========================================================================*/

/* Fall 2 des Umstellens: hier faellt eine Spalte aus dem Grid. */
.fn-grid-dropout {
    margin: 0 16px 10px;
    padding: 10px 14px;
    border: 1px dashed var(--fn-border-strong);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-muted);
    color: var(--fn-text-secondary);
    font-size: 12px;
    text-align: center;
}

.fn-grid-dropout.hot { border-color: var(--fn-primary); color: var(--fn-primary); }

/* Leerzustand: eine Aussage, kein leerer Kasten. */
.fn-grid-empty > td {
    padding: 26px 16px;
    text-align: center;
    color: var(--fn-text-secondary);
    font-size: 12.5px;
}

.fn-grid-clear {
    margin-left: 8px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--fn-primary);
    cursor: pointer;
    text-decoration: underline;
}

/* Spaltendialog: eine Zeile je Spalte, alles auf einer Linie.
   Ohne diese Regeln stand "Kuerzel" und "immer" ohne Abstand aneinander ("Kuerzelimmer")
   und das Ankreuzfeld der letzten Zeile hatte keine Beschriftung neben sich. */
.fn-grid-cols { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }

.fn-grid-cols-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fn-grid-cols-row:last-child { border-bottom: 0; }

.fn-grid-cols-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--fn-text);
    cursor: pointer;
}

.fn-grid-cols-name input[type=checkbox] { accent-color: var(--fn-primary); flex: none; }
.fn-grid-cols-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fn-grid-cols-pin {
    flex: none;
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fn-text-tertiary);
}

/* Zeilenaktionen stehen rechts und brauchen keine Breite mehr als ihre Knoepfe. */
.fn-grid table.fn-list th.act,
.fn-grid table.fn-list td.act { text-align: right; white-space: nowrap; width: 1%; }

/* ============================================================================
 * 8 · Der Ziehrand am Spaltenende
 *
 * Masse und Verhalten 1:1 aus der Watchliste (`.wl-col-resize` in watchlists.css) — derselbe
 * JavaScript-Baustein fn-grid-resize.js bedient beide. Der Rand ist absichtlich 7 px breit und
 * damit breiter als die Trennlinie: eine 1-px-Zielflaeche trifft niemand mit der Maus.
 * ==========================================================================*/

.fn-grid table.fn-list th { position: relative; }

.fn-grid-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}

.fn-grid-resize:hover,
.fn-grid-resize:active { background: var(--fn-primary); opacity: .35; }

/* ============================================================================
 * 9 · Die Kachel um eine Liste — und ein Zeichen fuer "auf und zu"
 *
 * Abgenommen von Niko am 08./09.09.2026. Vorher fehlte die Kachel im Produkt vollstaendig,
 * obwohl sie in VORSCHAU-Standard-Grid.html steht ("in der fehlt noch die Moeglichkeit es
 * ein-&ausklappbar zu machen").
 *
 * EIN ZEICHEN, EINE GESTALT: chevrons-up/chevrons-down, 30x30, Radius wie die uebrigen Symbole,
 * Symbol 15px — an allen drei Stellen, an denen etwas auf- und zugeklappt wird. Niko: "die Links
 * passen zu den ICONS in Form und Groesse", "wenn es pro Gruppe ginge, dann muss auch jede Gruppe
 * einen Doppelpfeil bekommen". Der Umfang steht im Ort, nicht im Zeichen.
 * ==========================================================================*/

.fn-card {
    background: var(--fn-bg-alt);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius);
    overflow: hidden;
}

.fn-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fn-card-title { font-size: 14px; font-weight: 600; }
.fn-card-sub { font-size: 11.5px; color: var(--fn-text-secondary); margin-top: 2px; }
.fn-card-spacer { flex: 1; }

.fn-card-ico {
    width: 16px;
    height: 16px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fn-primary);
}

.fn-card-ico .fn-icon,
.fn-card-ico svg { width: 16px; height: 16px; }

/* Das vom Verwalter zugeordnete Bitmap sitzt an derselben Stelle und in derselben Groesse wie
   das Standardzeichen — so sagt es die abgenommene Vorschau (.fn-card-ico img{16px}). */
.fn-card-ico img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
}

/* Zugeklappt verschwindet alles ausser dem Kopf — der Zustand steckt am Kopf, nicht im Inhalt.
   Bewusst ueber "alles ausser dem Kopf" statt ueber die Namen der Leiste: die Leiste ist ein
   geteiltes Control, und ein Modul spricht sie nicht beim Namen an (Gate DESIGN001-REDEFINE).
   Nebeneffekt: es wirkt auch fuer Inhalte, die eine Liste sonst noch in die Kachel legt. */
.fn-card.zu > :not(.fn-card-head) { display: none; }

/* Der Doppelpfeil — im Kachelkopf und in jeder Gruppenzeile dieselbe Gestalt. */
.fn-card-fold,
.fn-grid tr.grp .grp-knopf {
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: transparent;
    color: var(--fn-text-secondary);
    cursor: pointer;
}

.fn-card-fold:hover,
.fn-grid tr.grp .grp-knopf:hover {
    background: var(--fn-bg-muted);
    color: var(--fn-text);
    border-color: var(--fn-border-strong);
}

.fn-card-fold .fn-icon,
.fn-card-fold .lucide,
.fn-grid tr.grp .grp-knopf .fn-icon,
.fn-grid tr.grp .grp-knopf .lucide { width: 15px; height: 15px; }

/* In der Gruppenzeile steht der Knopf VOR dem Namen; der Name ist kein Klickziel mehr
   (Variante B, Niko 09.09.2026). */
.fn-grid tr.grp .grp-knopf { margin-right: 8px; vertical-align: middle; }
.fn-grid tr.grp .glabel { cursor: default; }

/* Der Aktualisieren-Knopf trug als einziger Radius 7. Angeglichen wurde er dort, wo er wohnt:
   Components/Shared/FnListToolbar.razor.css. Ein Modul definiert ein geteiltes Control nie nach
   (Gate DESIGN001-REDEFINE) - genau deshalb steht hier nichts. */

/* ============================================================================
 * 8 · Favoriten — eine eigene Gruppe ganz oben (Niko 10.09.2026)
 *
 * Abgenommene Vorschau: docs/concepts/VORSCHAU-Standard-Grid-Favoriten.html
 * Die Spalte gehoert dem GRID, nicht dem Modul: feste Breite, keine Ueberschrift, nicht
 * ausblendbar, nicht verschiebbar, nicht ziehbar.
 * ==========================================================================*/

.fn-grid col.favcol {
    width: 34px;
}

.fn-grid th.favcol,
.fn-grid td.favcol {
    width: 34px;
    padding-left: 10px;
    padding-right: 0;
}

/* `star` ist app-weit das Favoriten-Zeichen (Design-Vorgabe 4b) - blass, solange nichts gemerkt
   ist, und in --fn-cat-gold, sobald es gemerkt ist. Dieselbe Farbe wie der Favorit in der
   Watchliste; eine zweite Bedeutung fuer dasselbe Zeichen gibt es nicht. */
.fn-grid .favstar {
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    color: var(--fn-text-tertiary);
    display: inline-flex;
}

.fn-grid .favstar:hover {
    color: var(--fn-cat-gold);
}

.fn-grid .favstar.on {
    color: var(--fn-cat-gold);
}

.fn-grid .favstar svg {
    width: 14px;
    height: 14px;
}

.fn-grid .favstar.on svg {
    fill: currentColor;
}

/* Die Favoriten-Gruppenzeile bleibt beim Rollen stehen - wie eine gesperrte Zeile in Excel
   (Niko 10.09.2026: "aehnlich wie in Excel die gesperrten Spalten"). Sie traegt Name und Zahl,
   also weiss der Leser auch weiter unten, dass oben Favoriten stehen.

   ❗ NUR die Gruppenzeile, nicht die Favoritenzeilen selbst: Eine feste Zeilenhoehe gibt es hier
   nicht - Zellen umbrechen (die Datenversorgungs-Liste zeigt drei Zeilen in einer Zelle). Ohne
   feste Hoehe laesst sich der Abstand mehrerer gestapelter Haftzeilen nicht in CSS ausrechnen, und
   geraten wird hier nichts. Was daraus folgen soll, entscheidet Niko. */
.fn-grid tr.grp.favgrp > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--fn-surface-alt);
}

/* Die ersten fuenf Favoritenzeilen bleiben beim Rollen stehen (Niko 10.09.2026, Weg C mit fuenf
   Zeilen). Sie behalten ihre VOLLE Hoehe - "mitwachsen" -, deshalb steht hier keine Hoehe und kein
   Abschneiden. Den Abstand von oben misst js/fn-grid-pin.js und setzt ihn je Zelle; ohne geladenes
   Modul stehen die Zeilen einfach normal in der Liste, und niemand sieht einen halben Zustand. */
.fn-grid tr.favrow.pinned > td {
    position: sticky;
    z-index: 2;
    background: var(--fn-bg-alt);
}

/* ==========================================================================
 * 9 · Aktionen je Zeile — ändern · in die Ablage · löschen (Niko 11.09.2026)
 *
 * „einfügen eine neue Zeile manuell einfügen (dieses Icon sehe ich im Kopf), eine Zeile ändern
 * ist ein Icon pro Zeile … das muss nur das Modul kennen — daher Icons bereitstellen, Methoden
 * bereitstellen, das Modul wird über die Dokumentation genau darüber informiert."
 *
 * Die Spalte gehoert dem GRID, nicht dem Modul — dieselbe Regel wie bei der Sternspalte:
 * feste Breite, keine Ueberschrift, nicht ausblendbar, nicht verschiebbar, nicht ziehbar.
 * Sie steht rechts, weil dort die Hand ohnehin hinwandert, und sie erscheint nur, wenn das
 * Modul ein Aendern oder Loeschen kennt.
 * ==========================================================================*/

.fn-grid col.actcol {
    width: 96px;
}

.fn-grid th.actcol,
.fn-grid td.actcol {
    width: 96px;
    padding-left: 0;
    padding-right: 8px;
    text-align: right;
    white-space: nowrap;
}

.fn-grid .gridrowact {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

/* Die Zeichen bleiben zurueckhaltend, solange die Maus nicht in der Zeile ist: Sie stehen in
   JEDER Zeile und wuerden sonst die Daten uebertoenen - die Liste ist zum Lesen da, nicht zum
   Anschauen von Knoepfen. Sichtbar sind sie trotzdem immer; sie verschwinden nie ganz, sonst
   fuende sie niemand ohne Maus (Tastaturbedienung). */
.fn-grid .gridrowact .wl-tbl-act {
    opacity: 0.55;
}

.fn-grid tbody tr:hover .gridrowact .wl-tbl-act,
.fn-grid .gridrowact .wl-tbl-act:focus-visible {
    opacity: 1;
}

/* =========================================================================
   Filterzeile — LINKS VOR der Gruppierung (Niko 11.09.2026: "der Filter
   sollte aber immer vor der Gruppenzeile kommen. Davor, darueber").

   Aufbau 1:1 wie der Gruppierungsblock daneben (.wl-grp-ctl/.wl-grp-stack):
   Beschriftung ueber den Feldern, Felder auf der 30-px-Linie der Leiste.
   Die Felder selbst sind .fn-tb-sel bzw. das geteilte FlatDateRangeControl —
   hier steht NUR die Anordnung, keine eigene Feldoptik (FINCOMP001).
   ========================================================================= */

/* Abstaende 1:1 Vorschau (.fn-flt-ctl 8 px, .fn-flt-stack 3 px, Felder 8 px) - Auditor 13.09.2026 mass
   10 / 4 / 6 px. */
.fn-flt-ctl {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.fn-flt-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Waagerecht, ohne Umbruch: Passt die Zeile nicht, rollt die ganze Leiste
   (E14, Niko 12.09.2026 "horizontal scrollen!") - sie bricht nie um. */
.fn-flt-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}