/*
 * Watchlist-Modul (Phase A) — 1:1 nach Bauplan docs/finnavigator_watchlists_v1.html.
 * Präfix wl-. Nur var(--fn-*)-Tokens. Layout-Stabilität: table-layout fixed.
 */

.wl-page {
    display: flex;
    min-height: calc(100vh - 7rem);
    background: var(--fn-bg);
    border: var(--fn-border-width) solid var(--fn-border-strong);
    border-radius: var(--fn-radius-lg);
    overflow: hidden;
    font-family: var(--fn-font);
    color: var(--fn-text);
}

/* Feste Höhe wie im Bauplan (`.app { height: 100vh }`), Niko 03.10.2026: „Wenn man da was anklickt, springt das
   permanent hin und her". Mit bloßer Mindesthöhe wuchs die Seite mit dem Inhalt, gerollt wurde das Fenster, und
   beim Listenwechsel verschob der Browser es um bis zu 2.985 px (gemessen) — die angeklickte Zeile verließ das
   Bild. Jetzt rollt die Listen-Spalte für sich (`.wl-cat-list`) und die Arbeitsfläche als Ganzes; das Fenster
   bleibt stehen. Begrenzt auf die Watchlist: der Event Radar teilt die Klasse `.wl-page`, nicht die Kennung.
   53px = Kopfleiste der Shell; eine aufgezogene Protokoll-Leiste verkürzt die Seite, statt sie zu verdecken. */
#wl-page {
    height: calc(100vh - 7rem);
    /* Die Mindesthöhe aus `.wl-page` schlüge die Obergrenze (Auditor 03.10.2026) - hier aufgehoben. */
    min-height: 0;
    max-height: calc(100vh - 53px - var(--fn-log-panel-height, 0px));
}
/* Unterlisten-Zeilen ragen seit jeher über die Spalte hinaus (Bestand, eigene Aufgabe). Ohne diese Zeile stünde
   deshalb dauerhaft ein waagerechter Rollbalken am Spaltenfuß (UX-Designer 03.10.2026); abgeschnitten war der
   Überstand schon immer - die Spalte ist ziehbar. */
#wl-page .wl-cat-list { overflow-x: hidden; }
/* Ursache des Überstands: Die Zeile einer Unterliste durfte nicht schmaler werden als ihr Name; ab der zweiten
   Ebene ragte der Verwalten-Knopf deshalb über die Spaltenkante (gemessen 36 px) und war nicht erreichbar.
   Jetzt gibt der Name nach und bricht notfalls im Wort um. */
#wl-page .wl-cat-row > .wl-cat { min-width: 0; }
#wl-page .wl-cat-row > .wl-cat .wl-label { min-width: 0; overflow-wrap: anywhere; }
#wl-page > .wl-main { overflow-y: auto; }
/* Ohne das staucht die feste Höhe die Kinder (gemessen: Tabelle 0 von 6.943 px), statt sie rollen zu lassen. */
#wl-page > .wl-main > * { flex-shrink: 0; }
#wl-page > .wl-main > .wl-content { overflow-y: visible; }

.wl-page .lucide { stroke-width: 1.6; width: 18px; height: 18px; flex: 0 0 auto; }
.wl-page .lucide.small { width: 13px; height: 13px; }

/* ===== Listen-Spalte ===== */
/* Breite je Nutzer ziehbar (Niko 25.09.2026, A1b): die Seite setzt die Breite direkt an der Spalte (style),
   280px gilt nur, solange noch nichts gerendert ist. */
.wl-col-mid {
    width: 280px; flex: 0 0 auto;
    background: var(--fn-bg-muted);
    border-right: var(--fn-border-width) solid var(--fn-border);
    display: flex; flex-direction: column; overflow: hidden;
}
.wl-col-head { padding: 22px 20px 14px; border-bottom: var(--fn-border-width) solid var(--fn-border); }
.wl-col-head h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: var(--fn-font-weight-bold); margin: 0; }
.wl-col-head .wl-ico { display: flex; color: var(--fn-text-secondary); }
.wl-col-head .wl-sub { margin-top: 6px; font-size: 12px; color: var(--fn-text-tertiary); }

.wl-cat-list { padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wl-eyebrow {
    padding: 12px 12px 6px; font-size: 11px; font-weight: var(--fn-font-weight-bold);
    letter-spacing: .12em; text-transform: uppercase; color: var(--fn-text-tertiary);
}
.wl-cat-list > .wl-eyebrow:first-child { padding-top: 2px; }
/* Klappbare Gruppen-Ueberschrift (P4): gleiche Klapp-Mechanik + Farbakzent wie die Haupt-Nav
   (shell-nav.css .sn-group-h) — Primaerfarbe, Chevron rechts, sanftes Gleiten statt Schnappen. */
button.wl-eyebrow-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; cursor: pointer; text-align: left;
    color: var(--fn-primary); opacity: .5; transition: opacity .16s ease; user-select: none;
}
button.wl-eyebrow-toggle:hover { opacity: .75; }
button.wl-eyebrow-toggle.wl-open { opacity: 1; }
.wl-eyebrow-chev {
    margin-left: auto; width: 14px; height: 14px; color: var(--fn-primary); opacity: .55;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
}
button.wl-eyebrow-toggle.wl-open .wl-eyebrow-chev { opacity: 1; }
.wl-chev-closed { transform: rotate(-90deg); }
.wl-eyebrow-ico { width: 13px; height: 13px; opacity: .85; flex: 0 0 auto; }
.wl-cat {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: var(--fn-radius-sm); cursor: pointer; color: var(--fn-text-secondary);
    background: transparent; border: none; width: 100%; text-align: left;
    font-family: var(--fn-font); transition: background .16s, color .16s;
}
.wl-cat .wl-ico { display: flex; color: var(--fn-text-tertiary); }
.wl-cat:hover { background: var(--fn-bg-alt); color: var(--fn-text); }
.wl-cat.wl-active { background: var(--fn-accent-soft); color: var(--fn-text); }
.wl-cat.wl-active .wl-ico { color: var(--fn-primary); }
.wl-cat .wl-label { flex: 1; font-size: 13.5px; font-weight: var(--fn-font-weight-medium); }
.wl-cat .wl-count {
    font-family: var(--fn-font-mono); font-size: 11.5px; color: var(--fn-text-tertiary);
    background: var(--fn-bg); border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-pill); padding: 1px 9px; min-width: 26px; text-align: center;
}
.wl-cat.wl-active .wl-count { color: var(--fn-primary); border-color: var(--fn-accent-line); background: var(--fn-accent-soft); }

.wl-col-foot { padding: 12px; border-top: var(--fn-border-width) solid var(--fn-border); }
/* „Neue Watchlist" am Kopf der Spalte — immer sichtbar über der scrollenden Liste. */
.wl-col-new { padding: 12px 12px 4px; }

/* Inline-Umbenennen direkt in der Sidebar-Zeile (kein zentrierter Dialog mehr). */
.wl-cat-edit { cursor: default; background: transparent; gap: 8px; }
.wl-cat-edit:hover { background: transparent; }
.wl-rename-in {
    flex: 1; min-width: 0; padding: 5px 8px; border-radius: var(--fn-radius-sm);
    border: var(--fn-border-width) solid var(--fn-primary); background: var(--fn-input-bg);
    color: var(--fn-text); font: inherit; font-size: 12.5px; outline: none;
}
.wl-cat-ic {
    width: 26px; height: 26px; flex: 0 0 auto; border-radius: 6px;
    border: var(--fn-border-width) solid var(--fn-border); background: transparent;
    color: var(--fn-text-tertiary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.wl-cat-ic:hover { background: var(--fn-bg-muted); color: var(--fn-text); }
.wl-cat-ic.ok { color: var(--fn-primary); }
.wl-cat-ic .lucide { width: 14px; height: 14px; }
.wl-newlist {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--fn-font); font-size: 12.5px; font-weight: var(--fn-font-weight-medium);
    color: var(--fn-text-secondary); background: transparent;
    border: var(--fn-border-width) dashed var(--fn-border-strong);
    padding: 9px; border-radius: var(--fn-radius-sm); cursor: pointer;
    transition: color .16s, border-color .16s;
}
.wl-newlist:hover { color: var(--fn-primary); border-color: var(--fn-accent-line); }
.wl-newlist .lucide { width: 14px; height: 14px; }

/* ===== Arbeitsfläche ===== */
.wl-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.wl-crumb {
    padding: 14px 28px; border-bottom: var(--fn-border-width) solid var(--fn-border);
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fn-text-secondary);
}
.wl-crumb a { color: var(--fn-text-secondary); text-decoration: none; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.wl-crumb a:hover { background: var(--fn-bg-alt); color: var(--fn-text); }
.wl-crumb .wl-sep { color: var(--fn-text-tertiary); font-size: 14px; }
.wl-crumb .wl-here { color: var(--fn-text); padding: 3px 6px; font-weight: var(--fn-font-weight-medium); }

.wl-head {
    padding: 14px 18px; /* Standard-Listen-Bauplan 2 (Niko-Entscheidung 07.09.2026, vorher 20px 28px) */ border-bottom: var(--fn-border-width) solid var(--fn-border);
    /* 3 Zonen (Niko 21.06.2026): Titel links · Modus-Umschalter MITTIG · Tools rechts. Gleiche 1fr-Spalten
       links/rechts zentrieren die auto-breite Mitte über die volle Header-Breite. */
    /* Nachtrag 1.16 (Niko 10.09.2026, Vorschlag A der Vorschau "Watchlist-Kopf drei Zonen"): `1fr auto 1fr` liess die
       linke Spalte bei 1600px auf 0px kollabieren (gemessen 07.09.2026: 0px 381px 481px), die Statistik lag unter dem
       Umschalter. Links mindestens so breit wie ihr Inhalt, rechts darf schrumpfen - die Mitte bleibt zentriert. */
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center;
    /* ZURUECKGENOMMEN 10.09.2026 16:41 (Live-Messung fin-test, watchlist-kopf-drei-zonen.e2e.py): Vorschlag A verdraengte
       Umschalter und Werkzeuge aus dem Kopf, weil die linke Zone 743px max-content braucht, der Kopf bei offenen
       Seitenleisten aber nur 714px hat. Die drei Zonen passen dort nicht in eine Zeile - Entscheidung bei Niko. */
}
.wl-head-l { justify-self: start; min-width: 0; }
.wl-head > .wl-modewrap { justify-self: center; }
.wl-head-r { justify-self: end; }
.wl-head-l h1 {
    font-size: 22px; font-weight: var(--fn-font-weight-bold); letter-spacing: -.01em;
    display: flex; align-items: center; gap: 12px; margin: 0 0 6px 0; white-space: nowrap;
}
.wl-head-l h1 .wl-list-ico { display: flex; color: var(--fn-cat-blue); }
.wl-head-l h1 .wl-sym-ex {
    font-family: var(--fn-font-mono); font-size: 13px; font-weight: var(--fn-font-weight-regular);
    color: var(--fn-text-secondary); background: var(--fn-bg-alt);
    border: var(--fn-border-width) solid var(--fn-border); padding: 3px 9px; border-radius: 6px;
}
/* Ansichts-Modus-Umschalter Liste ↔ Analyse (Variante A, Niko 20.06.2026) — prominenter Segment-Schalter
   beim Titel statt versteckter Button neben "Spalten". Nur --fn-* Tokens. */
.wl-title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 6px 0; }
.wl-title-row h1 { margin: 0; }
.wl-mode {
    display: inline-flex; background: var(--fn-bg-alt);
    border: var(--fn-border-width) solid var(--fn-border-strong); border-radius: 9px; overflow: hidden;
}
.wl-mode-tab {
    display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px;
    font-weight: var(--fn-font-weight-medium); color: var(--fn-text-secondary);
    background: none; border: 0; padding: 7px 14px; cursor: pointer;
}
.wl-mode-tab .lucide { width: 15px; height: 15px; }
.wl-mode-tab:hover { color: var(--fn-text); }
.wl-mode-tab.wl-mode-on { background: var(--fn-primary); color: var(--fn-on-primary); font-weight: var(--fn-font-weight-bold); }

/* (i)-Komponenten-Info (KONZEPT-Watchlist-Regime-Header-Info) — Switcher + (i) in EINEM Wrapper.
   Stile der Shared-Komponente FnComponentInfo bewusst GLOBAL (kein CSS-Isolation, da der Popover-Inhalt
   vom Aufrufer kommt); bei Wiederverwendung auf anderen Seiten in ein app-weites Stylesheet heben. tokens-only. */
.wl-modewrap { display: inline-flex; align-items: center; gap: 8px; position: relative; }

.fci { position: relative; display: inline-flex; }
/* (i)-Button: scoped bei FnComponentInfo (FnComponentInfo.razor.css). */

.fci-backdrop { position: fixed; inset: 0; z-index: 60; }
.fci-panel {
    position: absolute; top: calc(100% + 10px); right: 0; width: 430px; max-width: 92vw; z-index: 61;
    background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border-strong);
    border-radius: var(--fn-radius-lg); box-shadow: var(--fn-shadow-hover); overflow: hidden;
}
.fci-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: var(--fn-border-width) solid var(--fn-border); }
.fci-ic {
    width: 30px; height: 30px; border-radius: var(--fn-radius-sm); background: var(--fn-accent-soft);
    color: var(--fn-primary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.fci-ic .lucide { width: 16px; height: 16px; }
.fci-head h4 { margin: 0; font-size: 14px; flex: 1; }
.fci-x { margin-left: auto; color: var(--fn-text-tertiary); cursor: pointer; background: none; border: none; padding: 0; display: inline-flex; }
.fci-x .lucide { width: 16px; height: 16px; }
.fci-x:hover { color: var(--fn-text); }

.fci-body { padding: 6px 0 8px; max-height: 420px; overflow: auto; }
.fci-sec { border-bottom: var(--fn-border-width) solid var(--fn-border); }
.fci-sec summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 16px; font-size: 13px; font-weight: var(--fn-font-weight-bold); color: var(--fn-text); }
.fci-sec summary::-webkit-details-marker { display: none; }
.fci-sec summary .lucide { width: 15px; height: 15px; flex: 0 0 auto; color: var(--fn-text-tertiary); }
.fci-chev { margin-left: auto; color: var(--fn-text-tertiary); transition: transform .15s; display: inline-flex; }
.fci-sec[open] summary .fci-chev { transform: rotate(90deg); }
.fci-c { padding: 0 16px 13px 40px; font-size: 12.5px; color: var(--fn-text-secondary); }
.fci-mini { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fci-dim { color: var(--fn-text-tertiary); }
.fci-strat { color: var(--fn-primary); }
.fci-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.fci-sw-calm { background: var(--fn-success); }
.fci-sw-neu { background: var(--fn-warning); }
.fci-sw-stress { background: var(--fn-danger); }
.fci-bar { height: 6px; border-radius: var(--fn-radius-pill); background: var(--fn-bg); position: relative; flex: 1; max-width: 150px; display: inline-block; }
.fci-bar-you { position: absolute; left: 0; top: 0; height: 6px; border-radius: var(--fn-radius-pill); background: var(--fn-text-tertiary); width: 30%; }
.fci-bar-st { position: absolute; left: 0; top: 0; height: 6px; border-radius: var(--fn-radius-pill); background: var(--fn-primary); width: 80%; opacity: .9; }
.fci-foot { padding: 11px 16px; font-size: 11.5px; color: var(--fn-text-tertiary); background: var(--fn-bg); border-top: var(--fn-border-width) solid var(--fn-border); }
.fci-foot code { font-family: var(--fn-font-mono); font-size: 12px; color: var(--fn-text-secondary); }

.wl-kpi-row { display: flex; gap: 22px; flex-wrap: wrap; }
.wl-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.wl-kpi .k {
    font-size: 10.5px; font-weight: var(--fn-font-weight-bold); letter-spacing: .10em;
    text-transform: uppercase; color: var(--fn-text-tertiary);
}
.wl-kpi .v { font-family: var(--fn-font-mono); font-size: 15px; color: var(--fn-text); white-space: nowrap; }
.wl-kpi .v.pos { color: var(--fn-success); }
.wl-kpi .v.neg { color: var(--fn-danger); }

.wl-head-r { display: flex; align-items: center; gap: 10px; }
/* Primär-Toolbar: Suche wächst nicht unkontrolliert, feste Obergrenze. */
.wl-head-r .wl-head-search { flex: 0 1 240px; margin: 0; }
/* Kopf-Buttons: geteilte fn-btn-Optik (fn-buttons.css, FINCOMP001). */

.wl-content { overflow-y: auto; padding: 22px 28px; display: flex; flex-direction: column; gap: 18px; }
.wl-loading { padding: 28px; color: var(--fn-text-secondary); font-size: 13.5px; }

.wl-enrichment-overlay {
  position: absolute;
  top: 44px;
  right: 24px;
  z-index: 4;
  pointer-events: none;
}

.wl-panel {
    background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-lg); overflow: hidden;
}
.wl-panel-h {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: var(--fn-border-width) solid var(--fn-border);
}
.wl-panel-h h3 { font-size: 14px; font-weight: var(--fn-font-weight-bold); display: flex; align-items: center; gap: 9px; margin: 0; }
.wl-panel-h .wl-ico { display: flex; color: var(--fn-text-secondary); }
/* Tabellen-Sub-Toolbar: sekundäre, tabellennahe Aktionen (Import/Export · Spalten) + Sync rechtsbündig. */
.wl-panel-actions { display: inline-flex; align-items: center; gap: 8px; }
.wl-tbl-act {
    width: 30px; height: 30px; flex: none; border-radius: var(--fn-radius-sm);
    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;
}
.wl-tbl-act:hover { background: var(--fn-bg-muted); color: var(--fn-text); border-color: var(--fn-border-strong); }
.wl-tbl-act.active { background: var(--fn-accent-soft); color: var(--fn-primary); border-color: var(--fn-accent-line); }
.wl-tbl-act:focus-visible { outline: none; box-shadow: var(--fn-focus-ring); }
.wl-tbl-act .lucide,
.wl-tbl-act .fn-icon { width: 15px; height: 15px; }

/* Ziehbare Spaltenbreiten (pro User, global fürs Grid — DialogLayoutService + fn-grid-resize.js).
   Bewusst KEIN table-layout: fixed: die Marker-Spalte (viele Icon-Buttons) darf nicht abgeschnitten
   werden; die <col>-Breiten wirken im Auto-Layout als bevorzugte Breite. */
.wl-items-sizable th { position: relative; }
.wl-col-rz {
    position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
    cursor: col-resize; z-index: 3; touch-action: none;
}
.wl-col-rz::after {
    content: ""; position: absolute; top: 6px; bottom: 6px; left: 3px; width: 2px;
    border-radius: 2px; background: var(--fn-border-strong); opacity: .55;
    transition: background .12s ease, opacity .12s ease;
}
.wl-col-rz:hover::after, .wl-col-rz:focus-visible::after { background: var(--fn-primary); opacity: 1; }
.wl-col-rz:focus-visible { outline: none; }
.wl-eyebrow-inline {
    font-size: 11px; font-weight: var(--fn-font-weight-bold); letter-spacing: .08em;
    text-transform: uppercase; color: var(--fn-text-tertiary); margin-left: 6px;
}
/* Freitext-Suche: geteilt über .fn-search (fn-list.css). */
.wl-actions { display: flex; gap: 8px; }

/* ===== Wertpapier-Tabelle — Doppelzeilen-Layout (Flatex-Vorbild) ===== */
/* Feste Benutzerbreiten: Zahlen bleiben ungekürzt; bei wenig Platz scrollt der Wrapper
   horizontal, statt Spalten abhängig vom Listeninhalt neu zu quetschen. */
/* Waagerechter Scrollbereich der Titel-Tabelle.
   BEFUND 25.08.2026: Gemessen auf fin-test war der Bereich zwar scrollbar
   (scrollWidth 1502 > clientWidth), aber KEINE Kopf- oder Datenzelle schnitt ihren Inhalt ab —
   die Spaltenbreiten sind richtig. Sichtbar war trotzdem ein Kopf "TR…" und Werte wie "-10,"
   ohne Nachkommastellen: Der Bereich lief ueber, ohne das anzuzeigen. Es fehlte kein Platz,
   es fehlte der HINWEIS. Eine geratene Spaltenbreite haette den Fehler nur verschoben (R6).

   Loesung ohne JavaScript: zwei Verlaeufe, von denen der rechte verschwindet, sobald das Ende
   erreicht ist (background-attachment: local blendet die Schatten am jeweiligen Rand aus). */
.wl-items-scroll {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--fn-bg-alt) 30%, transparent) left center / 24px 100% no-repeat local,
        linear-gradient(to left,  var(--fn-bg-alt) 30%, transparent) right center / 24px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .28), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .28), transparent) right center / 14px 100% no-repeat scroll;
}
table.wl-items-sizable { table-layout: fixed; }

/* Gruppierung-Umschalten ("Nicht gruppieren" ↔ "Gruppieren"): die Kopfzeile lebt strukturell IMMER an
   derselben Stelle im DOM (headerRow(TypeGroup?) in WatchlistItemsTable.razor) — nur ihr Inhalt wechselt
   zwischen globaler Kopfzeile und Gruppen-Kennzahlenzeile. Dadurch entfällt jedes Ein-/Ausblenden dieser
   Zeile und damit auch der Bedarf für eine Übergangs-Animation (Niko 25.07.2026: ein Fade-Versuch dafür
   wurde als unprofessionell verworfen; kein Wechsel ist einfacher und robuster als jeder Fade). */
/* Tabellen-/Stack-/Identitäts-/Delta-Visual kommt aus dem geteilten fn-list.css (Manifest §11).
   Hier nur Watchlist-Spezifika: Spaltenbreiten, Sortier-Buttons, Instrumenttyp-Label. */
table.wl-items th.badge-col { width: 58px; }
/* Kein min-width auf der Ereignis-Zelle: die Tabelle ist `table-layout: fixed`, die Spaltenbreite kommt
   ausschließlich aus dem colgroup (ColSpec["event"]). Die frühere Regel war wirkungslos und widersprach
   der dortigen Mindestbreite (Auditbefund 28.07.2026). */
table.wl-items th.marker-col { width: 320px; }
table.wl-items col.wl-col-badge { width: 58px; }
table.wl-items col.wl-col-marker { width: 320px; }
table.wl-items col.wl-col-item-note { width: 300px; }
.wl-items .wl-item-note {
    color: var(--fn-text-secondary);
    font-size: var(--fn-font-size-xs);
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wl-item-note-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--fn-space-2);
    align-items: start;
}

.wl-item-note-layout .fn-richtext-content {
    font-size: inherit;
    line-height: inherit;
}

.wl-item-note-empty {
    color: var(--fn-text-tertiary);
    font-style: italic;
}

/* Sortier-Buttons: geteilt über .fn-sort (fn-list.css). */

.wl-typ { font-size: 11.5px; color: var(--fn-text-secondary); }
.wl-typ.lever { color: var(--fn-cat-orange); }

/* Marker icons moved to the shared fn-markers.css component (.fn-markers / .fn-marker). */

/* ===== Notiz-Panel ===== */
.wl-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.wl-detail-col { padding: 16px 18px; }
.wl-detail-col + .wl-detail-col { border-left: var(--fn-border-width) solid var(--fn-border); }
.wl-detail-col h4 {
    font-size: 12px; font-weight: var(--fn-font-weight-bold); letter-spacing: .08em;
    text-transform: uppercase; color: var(--fn-text-tertiary);
    margin: 0 0 10px 0; display: flex; align-items: center; gap: 8px;
}
.wl-detail-col h4 .lucide { width: 14px; height: 14px; }
.wl-note-meta { font-size: 11px; color: var(--fn-success); margin-top: 8px; }
.wl-ai-hint {
    border: var(--fn-border-width) solid var(--fn-border); border-left: 3px solid var(--fn-cat-purple);
    background: var(--fn-cat-purple-soft); border-radius: var(--fn-radius-sm);
    padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--fn-text-secondary);
}

.wl-checkbox { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fn-text); text-transform: none; letter-spacing: 0; }

/* Notiz im schwebenden Fenster — Inhalt füllt das Fenster (Resize-Fix),
   Speichern/Abbrechen UNTEN (Niko 05.06.2026). */
.wl-note-host { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.wl-note-actions { justify-content: flex-end; flex: 0 0 auto; }
.wl-note-host .wl-detail-grid {
    border: var(--fn-border-width) solid var(--fn-border); border-radius: var(--fn-radius);
    flex: 1 1 auto; min-height: 0;
    /* Die EINE Grid-Zeile darf nicht über den Rahmen wachsen (implizit waere sie 'auto'):
       lange Notizen scrollen dann IM Editor statt unter Rahmen + Buttons durchzulaufen. */
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}
.wl-note-grid .wl-detail-col { display: flex; flex-direction: column; min-height: 0; }
.wl-note-editor-col .fn-richtext { flex: 1 1 auto; min-height: 160px; }
.wl-note-grid .wl-ai-hint { flex: 1 1 auto; overflow-y: auto; }

/* ===== Slice 2: Dialoge "Neue Watchlist" + "Wertpapier hinzufuegen" =====
   1:1 nach Bauplan docs/finnavigator_watchlist_add_security_v1.html:
   Standard-Icons oben (Fensterkopf), Aktions-Buttons unten, Inhalt waechst mit. */

.wl-dlg {
    display: flex; flex-direction: column;
    margin: -16px -18px; height: calc(100% + 32px); /* Fensterkoerper-Polster aufheben */
}
.wl-dlg-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
}
.wl-dlg-foot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-top: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-bg-muted);
}
.wl-opposite-foot {
    justify-content: flex-end;
}
.wl-opposite-action {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: var(--fn-radius-sm);
    font-size: 14px;
    font-weight: 700;
    gap: 9px;
}
.wl-opposite-action .lucide {
    width: 16px;
    height: 16px;
}
.wl-dlg-spacer { flex: 1; }
.wl-dlg-count {
    font-size: 12px; color: var(--fn-text-secondary);
    display: inline-flex; align-items: center; gap: 7px;
}
.wl-dlg-count .lucide { width: 14px; height: 14px; color: var(--fn-primary); }
.wl-dlg-status { font-size: 12px; color: var(--fn-success); }
.wl-dlg-error { font-size: 12px; color: var(--fn-danger); }
.wl-dlg-ok { font-size: 12px; color: var(--fn-success); margin-top: 4px; }
.wl-dlg-warn {
    display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--fn-text-secondary);
    background: var(--fn-bg-muted); border: 1px solid var(--fn-border); border-left: 3px solid var(--fn-warning);
    border-radius: 8px; padding: 9px 12px; margin-bottom: 8px;
}
.wl-import-actions {
    flex: 0 0 auto;
    padding: 12px 18px;
    background: var(--fn-bg-muted);
}

.wl-export-dialog {
    margin: -16px -18px;
    height: calc(100% + 32px);
}

.wl-export-body {
    gap: 18px;
    padding: 22px 22px 18px;
}

.wl-export-section {
    display: grid;
    gap: 10px;
}

.wl-export-section h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
    font-weight: var(--fn-font-weight-bold);
    color: var(--fn-text);
}

.wl-export-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.wl-export-format-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wl-export-choice {
    position: relative;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
    color: var(--fn-text-secondary);
    font-size: 12.5px;
    font-weight: var(--fn-font-weight-medium);
    cursor: pointer;
}

.wl-export-choice:hover {
    border-color: var(--fn-border-strong);
    background: var(--fn-hover);
    color: var(--fn-text);
}

.wl-export-choice.active {
    border-color: var(--fn-accent-line);
    background: var(--fn-accent-soft);
    color: var(--fn-text);
}

.wl-export-choice.disabled {
    opacity: .45;
    cursor: not-allowed;
}

.wl-export-choice input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--fn-primary);
    flex: 0 0 auto;
}

.wl-export-choice span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-export-choice-compact {
    min-width: 116px;
    justify-content: flex-start;
}

.wl-export-combo {
    height: 34px;
}

.wl-export-actions {
    flex: 0 0 auto;
    padding: 16px 22px;
    background: var(--fn-bg-muted);
}

.wl-export-action {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
}

.wl-export-action-primary {
    min-width: 116px;
    justify-content: center;
}

/* Formularzeilen/-felder: geteilte fn-form-row/fn-field-Optik (fn-forms.css). */
.wl-hint { font-size: 11.5px; color: var(--fn-text-tertiary); line-height: 1.55; }
.wl-import-options {
    display: grid;
    gap: 7px;
}
.wl-import-summary {
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-muted);
    color: var(--fn-text-secondary);
    font-size: 12px;
}

/* Watchliste importieren: 1:1-Freigabestand VORSCHAU-Watchlist-Import-Dialog.html. */
.fn-window:has(.wl-import-dialog) {
    min-width: 720px;
    min-height: 680px;
}

.fn-window-body:has(> .wl-import-dialog) {
    padding: 0;
    overflow: hidden;
}

.wl-import-dialog {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: var(--fn-text);
    font-family: var(--fn-font);
}

.wl-import-dialog * {
    scrollbar-color: var(--fn-border-strong) var(--fn-bg-muted);
    scrollbar-width: thin;
}

.wl-import-dialog *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.wl-import-dialog *::-webkit-scrollbar-track {
    background: var(--fn-bg-muted);
}

.wl-import-dialog *::-webkit-scrollbar-thumb {
    background: var(--fn-border-strong);
    border: 2px solid var(--fn-bg-muted);
    border-radius: var(--fn-radius-pill);
}

.wl-import-dialog *::-webkit-scrollbar-thumb:hover {
    background: var(--fn-text-tertiary);
}

.wl-import-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    overflow: hidden;
    padding: 16px 18px 14px;
}

.wl-import-grid {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    min-height: 0;
}

.wl-import-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-muted);
    overflow: hidden;
}

.wl-import-target-section {
    overflow: visible;
}

.wl-import-section-head {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.wl-import-section-head h2 {
    margin: 0;
    color: var(--fn-text-tertiary);
    font-size: 11.5px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-import-section-body {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    min-height: 0;
}

.wl-import-preview-body {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.wl-import-choice-list {
    display: grid;
    gap: 7px;
}

.wl-import-choice {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
    color: var(--fn-text);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

.wl-import-choice:hover,
.wl-import-choice:focus-within {
    background: var(--fn-hover);
    border-color: var(--fn-border-strong);
}

.wl-import-choice.wl-import-choice-current {
    border-color: var(--fn-accent-line);
}

.wl-import-choice input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--fn-primary);
    flex: 0 0 auto;
}

.wl-import-choice span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wl-import-row {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.wl-import-caption,
.wl-import-row > label:not(.wl-import-choice) {
    color: var(--fn-text-tertiary);
    font-size: 10.5px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-import-value,
.wl-import-combo-button {
    height: 34px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 11px;
    border: var(--fn-border-width) solid var(--fn-input-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-input-bg);
    color: var(--fn-text);
    font-family: var(--fn-font);
    font-size: 12.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wl-import-value:disabled,
.wl-import-combo.wl-import-combo-disabled .wl-import-combo-button {
    color: var(--fn-text-tertiary);
    opacity: .66;
}

.wl-import-combo {
    position: relative;
}

.wl-import-combo-button {
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.wl-import-combo-button:focus-visible,
.wl-import-value:focus {
    outline: none;
    border-color: var(--fn-accent-line);
    box-shadow: var(--fn-focus-ring);
}

.wl-import-combo-button span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wl-import-combo-button .lucide {
    width: 16px;
    height: 16px;
    flex: none;
}

.wl-import-combo-menu {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 326px;
    overflow: auto;
    padding: 5px;
    border: var(--fn-border-width) solid var(--fn-border-strong);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
    box-shadow: var(--fn-elevation-3);
}

.wl-import-combo.wl-import-combo-open .wl-import-combo-menu {
    display: grid;
    gap: 2px;
}

.wl-import-combo-option {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fn-text);
    cursor: pointer;
    font-family: var(--fn-font);
    font-size: 12.5px;
    text-align: left;
    white-space: nowrap;
}

.wl-import-combo-option:hover,
.wl-import-combo-option.wl-import-combo-option-current {
    background: var(--fn-hover);
}

.wl-import-note {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
    color: var(--fn-text-secondary);
    font-size: 12px;
}

.wl-import-note.wl-import-note-dimmed {
    color: var(--fn-text-secondary);
}

.wl-import-note .lucide {
    width: 16px;
    height: 16px;
    color: var(--fn-text-secondary);
    flex: none;
}

.wl-import-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.wl-import-mode {
    gap: 6px;
    padding: 5px 6px;
    font-size: 11px;
}

.wl-import-mode input[type="radio"] {
    width: 14px;
    height: 14px;
}

.wl-import-mode-wide {
    grid-column: span 2;
}

.wl-import-preview-head {
    display: grid;
    grid-template-columns: 82px 92px 82px 92px auto;
    gap: 8px;
    align-items: stretch;
}

.wl-import-metric {
    min-height: 48px;
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
}

.wl-import-metric small {
    color: var(--fn-text-tertiary);
    font-size: 10px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-import-metric b {
    font-family: var(--fn-font-mono);
    font-size: 13px;
}

.wl-import-preview-action {
    height: 48px;
    min-width: 108px;
    padding: 0 13px;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--fn-font-weight-bold);
}

.wl-import-preview-action .lucide {
    width: 16px;
    height: 16px;
}

.wl-import-rule {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: var(--fn-border-width) solid var(--fn-warning);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-warning-soft);
    color: var(--fn-warning);
    font-size: 12px;
}

.wl-import-rule.wl-import-rule-dimmed {
    border-color: var(--fn-border);
    background: var(--fn-bg-alt);
    color: var(--fn-text-secondary);
}

.wl-import-rule .lucide {
    width: 16px;
    height: 16px;
    flex: none;
}

.wl-import-table-wrap {
    min-height: 0;
    overflow: auto;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
}

.wl-import-table-wrap table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
}

.wl-import-table-wrap th,
.wl-import-table-wrap td {
    height: 24px;
    padding: 4px 8px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
    color: var(--fn-text);
    font-size: 12.5px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-import-table-wrap th {
    height: 30px;
    background: var(--fn-bg-muted);
    color: var(--fn-text-secondary);
    font-size: 10.5px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-import-table-wrap tr:last-child td {
    border-bottom: 0;
}

.wl-import-table-wrap .num {
    text-align: right;
    font-family: var(--fn-font-mono);
}

.wl-import-table-wrap th:nth-child(1),
.wl-import-table-wrap td:nth-child(1) { width: 118px; }
.wl-import-table-wrap th:nth-child(2),
.wl-import-table-wrap td:nth-child(2) { width: 250px; }
.wl-import-table-wrap th:nth-child(3),
.wl-import-table-wrap td:nth-child(3) { width: 118px; }
.wl-import-table-wrap th:nth-child(4),
.wl-import-table-wrap td:nth-child(4) { width: 86px; }
.wl-import-table-wrap th:nth-child(5),
.wl-import-table-wrap td:nth-child(5) { width: 190px; }
.wl-import-table-wrap th:nth-child(6),
.wl-import-table-wrap td:nth-child(6),
.wl-import-table-wrap th:nth-child(7),
.wl-import-table-wrap td:nth-child(7),
.wl-import-table-wrap th:nth-child(8),
.wl-import-table-wrap td:nth-child(8) { width: 82px; }

.wl-import-status-ok {
    color: var(--fn-success) !important;
}

.wl-import-status-new {
    color: var(--fn-primary) !important;
}

.wl-import-status-warn {
    color: var(--fn-warning) !important;
}

.wl-import-empty {
    color: var(--fn-text-secondary) !important;
}

.wl-import-file-panel {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-muted);
}

.wl-import-file-zone {
    min-height: 52px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: var(--fn-border-width) dashed var(--fn-border-strong);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-input-bg);
    color: var(--fn-text-secondary);
    cursor: pointer;
}

.wl-import-file-zone.drag-over {
    border-color: var(--fn-primary);
    background: var(--fn-accent-soft);
}

.wl-import-file-zone input[type=file] {
    display: none;
}

.wl-import-file-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--fn-border-width) solid var(--fn-accent-line);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-accent-soft);
    color: var(--fn-primary);
}

.wl-import-file-icon .lucide {
    width: 16px;
    height: 16px;
}

.wl-import-file-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.wl-import-file-main {
    color: var(--fn-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-import-file-sub {
    color: var(--fn-text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-import-file-action {
    height: 34px;
    min-width: 108px;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--fn-font-weight-bold);
}

.wl-import-foot {
    flex: 0 0 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px;
    border-top: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-bg-muted);
}

.wl-import-foot-status {
    min-width: 0;
    overflow: hidden;
    color: var(--fn-text-secondary);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wl-import-foot-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.wl-import-action {
    height: 42px;
    min-width: 126px;
    justify-content: center;
    padding: 0 18px;
    border-radius: var(--fn-radius-sm);
    font-size: 14px;
    font-weight: var(--fn-font-weight-bold);
    gap: 9px;
}

.wl-import-action .lucide {
    width: 16px;
    height: 16px;
}

/* Watchliste exportieren: 1:1-Freigabestand VORSCHAU-Watchlist-Export-Dialog.html. */
.fn-window-body:has(> .wl-export-dialog) {
    padding: 0;
    overflow: hidden;
}

.wl-export-dialog {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-family: var(--fn-font);
    color: var(--fn-text);
}

.wl-export-dialog * {
    scrollbar-color: var(--fn-border-strong) var(--fn-bg-muted);
    scrollbar-width: thin;
}

.wl-export-dialog *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.wl-export-dialog *::-webkit-scrollbar-track {
    background: var(--fn-bg-muted);
}

.wl-export-dialog *::-webkit-scrollbar-thumb {
    background: var(--fn-border-strong);
    border: 2px solid var(--fn-bg-muted);
    border-radius: var(--fn-radius-pill);
}

.wl-export-dialog *::-webkit-scrollbar-thumb:hover {
    background: var(--fn-text-tertiary);
}

.wl-export-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px 18px 18px;
}

.wl-export-grid {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    height: 100%;
    min-height: 0;
}

.wl-export-right-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

.wl-export-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-muted);
    overflow: hidden;
}

.wl-export-section-head {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.wl-export-section-head h2 {
    margin: 0;
    color: var(--fn-text-tertiary);
    font-size: 11.5px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-export-section-body {
    display: grid;
    gap: 10px;
    padding: 10px;
    min-height: 0;
}

.wl-export-choice-list {
    display: grid;
    gap: 7px;
}

.wl-export-choice {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
    color: var(--fn-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.wl-export-choice:hover,
.wl-export-choice:focus-within {
    background: var(--fn-hover);
    border-color: var(--fn-border-strong);
}

.wl-export-choice input[type="radio"],
.wl-export-combo-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--fn-primary);
    flex: 0 0 auto;
}

.wl-export-row {
    display: grid;
    gap: 6px;
}

.wl-export-caption,
.wl-export-row > label:not(.wl-export-choice) {
    color: var(--fn-text-tertiary);
    font-size: 10.5px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-export-value {
    height: 34px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 11px;
    border: var(--fn-border-width) solid var(--fn-input-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-input-bg);
    color: var(--fn-text);
    font-family: var(--fn-font);
    font-size: 12.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

input.wl-export-value {
    outline: none;
}

input.wl-export-value:focus {
    border-color: var(--fn-accent-line);
    box-shadow: var(--fn-focus-ring);
}

.wl-export-combo {
    position: relative;
}

.wl-export-combo-button {
    height: 34px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    border: var(--fn-border-width) solid var(--fn-input-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-input-bg);
    color: var(--fn-text);
    cursor: pointer;
    font-family: var(--fn-font);
    font-size: 12.5px;
}

.wl-export-combo-button:focus-visible {
    outline: none;
    box-shadow: var(--fn-focus-ring);
}

.wl-export-combo-button span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wl-export-combo-button .lucide {
    width: 16px;
    height: 16px;
    flex: none;
}

.wl-export-combo-menu {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    min-width: 520px;
    max-width: min(720px, calc(100vw - 48px));
    max-height: 340px;
    overflow: auto;
    padding: 5px;
    border: var(--fn-border-width) solid var(--fn-border-strong);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
    box-shadow: var(--fn-elevation-3);
}

.wl-export-combo.open .wl-export-combo-menu {
    display: grid;
    gap: 2px;
}

.wl-export-combo-option {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 7px;
    border-radius: 8px;
    cursor: pointer;
}

.wl-export-combo-option:hover {
    background: var(--fn-hover);
}

.wl-export-combo-option span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wl-export-combo-option small {
    margin-left: auto;
    color: var(--fn-text-tertiary);
    font-family: var(--fn-font-mono);
    font-size: 11px;
}

.wl-export-format-row {
    display: grid;
    grid-template-columns: repeat(2, 92px);
    gap: 8px;
}

.wl-export-backup-format {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: var(--fn-border-width) solid var(--fn-accent-line);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-accent-soft);
    color: var(--fn-primary);
    font-weight: var(--fn-font-weight-bold);
}

.wl-export-backup-format .lucide {
    width: 16px;
    height: 16px;
}

.wl-export-metrics {
    display: grid;
    grid-template-columns: 82px 92px 92px 82px;
    gap: 8px;
    justify-content: start;
}

.wl-export-metric {
    min-height: 44px;
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
}

.wl-export-metric small {
    color: var(--fn-text-tertiary);
    font-size: 10px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-export-metric b {
    font-family: var(--fn-font-mono);
    font-size: 13px;
}

.wl-export-table-wrap {
    overflow: auto;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
}

.wl-export-table-wrap table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

.wl-export-table-wrap th,
.wl-export-table-wrap td {
    padding: 8px 10px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
}

.wl-export-table-wrap th {
    background: var(--fn-bg-muted);
    color: var(--fn-text-secondary);
    font-size: 10.5px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-export-table-wrap tr:last-child td {
    border-bottom: 0;
}

.wl-export-table-wrap th:nth-child(1),
.wl-export-table-wrap td:nth-child(1) {
    width: 126px;
}

.wl-export-table-wrap th:nth-child(2),
.wl-export-table-wrap td:nth-child(2) {
    width: 210px;
}

.wl-export-table-wrap th:nth-child(3),
.wl-export-table-wrap td:nth-child(3) {
    width: 68px;
}

.wl-export-table-wrap th:nth-child(4),
.wl-export-table-wrap td:nth-child(4) {
    width: 70px;
}

.wl-export-table-wrap .num {
    text-align: right;
    font-family: var(--fn-font-mono);
}

.wl-export-ok {
    color: var(--fn-success);
}

.wl-export-directory {
    display: grid;
    gap: 7px;
    padding: 9px 10px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-alt);
}

.wl-export-directory-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wl-export-path-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 6px;
    align-items: center;
}

.wl-export-dir-action {
    height: 34px;
    min-height: 34px;
    min-width: 34px;
    width: 34px;
    padding: 0;
    justify-content: center;
    color: var(--fn-text-secondary);
}

.wl-export-dir-action .lucide {
    width: 16px;
    height: 16px;
}

.wl-export-foot {
    min-height: 67px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-top: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-bg-muted);
}

.wl-export-foot-status {
    min-width: 0;
    color: var(--fn-text-tertiary);
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wl-export-foot-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: none;
}

.wl-export-action {
    height: 42px;
    min-height: 42px;
    min-width: 120px;
    padding: 0 18px;
    border-radius: var(--fn-radius-sm);
    font-size: 14px;
    font-weight: var(--fn-font-weight-bold);
    gap: 8px;
}

.wl-export-action .lucide {
    width: 16px;
    height: 16px;
}

@media (max-width: 760px) {
    .wl-export-grid {
        grid-template-columns: 1fr;
    }

    .wl-export-metrics {
        grid-template-columns: repeat(2, 92px);
    }

    .wl-export-path-picker {
        grid-template-columns: 1fr;
    }

    .wl-export-foot {
        align-items: stretch;
        flex-direction: column;
    }

    .wl-export-foot-actions {
        width: 100%;
        margin-left: 0;
    }
}

/* Katalog-Suche (hervorgehobener Fokus-Rahmen wie im Bauplan) */
.wl-dlg-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--fn-input-bg);
    border: var(--fn-border-width) solid var(--fn-accent-line); border-radius: var(--fn-radius-sm);
    padding: 8px 12px; color: var(--fn-text-tertiary);
    box-shadow: 0 0 0 3px var(--fn-accent-soft);
}
.wl-dlg-search input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--fn-text); font-family: var(--fn-font); font-size: 13px;
}
.wl-dlg-search .lucide { width: 15px; height: 15px; }

/* Trefferliste */
.wl-dlg-results {
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm); overflow: hidden auto; max-height: 320px;
}
.wl-dlg-table { table-layout: fixed; }
.wl-dlg-table .check-col { width: 40px; }
.wl-dlg-table .source-col { width: 120px; }
.wl-dlg-table tbody tr { cursor: pointer; }
.wl-dlg-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--fn-primary); }
.wl-dlg-table tr.wl-sel td { background: var(--fn-accent-soft); }
.wl-dlg-table tr.wl-dim td { opacity: .45; cursor: default; }
.wl-dlg-current {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-muted);
}
.wl-dlg-current span {
    color: var(--fn-text-secondary);
    font-family: var(--fn-font-mono);
    font-size: 12px;
}
.wl-already { font-size: 11px; color: var(--fn-text-tertiary); font-style: italic; }

.wl-src-badge {
    font-size: 10.5px; font-weight: var(--fn-font-weight-bold); letter-spacing: .06em;
    text-transform: uppercase; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.wl-src-import {
    color: var(--fn-cat-teal); background: var(--fn-cat-teal-soft);
    border: var(--fn-border-width) solid var(--fn-cat-teal-line, rgba(45, 212, 191, .3));
}
.wl-src-catalog {
    color: var(--fn-cat-purple); background: var(--fn-cat-purple-soft);
    border: var(--fn-border-width) solid var(--fn-cat-purple-line, rgba(167, 139, 250, .3));
}

/* Symbol-Auswahl (Neue Watchlist) */
.wl-icon-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-icon-pick {
    width: 38px; height: 38px; border-radius: var(--fn-radius-sm);
    background: var(--fn-input-bg); border: var(--fn-border-width) solid var(--fn-border);
    color: var(--fn-text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .14s, color .14s, border-color .14s;
}
.wl-icon-pick:hover { border-color: var(--fn-border-strong); color: var(--fn-text); }
.wl-icon-pick.active {
    background: var(--fn-accent-soft); border-color: var(--fn-accent-line); color: var(--fn-primary);
}

/* Live-Vorschau: so erscheint die Liste links in der Listen-Spalte */
.wl-live-preview {
    border: 1px dashed var(--fn-border-strong); border-radius: var(--fn-radius-sm);
    padding: 10px 12px; background: var(--fn-bg-muted);
}
.wl-live-preview .wl-eyebrow { margin-bottom: 8px; padding: 0; }
/* Der Dialog liegt außerhalb von .wl-page: Zeichen wie in der Seitenleiste (18 px, Strich 1.6), nicht 24 px. */
.wl-live-preview .wl-ico .lucide { stroke-width: 1.6; width: 18px; height: 18px; flex: 0 0 auto; }
.wl-cat-static { cursor: default; }

/* ② Saison-Spalte: vier gleichwertige Verdikt-Pills (günstig · ungünstig · neutral · zu wenig Historie). */
.wl-sea {
    display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.wl-sea.good { color: var(--fn-success); background: var(--fn-success-soft); border: 1px solid var(--fn-success); }
.wl-sea.bad { color: var(--fn-danger); background: var(--fn-danger-soft); border: 1px solid var(--fn-danger); }
.wl-sea.neutral { color: var(--fn-text); background: var(--fn-bg-muted); border: 1px solid var(--fn-border-strong); }
.wl-sea.na { color: var(--fn-text-tertiary); background: var(--fn-bg-muted); border: 1px dashed var(--fn-border-strong); }

/* Veröffentlichungen: breite T-Fenster-Tabelle, horizontal stabil und ohne Layout-Sprung. */
.wl-publications { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wl-publications-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-muted);
}
.wl-publications-head h3 { margin: 0 0 2px; color: var(--fn-text); font-size: 15px; font-weight: 600; }
.wl-publications-head p { margin: 0; color: var(--fn-text-secondary); font-size: 12.5px; line-height: 1.45; }
.wl-publications-pill {
    flex: 0 0 auto; padding: 3px 9px; border: 1px solid var(--fn-accent-line); border-radius: var(--fn-radius-pill);
    background: var(--fn-accent-soft); color: var(--fn-primary); font-size: 11px; font-weight: 700;
}
.wl-publications-empty {
    padding: 18px; border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm);
    background: var(--fn-bg-muted); color: var(--fn-text-secondary);
}
.wl-publications-table-wrap { overflow: auto; border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm); }
.wl-publications-table { min-width: 1480px; table-layout: fixed; }
.wl-publications-table th:first-child, .wl-publications-table td:first-child { width: 260px; }
.wl-publications-table th:nth-child(2), .wl-publications-table td:nth-child(2) { width: 132px; }
.wl-publications-table th.num, .wl-publications-table td.num { width: 72px; text-align: right; font-family: var(--fn-font-mono); }
.wl-publications-table td.today { color: var(--fn-primary); }
.wl-publications-table small { display: block; color: var(--fn-text-tertiary); font-size: 10.5px; margin-top: 2px; }
.wl-pub-missing { color: var(--fn-text-tertiary); }
.wl-ipo-table { min-width: 2520px; table-layout: fixed; }
.wl-ipo-table th:first-child, .wl-ipo-table td:first-child { width: 260px; }
.wl-ipo-table th:nth-child(2), .wl-ipo-table td:nth-child(2) { width: 132px; }
.wl-ipo-table th.num, .wl-ipo-table td.num { width: 72px; text-align: right; font-family: var(--fn-font-mono); }
.wl-ipo-table td.today { color: var(--fn-primary); }
.wl-ipo-table small { display: block; color: var(--fn-text-tertiary); font-size: 10.5px; margin-top: 2px; }

/* Gruppierung: Segmented-Control (Stil = mittiger Modus-Umschalter) + Trennzeile (auf-/zuklappbar) + per-Gruppe-Kopf */
.wl-grp-ctl { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.wl-grp-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--fn-text-tertiary); text-align: center; }
.wl-grp-row { display: inline-flex; align-items: center; gap: 8px; }
.wl-grp-tools { display: inline-flex; align-items: center; gap: 8px; }
.wl-grp-iconbar { display: inline-flex; align-items: center; gap: 6px; }
.wl-grp-divider { width: 1px; height: 24px; background: var(--fn-border-strong); }
.wl-grp-seg .wl-mode-tab { padding: 6px 11px; font-size: 12px; }

/* Vereinheitlichte Kopfzeile (25.07.2026, Niko: "eine Zeile, die zu einer Gruppenzeile wird" statt
   zwei getrennte, ein-/ausblendende Zeilen — headerRow(TypeGroup?) in WatchlistItemsTable.razor).
   Ungruppiert zeigt sie dieselben Sortier-Header wie zuvor das <thead>; gruppiert zusätzlich Klapp-Pfeil,
   Gruppenname + Zeilenanzahl und die Gruppen-Kennzahlen (Wert/Einstand, Entwicklung, Ø Tag) je Spalte. */
.wl-items tr.wl-headrow th {
    font-size: 11px; font-weight: var(--fn-font-weight-bold); text-transform: uppercase;
    letter-spacing: .06em; color: var(--fn-text-tertiary); white-space: nowrap;
    padding: 10px 14px; border-bottom: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-bg-muted); vertical-align: top;
}
.wl-items tr.wl-headrow th small {
    display: block; margin-top: 2px; color: var(--fn-text-tertiary); opacity: .8;
    font-size: 10px; font-weight: var(--fn-font-weight-regular); letter-spacing: 0;
    text-transform: none;
}
.wl-items tr.wl-headrow th small .fn-sort { text-transform: none; }
.wl-grp-toggle-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    background: none; border: none; cursor: pointer; color: var(--fn-text-secondary); padding: 0;
}
.wl-grp-toggle-icon:hover { color: var(--fn-text); }
.wl-grp-toggle-icon svg { width: 14px; height: 14px; }
.wl-items .wl-total td {
    border-top: 1px solid var(--fn-border-strong);
    border-bottom: 0;
    background: var(--fn-bg-muted);
    font-weight: 700;
}
.wl-total-label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* Depot-Listen verwalten (Niko 02.07.2026): Kontextmenue + Umbenennen/Loeschen-Overlays (tokens-only) */
.wl-cat-row { position: relative; display: flex; align-items: center; gap: 2px; }
.wl-cat-row .wl-cat { flex: 1; }
.wl-cat-menu-trigger { background: none; border: none; color: var(--fn-text-tertiary); cursor: pointer; padding: 4px 6px; border-radius: var(--fn-radius-sm); line-height: 0; }
.wl-cat-menu-trigger:hover,
.wl-cat-row.menu-open .wl-cat-menu-trigger { color: var(--fn-text); background: var(--fn-hover); }
/* Das Listen-Menü ist seit dem 21.09.2026 das geteilte FnContextMenu: Fläche, Rahmen, Radius,
   Einträge, Hintergrundfänger und Tastaturführung kommen von dort (fn-context-menu.css). Eigene
   Regeln für Position und Fläche entfallen damit — sie waren die Ursache dafür, dass das Menü im
   scrollenden Container abgeschnitten und von den folgenden Zeilen überdeckt wurde. */
.fn-ctx-menu .wl-cat-menu-danger { color: var(--fn-danger); }
/* Listenmenü nach Vorschau Szene 5 (VORSCHAU-Futures-Metalle-Unterliste.html): jedes Zeichen 14 px in
   --fn-text-tertiary, „Löschen" samt Zeichen in --fn-danger. Das Lucide-Zeichen steckt in einem <i>; als
   Inline-Element nimmt es keine Breite an, deshalb standen die Zeichen mit 15–17 px da und das eigene
   Universum-Zeichen mit 14 px — der Text rückte je Eintrag anders ein (live gemessen 24.09.2026).
   Die Farbe von „Löschen" verlor gegen `.fn-ctx-menu button:not(.cw-swatch)` (höhere Spezifität). */
.fn-ctx-menu button.wl-list-menu-entry .fn-icon {
    display: inline-flex;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: var(--fn-text-tertiary);
}
.fn-ctx-menu button.wl-list-menu-entry .fn-icon svg { width: 14px; height: 14px; }
.fn-ctx-menu button.wl-list-menu-entry.wl-cat-menu-danger,
.fn-ctx-menu button.wl-list-menu-entry.wl-cat-menu-danger .fn-icon { color: var(--fn-danger); }
/* Unterlisten im Listenmenü (Szene 5): „Neue Unterliste" trägt seit 25.09.2026 das Linien-Plus über FnIcon wie
   jeder Eintrag (die Emoji-Spalte .wl-list-menu-plus entfällt); ein gesperrter Eintrag (Löschen einer Liste mit
   Unterlisten) bleibt sichtbar, abgeblendet wie jeder gesperrte Knopf (§2e). */
.fn-ctx-menu button.wl-list-menu-entry .wl-list-menu-ico { display: inline-flex; flex: 0 0 14px; }
.fn-ctx-menu button.wl-list-menu-entry:disabled { opacity: 0.45; cursor: default; }
/* Unterliste in der Seitenleiste (Szene 1): 34 px eingerückt wie eine Gruppenebene im Standard-Grid, gerade
   Führungslinie ohne Radius, Name 13 px. Gilt ebenso in der Vorschauzeile des Dialogs „Neue Watchlist". */
.wl-cat.wl-sub, .wl-sub-row > .wl-cat { margin-left: 34px; position: relative; }
/* Jede weitere Ebene rückt um weitere 34 px ein (Niko 25.09.2026: Unterlisten in Unterlisten); die Tiefe setzt die Seite
   als --wl-depth an der Zeile. Die Führungslinie bleibt an der eigenen Zeile, 18 px links von ihr. */
.wl-sub-row > .wl-cat { margin-left: calc(34px * var(--wl-depth, 1)); }
.wl-cat.wl-sub::before, .wl-sub-row > .wl-cat::before { content: ""; position: absolute; left: -18px; top: -2px; bottom: 50%; width: 14px; border-left: 1px solid var(--fn-border-strong); border-bottom: 1px solid var(--fn-border-strong); }
.wl-cat.wl-sub .wl-label, .wl-sub-row > .wl-cat .wl-label { font-size: 13px; }
/* Klapp-Pfeil einer Liste mit Unterlisten (Niko 25.09.2026, Vorschau VORSCHAU-Watchliste-Unterlisten-einklappen.html,
   Variante A): fester 20-px-Platz rechts vor ⋮ in jeder Zeile — mit Pfeil oder leer —, damit die Zahlen untereinander
   stehen. Zeichen und Drehung wie der Pfeil der Gruppenüberschrift (−90°, 0,4 s). */
.wl-sub-gutter { flex: 0 0 20px; width: 20px; }
.wl-cat-row button.wl-sub-toggle { flex: 0 0 20px; width: 20px; height: 20px; padding: 0; gap: 0; justify-content: center; border-radius: 6px; color: var(--fn-text-tertiary); }
.wl-cat-row button.wl-sub-toggle:hover:not([disabled]) { color: var(--fn-primary); background: var(--fn-hover); }
.wl-cat-row button.wl-sub-toggle svg { width: 14px; height: 14px; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.wl-cat-row button.wl-sub-toggle.wl-sub-closed svg { transform: rotate(-90deg); }
/* In der Dialog-Vorschauzeile steht die Zeile nicht in einer Flex-Zeile: ohne Abzug ragte sie um die Einrückung über den Rahmen. */
.wl-cat.wl-sub { width: calc(100% - 34px); }
/* Herkunft eines Werts aus einer Unterliste (Szene 2). */
.wl-sub-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--fn-text-tertiary); border: 1px solid var(--fn-border-strong); border-radius: var(--fn-radius-pill); padding: 1px 7px; margin-left: 7px; white-space: nowrap; }
.wl-sub-tag .fn-icon, .wl-sub-tag svg { width: 11px; height: 11px; }
.wl-cat-hidden { opacity: 0.6; }
.wl-mgr-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--fn-bg) 68%, transparent); backdrop-filter: blur(2px); }
.wl-mgr-dialog { background: var(--fn-bg-alt); border: 1px solid var(--fn-border-strong); border-radius: var(--fn-radius-lg); box-shadow: var(--fn-elevation-3); padding: 20px 22px; width: 360px; max-width: 92vw; }
.wl-mgr-dialog h3 { font-size: 15px; font-weight: 600; color: var(--fn-text); margin-bottom: 12px; }
.wl-mgr-warn { font-size: 12.5px; color: var(--fn-text-secondary); line-height: 1.5; }
/* Dynamische Listen (z. B. „Universum"): dezente Kennzeichnung, dass die Mitgliedschaft aus einem
   Schalter kommt statt aus manueller Zuordnung (Niko 17.09.2026). */
.wl-dyn { flex: none; font-size: 10.5px; color: var(--fn-text-tertiary); border: var(--fn-border-width) solid var(--fn-border-strong); border-radius: var(--fn-radius-pill); padding: 1px 7px; white-space: nowrap; }