/* =====================================================================================================
   static/css/app.css: gemeinsame Bausteine aller App-Seiten (Praefix nv-, Navigator), seit 23.10.2026
   =====================================================================================================

   Geladen von templates/base.html im {% block head %} (nach design-system.css und css/base.css), also auf
   jeder Seite, die base.html erweitert und in {% block head %} zuerst {{ super() }} aufruft. Verhalten
   (Schublade, Rueckfrage, Toast, Segment) in static/js/nv.js, ebenfalls aus base.html (defer).
   Schauseite mit jedem Baustein in jedem Zustand: templates/dev/nv-bausteine.html (Route /dev/nv, nur
   mit DEBUG). Werte aus dem Massstab der Audit-Seite (wiki/produkte/ui-audit-restseiten-2026-10.md):
   nur dunkler Modus, Lila (#8b7cf6) als einziger Akzent (Markenfarbe, unslop-ignore), Gruen #4ade80 nur
   Gewinn/aktiv/erledigt, Rot #f87171 nur Verlust/Fehler/Loeschen, Gelb #fbbf24 nur Warnung; Abstaende
   aus 4/8/12/16/20/24/32/48; Knoepfe 40 px (klein 32), Radius 10; keine Hover-Spruenge, kein Glow.

   Regeln fuer Welle 2: Seiten bauen mit diesen Klassen statt eigener Kopien. Neue, nur fuer eine Gruppe
   gebrauchte Bausteine kommen mit Gruppenpraefix (z. B. .nv-ac-* Academy) ans Ende dieser Datei oder in
   eine eigene Datei unter static/css/. Keine Inline-Styles, kein !important, keine Bootstrap-Farbklassen
   (bg-success, text-danger, badge bg-*) fuer Status. confirm()/alert() durch nv.confirm/nv.toast ersetzen.

   Bausteine (Markup-Beispiele; Attribute in eckigen Klammern sind optional)

   SEITE UND FLAECHEN
   .nv-page              Arbeitsflaeche, zentriert, max. 1680 px, 32 px Rand (Handy 12 px, unten Platz
                         fuer die Handy-Leiste). Varianten .nv-page--lesen (760 px, Rechtstexte, Hilfe)
                         und .nv-page--form (1120 px, Konto, Checkout, Formulare).
                           <div class="nv-page"> ... </div>
                           <div class="nv-page nv-page--form"> ... </div>
   .nv-panel             Das eine Glas-Panel je Seite (Radius 20, Innenabstand 24/28, Handy 16/14).
                           <section class="nv-panel" aria-labelledby="seitentitel"> ... </section>
   .nv-head              Kopfzeile: links h1 und ein Satz, rechts Werkzeuge, darunter eine Linie.
                           <header class="nv-head">
                             <div class="nv-head__text">
                               <p class="nv-kicker">Admin</p>
                               <h1 id="seitentitel">Abonnements</h1>
                               <p>Alle laufenden und gekuendigten Abos im gewaehlten Zeitraum.</p>
                             </div>
                             <div class="nv-head__tools"> (Suche, Filter, genau ein .nv-btn--primary) </div>
                           </header>
   .nv-kicker            Einordnung ueber einem Titel (0.8 rem, 600, Tint #b3c0ff), nie Inhaltstraeger.
   .nv-card              Innenkarte im Panel (4,5 % Weiss, Rahmen 9 %, Radius 12, Innenabstand 16).
                         .nv-card__head mit .nv-card__title (0.95 rem 600) und .nv-card__note rechts.
                         --link fuer ganze Karten als Link (Hover nur Rahmen und Flaeche).
                           <article class="nv-card"><div class="nv-card__head"><h2 class="nv-card__title">
                             Zahlungsart</h2><span class="nv-card__note">seit 01.10.2026</span></div>
                             <p>...</p></article>
   .nv-grid              12-Spalten-Raster (Abstand 16), Kinder .nv-span-4/5/6/7/8/12; Handy eine Spalte.
                           <div class="nv-grid"><div class="nv-card nv-span-7">..</div>
                             <div class="nv-card nv-span-5">..</div></div>
   .nv-stack             Senkrechter Stapel mit 16 px Abstand (--8, --24, --32 fuer andere Abstaende).
   .nv-note              Hinweisbox statt Bootstrap-Alert; --ok, --warn, --bad faerben nur das Symbol und
                         den Rahmen. role="status" fuer Rueckmeldungen.
                           <div class="nv-note nv-note--warn" role="status"><i class="bi bi-exclamation-triangle"
                             aria-hidden="true"></i><p>Dein Abo endet am 31.10.2026.</p></div>
   .nv-menu              Dunkles Dropdown fuer Bootstrap-Menues: <ul class="dropdown-menu nv-menu"> mit
                         .dropdown-item, .active fuer die Auswahl; .nv-menu__gefahr fuer Loeschen und Aehnliches
                         (Rot, aus .aa-gefahr); deaktivierte Eintraege (.disabled, disabled) gedaempft.
   .nv-crumbs            Pfad ueber dem Titel (aus .ln-crumbs und .acd-pfad), Handy-Tippziel 40 px:
                           <nav class="nv-crumbs" aria-label="Pfad"><ol><li><a href="..">Kurs</a></li>
                             <li aria-current="page">Lektion 2.3</li></ol></nav>

   BEDIENELEMENTE
   .nv-btn               Ghost-Knopf (Standard), 40 px. .nv-btn--primary (genau einer je Ansicht, lila
                         Flaeche), .nv-btn--danger (roter Ghost), .nv-btn--quiet (nur Text), .nv-btn--sm
                         (32 px, Handy 40), .nv-btn--block (volle Breite), .nv-btn--icon (quadratisch, braucht
                         aria-label). Deaktiviert: disabled oder aria-disabled="true" (42 % Deckkraft).
                           <button type="button" class="nv-btn">Exportieren</button>
                           <button type="submit" class="nv-btn nv-btn--primary"><i class="bi bi-plus-lg"
                             aria-hidden="true"></i>Trade hinzufuegen</button>
                           <a class="nv-btn nv-btn--sm" href="..">Details</a>
                           <button type="button" class="nv-btn nv-btn--icon" aria-label="Schliessen">
                             <i class="bi bi-x-lg" aria-hidden="true"></i></button>
   .nv-link              Textlink im Tint (Zweitaktion neben einem Knopf, Links im Fliesstext).
   .nv-seg / .nv-seg-btn Segment-Schalter fuer Zeitraum, Ansicht, Zeilenzahl. Aktiv: .active oder
                         aria-pressed="true" / aria-current="page". Als Links (Server) oder mit nv.js:
                         data-nv-seg am Container, data-value an den Knoepfen, optional
                         data-nv-seg-target="#id" schaltet Kinder [data-nv-seg-panel="wert"] um.
                         Handy: volle Breite, gleich breite Knoepfe; --inline behaelt die Breite.
                           <div class="nv-seg" role="group" aria-label="Zeitraum" data-nv-seg>
                             <button type="button" class="nv-seg-btn active" aria-pressed="true"
                               data-value="7">7 Tage</button>
                             <button type="button" class="nv-seg-btn" aria-pressed="false"
                               data-value="30">30 Tage</button></div>
   .nv-views / .nv-view  Unterstrichene Reiterzeile (statt Bootstrap-Nav-Tabs). Aktiv: .active oder
                         aria-current="page" (Links) bzw. aria-selected="true" (mit data-nv-seg).
                           <nav class="nv-views" aria-label="Ansichten"><a class="nv-view active"
                             aria-current="page" href="?v=alle">Alle</a><a class="nv-view" href="?v=neu">
                             Neu</a></nav>
   .nv-bar               Filterzeile ueber Tabellen (Suche, Filter, Chips), Handy einspaltig.
   .nv-search            Suchfeld mit Lupe: <form class="nv-search" role="search"><i class="bi bi-search"
                           aria-hidden="true"></i><input class="nv-field" type="search" name="q"
                           aria-label="Suchen" placeholder="Name oder E-Mail"></form>
   .nv-group             Feldgruppe: .nv-label, Feld, .nv-hint, .nv-error (untereinander, Abstand 6).
   .nv-label             Label ueber dem Feld (0.8 rem 600, ohne Doppelpunkt).
   .nv-field             Eingabe und textarea: 40 px, 6 % Weiss, Rahmen 14 %, color-scheme dark, Fokus lila
                         Rahmen plus Ring, Handy 16 px Schrift. Fehler: aria-invalid="true" am Feld.
   .nv-select            Dunkles select mit eigenem Pfeil, dunkle Optionsliste.
   .nv-hint / .nv-error  Hilfetext bzw. Fehler am Feld (Rot, mit Symbol, id fuer aria-describedby).
                           <div class="nv-group">
                             <label class="nv-label" for="f-mail">E-Mail-Adresse</label>
                             <input class="nv-field" id="f-mail" type="email" aria-invalid="true"
                               aria-describedby="f-mail-err">
                             <p class="nv-error" id="f-mail-err"><i class="bi bi-exclamation-circle"
                               aria-hidden="true"></i>Bitte gib eine gueltige Adresse ein.</p></div>
   .nv-form-grid         Zwei Felder je Zeile (Abstand 16), Handy eine Spalte; .nv-span-all fuer volle Zeile.
   .nv-check             Checkbox oder Radio mit Text, Akzentfarbe Lila:
                           <label class="nv-check"><input type="checkbox" name="x">Angemeldet bleiben</label>
   .nv-chip              Aktiver Filter mit Entfernen-Knopf:
                           <span class="nv-chip">Paket Pro<a class="nv-chip__remove" href="?"
                             aria-label="Filter Paket entfernen"><i class="bi bi-x" aria-hidden="true"></i>
                             </a></span>
   .nv-save              Status am Element (Gespeichert, Fehler) statt alert(): .is-ok, .is-error, .is-busy;
                         <span class="nv-save is-ok" role="status">Gespeichert</span>; leer in .nv-stack ohne Platz.
   .nv-switch            Schalter: Checkbox mit role="switch" (aus .ko-switch, Konto):
                           <label class="nv-switch" for="f-mails"><input class="nv-switch__input" type="checkbox"
                             role="switch" id="f-mails"><span class="nv-switch__track" aria-hidden="true"></span>
                             <span class="nv-switch__label">Neuigkeiten per E-Mail</span></label>
   .nv-choices / .nv-choice  Radio oder Checkbox als umrandete Zeile, gewaehlt lila (aus .ko-wahl__zeile):
                           <fieldset class="nv-choices"><legend class="nv-label">Grund</legend>
                             <label class="nv-choice"><input type="radio" name="g" value="preis">Zu teuer</label>
                             </fieldset>
                         --box fuer Pflicht-Haekchen mit laengerem Text (aus .co-check, Checkout):
                           <label class="nv-choice nv-choice--box"><input type="checkbox" required>Ich akzeptiere
                             die AGB.</label>
   .nv-actions           Knopfzeile (aus .ko-aktionen): Knoepfe und Formulare nebeneinander, Handy volle Breite.
                           <div class="nv-actions"><button class="nv-btn">Speichern</button>
                             <span class="nv-save" role="status"></span></div>
   .nv-pick              Bootstrap-Dropdown als Auswahlknopf mit Label und Wert (aus .ad-auswahl):
                           <div class="dropdown nv-pick"><button class="nv-btn nv-pick__btn is-on" type="button"
                             data-bs-toggle="dropdown" aria-expanded="false"><span class="nv-pick__label">Status</span>
                             <span class="nv-pick__value">Neu</span><i class="bi bi-chevron-down" aria-hidden="true">
                             </i></button><ul class="dropdown-menu nv-menu">..</ul></div>

   ZAHLEN
   .nv-hero              Leitzahl der Ansicht (3 rem, Handy 2.2 rem) mit Label und Unterzeile.
                           <div class="nv-hero"><p class="nv-hero__label">Netto-Gewinn
                             <span>letzte 30 Tage</span></p><p class="nv-hero__value nv-pos">+1.279,00 $</p>
                             <p class="nv-hero__sub">+12 % gegenueber den 30 Tagen davor</p></div>
   .nv-kpis / .nv-kpi    Eine Reihe mit vier bis sechs Kacheln (Label, Wert 1.5 rem, Unterzeile). Als Link
                         oder Knopf ein Filter; aktiv: .on und aria-current="true". Handy zwei Spalten.
                           <div class="nv-kpis"><a class="nv-kpi on" aria-current="true" href="?f=aktiv">
                             <span class="nv-kpi__label">Aktive Abos</span><span class="nv-kpi__value">276</span>
                             <span class="nv-kpi__sub">+4 seit Montag</span></a> ... </div>
   .nv-kpi--locked       Gesperrte Kachel (gestrichelt, Schloss), Wert mit .nv-blur und aria-hidden="true":
                           <div class="nv-kpi nv-kpi--locked"><span class="nv-kpi__label">Profitfaktor</span>
                             <span class="nv-kpi__value nv-blur" aria-hidden="true">2,28</span>
                             <span class="nv-kpi__sub">ab Premium</span></div>
   .nv-pos / .nv-neg     Gewinn gruen, Verlust rot (nur Text, Vorzeichen mitschreiben). .nv-num Ziffern.

   TABELLEN UND LISTEN
   .nv-table             Ohne Zebra und Zellrahmen, Kopf 0.8 rem, Hover 5 %. Zellen .num (rechts,
                         Tabellenziffern), .nowrap. In .nv-tablewrap mit Rahmen, sonst frei im Panel.
                         .nv-tablewrap schneidet nichts ab: Bootstrap-Menues und .nv-confirm--pop in den
                         Zeilen ragen ueber den Rahmen hinaus (auch unten aus dem Panel, ueber die Fusszeile).
   .nv-table--stacked    Auf dem Handy (bis 768 px) Zeilen als Karten: Kopf aus, jede Zelle mit
                         data-label="Spaltenname" zeigt das Label links; Zellen ohne data-label (Name,
                         Aktionen) stehen allein. Kernlisten nie waagrecht scrollen.
   .nv-row               Klickbare Zeile: nv.js folgt beim Klick irgendwo in der Zeile dem Link
                         .nv-row__main (oder data-nv-href, oder oeffnet data-nv-drawer-open); Knoepfe und
                         Links in der Zeile behalten ihre eigene Wirkung. .is-open bei offener Schublade;
                         .nv-row-actions erscheinen beim Ueberfahren (Touch-Geraete: immer).
                           <div class="nv-tablewrap"><table class="nv-table nv-table--stacked">
                             <thead><tr><th scope="col">Name</th><th scope="col" class="num">Trades</th>
                               <th scope="col"><span class="visually-hidden">Aktionen</span></th></tr></thead>
                             <tbody><tr class="nv-row"><td><a class="nv-row__main" href="..">Mia Beispiel</a></td>
                               <td class="num" data-label="Trades">42</td>
                               <td class="nv-row-actions">..</td></tr></tbody></table></div>
   .nv-pager             Zaehlzeile links, Seiten als Segment rechts (hoechstens sieben, mit Luecke).
                           <nav class="nv-pager" aria-label="Seiten der Liste"><p class="nv-pager__count">
                             <b>1 bis 25</b> von <b>276</b></p><div class="nv-pages">
                             <a class="nv-seg-btn" href="?p=1" aria-current="page">1</a>
                             <a class="nv-seg-btn" href="?p=2">2</a><span class="nv-pages__gap">...</span>
                             <a class="nv-seg-btn" href="?p=12">12</a></div></nav>
   .nv-empty             Leerzustand: fetter Satz plus eine Zeile, was zu tun ist, optional ein Knopf.
                           <div class="nv-empty"><b>Noch keine Tickets</b><p>Wenn du eine Frage hast,
                             schreib uns hier.</p><a class="nv-btn nv-btn--primary" href="..">Neues Ticket</a></div>
   .nv-loading           Ladezustand mit kleinem Kreis und Text: <p class="nv-loading" role="status">
                           Laedt die Trades</p>
   .nv-status            Punkt plus Wort, --ok, --warn, --bad, ohne Zusatz neutral:
                           <span class="nv-status nv-status--ok">Aktiv</span>
   .nv-plan              Paket als schlichte Umrandung (Name aus packages.py), --top (Lila) fuer
                         Professional, --muted fuer Free: <span class="nv-plan nv-plan--top">Professional</span>
   .nv-kv                Schluessel-Wert-Raster in Schubladen und Details (Label 160 px, Handy untereinander).
   .nv-sum               Summenzeilen (aus .co-summary): .nv-sum__row mit Text links und Betrag rechts,
                         --muted (Nebenzeile), --total (faelliger Betrag):
                           <div class="nv-sum"><div class="nv-sum__row"><span>Professional, monatlich</span>
                             <span class="nv-num">99,99 €</span></div><div class="nv-sum__row nv-sum__row--total">
                             <span>Heute fällig</span><span class="nv-num">49,99 €</span></div></div>
   .nv-avatar            Profilbild oder Initialen (aus .ko-avatar und .sp-av), 32 px, --lg 56, --xl 96:
                           <span class="nv-avatar has-bild" aria-hidden="true"><span class="nv-avatar__initialen">
                             MB</span><img src=".." alt=""></span>

   EBENEN
   .nv-drawer / .nv-shade  Schublade von rechts (max. 560 px, Handy volle Breite) mit Abdunklung.
                         nv.js: data-nv-drawer-open="id" am Ausloeser, data-nv-drawer-close darin;
                         Fokusfalle, Esc schliesst, Fokus zurueck zum Ausloeser. Ein .nv-shade je Seite.
                           <div class="nv-shade" data-nv-shade hidden></div>
                           <aside class="nv-drawer" id="kunde" role="dialog" aria-modal="true"
                             aria-labelledby="kunde-titel" aria-hidden="true" inert>
                             <header class="nv-drawer__head"><h2 id="kunde-titel">Mia Beispiel</h2>
                               <button type="button" class="nv-btn nv-btn--icon" data-nv-drawer-close
                                 aria-label="Schliessen"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
                             </header><div class="nv-drawer__body">..</div>
                             <footer class="nv-drawer__foot">..</footer></aside>
   .nv-modal             Dunkle Haut fuer Bootstrap-Modale (Fokusfalle und Esc von Bootstrap), auf dem
                         Handy als Sheet von unten: <div class="modal fade nv-modal" ...> mit .modal-dialog,
                         .modal-content, .modal-header/-body/-footer wie gewohnt.
   .nv-confirm           Rueckfrage in der Zeile statt confirm(). nv.js: data-nv-confirm="Frage" an einem
                         Submit-Knopf, Link oder Formular (data-nv-confirm-yes="Loeschen",
                         data-nv-confirm-no="Abbrechen", data-nv-confirm-art="primary" fuer nicht
                         Gefaehrliches) oder nv.confirm(ausloeser, {text, yes, no}).then(ok => ..).
                         --pop schwebt rechts ueber der Zeile (Bezug: .nv-row oder ein Element mit
                         position: relative).
   .nv-toasts / .nv-toast  Meldungen unten mittig (ueber der Handy-Leiste), Rand links 3 px in der Farbe
                         der Art: --ok, --warn, --bad, --info. Der Container steht in base.html
                         (#toastContainer); ausloesen mit nv.toast('Gespeichert', 'ok'), Arten ok, warn,
                         bad, info (auch success, warning, danger, error). Flash-Meldungen werden Toasts.
                         Mit Knopf (.nv-toast__action): nv.toast(text, art, {aktion: {text: 'Rückgängig',
                         klick: fn}}) oder {aktion: {text: 'Ansehen', href: '/support/7'}}, dazu dauer.

   GESPERRT, EDITOR, DATEIEN
   .nv-upsell            Gesperrter oder beworbener Inhalt: gestrichelter Rahmen, unscharfer echter
                         Screenshot (.nv-upsell__shot, aria-hidden), Schloss in der Ecke, ein Nutzen-Satz,
                         genau ein .nv-btn--primary mit Paketnamen. --split: Text links, Bild rechts.
                           <section class="nv-upsell nv-upsell--split" aria-labelledby="u1">
                             <div class="nv-upsell__text"><h2 id="u1">Livestream</h2><p>Mit Premium siehst du
                               ...</p><a class="nv-btn nv-btn--primary" href="..">Premium freischalten</a></div>
                             <figure class="nv-upsell__shot" aria-hidden="true"><img src=".." alt=""></figure>
                           </section>
   .nv-blur              Unscharfer Beispielwert in gesperrten Kacheln (aria-hidden="true", keine echten Zahlen).
   .nv-quill             Dunkler Quill-Editor: Huelle um Werkzeugleiste und Editor
                           <div class="nv-quill"><div id="editor"></div></div>   (Theme "snow")
   .nv-dropzone          Ablageflaeche fuer Dateien, .is-over beim Ziehen; das echte input[type=file] liegt
                         im label (visually-hidden), damit Tastatur und Klick funktionieren.
                           <label class="nv-dropzone"><input class="visually-hidden" type="file" name="f">
                             <i class="bi bi-cloud-arrow-up" aria-hidden="true"></i><b>Datei hierher ziehen</b>
                             <span>oder klicken, um sie auszuwaehlen (CSV, bis 10 MB)</span></label>
   .nv-progress          Fortschritt als natives progress: <progress class="nv-progress" value="40" max="100"
                           aria-label="Upload">40 %</progress>

   HILFSKLASSEN
   .nv-mt-{4|8|12|16|20|24|32|48}, .nv-mb-*, .nv-gap-*   Abstaende nur aus der Skala (dazu -0),
                         z. B. .nv-mt-16, .nv-mb-24, .nv-gap-8. Seiten-CSS, das margin selbst setzt, gewinnt
                         (gleiche Spezifitaet, spaeter geladen); dann dort den Skalenwert nehmen.
   .nv-muted (Nebentext 55 %), .nv-tint (Lila-Tint #b3c0ff), .nv-num (Tabellenziffern), .nv-nowrap.
   ===================================================================================================== */

:root {
    --nv-fg: rgba(255, 255, 255, 0.95);
    --nv-fg2: rgba(255, 255, 255, 0.72);
    --nv-fg3: rgba(255, 255, 255, 0.55);
    --nv-line: rgba(255, 255, 255, 0.1);
    --nv-line-soft: rgba(255, 255, 255, 0.06);
    --nv-line-2: rgba(255, 255, 255, 0.16);
    --nv-ctl: rgba(255, 255, 255, 0.06);
    --nv-ctl-hover: rgba(255, 255, 255, 0.12);
    --nv-ctl-line: rgba(255, 255, 255, 0.14);
    --nv-card: rgba(255, 255, 255, 0.045);
    --nv-card-line: rgba(255, 255, 255, 0.09);
    --nv-surface: #1a1d2c;
    --nv-surface-2: #222740;
    --nv-acc: #8b7cf6; /* unslop-ignore: Navigator-Lila, Markenfarbe und einziger Akzent */
    --nv-acc-on: rgba(139, 124, 246, 0.28); /* unslop-ignore */
    --nv-acc-hover: rgba(139, 124, 246, 0.42); /* unslop-ignore */
    --nv-acc-line: rgba(139, 124, 246, 0.6); /* unslop-ignore */
    --nv-acc-line-2: rgba(139, 124, 246, 0.9); /* unslop-ignore */
    --nv-acc-soft: rgba(139, 124, 246, 0.16); /* unslop-ignore */
    --nv-tint: #b3c0ff;
    --nv-ok: #4ade80;
    --nv-warn: #fbbf24;
    --nv-bad: #f87171;
    --nv-bad-soft: rgba(248, 113, 113, 0.08);
    --nv-bad-line: rgba(248, 113, 113, 0.45);
    --nv-pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --nv-focus: #8b7cf6; /* unslop-ignore */
    --nv-ease: 0.15s ease;
}

/* ── Seite und Flaechen ─────────────────────────────────────────────────────────────────────────── */

/* #main-content ist eine Flex-Spalte: ohne feste Breite schrumpft der Block auf seinen Inhalt */
.nv-page {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px 32px 48px;
    color: var(--nv-fg2);
}

.nv-page--form { max-width: 1120px; }
.nv-page--lesen { max-width: 760px; }

/* Glas-Panel (unslop-ignore: Glas-Flaechen sind bewusste Hausentscheidung des Navigators).
   backdrop-filter macht das Panel zu einer eigenen Ebene; ohne z-index lag es unter der Fusszeile (ebenfalls
   eine Ebene, spaeter im Dokument), und Menues, die unten aus dem Panel ragen, verschwanden hinter ihr. Mit
   z-index 1 liegt das Panel ueber der Fusszeile und unter Navigation (1030), Handy-Leiste (1020),
   Schubladen, Modalen und Toasts; ein Panel mit offenem Menue liegt auch ueber einem zweiten Panel. */
.nv-panel {
    position: relative;
    z-index: 1;
    padding: 24px 28px 28px;
    background: var(--glass-card, #161a26);
    backdrop-filter: blur(16px);
    border: 1px solid var(--nv-line);
    border-radius: 20px;
    box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.3)), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--nv-fg2);
}

.nv-panel:has(.dropdown-menu.show) { z-index: 2; }

.nv-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 24px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--nv-line);
}

.nv-head__text { flex: 1 1 320px; min-width: 0; }

.nv-head h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--nv-fg);
    overflow-wrap: anywhere;
}

.nv-head__text > p:not(.nv-kicker) {
    margin: 4px 0 0;
    max-width: 72ch;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--nv-fg3);
}

.nv-head__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nv-head__tools > .nv-search { flex: 0 1 280px; width: 280px; }

.nv-kicker {
    display: block;
    margin: 0 0 4px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--nv-tint);
}

.nv-card {
    min-width: 0;
    padding: 16px;
    background: var(--nv-card);
    border: 1px solid var(--nv-card-line);
    border-radius: 12px;
    color: var(--nv-fg2);
}

.nv-card__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 12px;
}

.nv-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nv-fg);
}

.nv-card__note { font-size: 0.8rem; color: var(--nv-fg3); }

.nv-card > p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.55; }
.nv-card > p:last-child { margin-bottom: 0; }

.nv-card--link {
    display: block;
    text-decoration: none;
    transition: background-color var(--nv-ease), border-color var(--nv-ease);
}

.nv-card--link:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--nv-line-2);
    color: var(--nv-fg2);
}

.nv-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.nv-grid > * { grid-column: span 12; min-width: 0; }
.nv-grid > .nv-span-4 { grid-column: span 4; }
.nv-grid > .nv-span-5 { grid-column: span 5; }
.nv-grid > .nv-span-6 { grid-column: span 6; }
.nv-grid > .nv-span-7 { grid-column: span 7; }
.nv-grid > .nv-span-8 { grid-column: span 8; }
.nv-grid > .nv-span-12 { grid-column: span 12; }

.nv-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nv-stack--8 { gap: 8px; }
.nv-stack--24 { gap: 24px; }
.nv-stack--32 { gap: 32px; }

.nv-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--nv-card);
    border: 1px solid var(--nv-line-2);
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--nv-fg2);
}

.nv-note > .bi { flex: 0 0 auto; margin-top: 2px; color: var(--nv-tint); }
.nv-note > p, .nv-note > div { margin: 0; min-width: 0; }
.nv-note b, .nv-note strong { color: var(--nv-fg); }
.nv-note--ok { border-color: rgba(74, 222, 128, 0.35); }
.nv-note--ok > .bi { color: var(--nv-ok); }
.nv-note--warn { border-color: rgba(251, 191, 36, 0.4); }
.nv-note--warn > .bi { color: var(--nv-warn); }
.nv-note--bad { border-color: rgba(248, 113, 113, 0.45); }
.nv-note--bad > .bi { color: var(--nv-bad); }

/* Dunkles Dropdown fuer Bootstrap-Menues (Profilmenue-Flaeche) */
.dropdown-menu.nv-menu {
    min-width: 220px;
    padding: 6px;
    background: rgba(24, 28, 40, 0.98);
    border: 1px solid var(--nv-ctl-line);
    border-radius: 12px;
    box-shadow: var(--nv-pop-shadow);
    font-size: 0.875rem;
    color: var(--nv-fg2);
}

.nv-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.nv-menu .dropdown-item:hover,
.nv-menu .dropdown-item:focus { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nv-menu .dropdown-item.active,
.nv-menu .dropdown-item:active { background: var(--nv-acc-soft); color: #fff; font-weight: 600; }
.nv-menu .dropdown-item.disabled,
.nv-menu .dropdown-item:disabled,
.nv-menu .dropdown-item[aria-disabled="true"] { color: var(--nv-fg3); background: transparent; pointer-events: none; }
.nv-menu .dropdown-item.nv-menu__gefahr { color: var(--nv-bad); }
.nv-menu .dropdown-item.nv-menu__gefahr:hover,
.nv-menu .dropdown-item.nv-menu__gefahr:focus { color: #fecaca; background: var(--nv-bad-soft); }
.nv-menu .dropdown-item.nv-menu__gefahr:disabled,
.nv-menu .dropdown-item.nv-menu__gefahr[aria-disabled="true"] { color: var(--nv-fg3); background: transparent; }
.nv-menu .dropdown-divider { margin: 6px 4px; border-top-color: var(--nv-line); opacity: 1; }
.nv-menu .dropdown-header { padding: 6px 10px 4px; font-size: 0.75rem; font-weight: 600; color: var(--nv-fg3); }

/* ── Bedienelemente ─────────────────────────────────────────────────────────────────────────────── */

.nv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    border: 1px solid var(--nv-ctl-line);
    border-radius: 10px;
    background: var(--nv-ctl);
    color: rgba(255, 255, 255, 0.88);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--nv-ease), border-color var(--nv-ease), color var(--nv-ease);
}

.nv-btn:hover {
    background: var(--nv-ctl-hover);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
}

.nv-btn:active { background: rgba(255, 255, 255, 0.16); }
.nv-btn .bi { font-size: 1em; line-height: 1; }

/* Hauptknopf: lila Flaeche wie im Dashboard (unslop-ignore: Navigator-Lila, Kontrast weiss 10:1) */
.nv-btn--primary {
    background: var(--nv-acc-on);
    border-color: var(--nv-acc-line);
    color: #fff;
    font-weight: 600;
}

.nv-btn--primary:hover { background: var(--nv-acc-hover); border-color: var(--nv-acc-line-2); color: #fff; }
.nv-btn--primary:active { background: rgba(139, 124, 246, 0.5); } /* unslop-ignore */

.nv-btn--danger {
    background: var(--nv-bad-soft);
    border-color: var(--nv-bad-line);
    color: var(--nv-bad);
}

.nv-btn--danger:hover { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.7); color: #fecaca; }
.nv-btn--danger:active { background: rgba(248, 113, 113, 0.24); }

.nv-btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--nv-fg2);
}

.nv-btn--quiet:hover { background: rgba(255, 255, 255, 0.06); border-color: transparent; color: #fff; }

.nv-btn--sm { min-height: 32px; padding: 0 12px; border-radius: 9px; font-size: 0.8125rem; gap: 6px; }
.nv-btn--block { display: flex; width: 100%; }
.nv-btn--icon { width: 40px; padding: 0; }
.nv-btn--icon.nv-btn--sm { width: 32px; }

.nv-btn:disabled,
.nv-btn[aria-disabled="true"] {
    opacity: 0.42;
    cursor: default;
    pointer-events: none;
}

.nv-link {
    color: var(--nv-tint);
    text-decoration: underline;
    text-decoration-color: rgba(179, 192, 255, 0.4);
    text-underline-offset: 3px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Knoepfe als Textlink erben die Schrift; :where() ohne Spezifitaet, damit .nv-card__note und andere
   Klassen am selben Element ihre Schriftgroesse behalten (bis 23.10.2026 setzte .nv-link font: inherit) */
:where(button.nv-link) { font: inherit; }

.nv-link:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }

/* Segment-Schalter (aus .seg/.seg-btn des Dashboards) */
.nv-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    margin: 0;
    background: var(--nv-ctl);
    border: 1px solid var(--nv-ctl-line);
    border-radius: 10px;
    max-width: 100%;
}

.nv-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--nv-ease), color var(--nv-ease), border-color var(--nv-ease);
}

.nv-seg-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); text-decoration: none; }

.nv-seg-btn.active,
.nv-seg-btn[aria-pressed="true"],
.nv-seg-btn[aria-current="page"],
.nv-seg-btn[aria-selected="true"] {
    background: var(--nv-acc-on);
    border-color: var(--nv-acc-line);
    color: #fff;
}

.nv-seg-btn:disabled,
.nv-seg-btn[aria-disabled="true"] { opacity: 0.42; cursor: default; pointer-events: none; }

/* Reiterzeile (aus .bv-views): seitlich wischbar ohne sichtbare Leiste */
.nv-views {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--nv-line);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.nv-views::-webkit-scrollbar { display: none; }

.nv-view {
    padding: 10px 12px;
    margin-bottom: -1px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--nv-fg3);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.nv-view:hover { color: #fff; text-decoration: none; }

.nv-view.active,
.nv-view[aria-current="page"],
.nv-view[aria-selected="true"] {
    color: #fff;
    border-bottom-color: var(--nv-acc);
    font-weight: 600;
}

.nv-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.nv-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
}

.nv-search > .bi {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nv-fg3);
    pointer-events: none;
}

.nv-search .nv-field { padding-left: 36px; }

/* Felder */
.nv-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.nv-label {
    display: block;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--nv-fg2);
}

.nv-field,
.nv-select {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    margin: 0;
    background-color: var(--nv-ctl);
    border: 1px solid var(--nv-ctl-line);
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    color-scheme: dark;
    transition: border-color var(--nv-ease), background-color var(--nv-ease), box-shadow var(--nv-ease);
}

textarea.nv-field { min-height: 96px; line-height: 1.5; resize: vertical; }

.nv-field::placeholder { color: rgba(255, 255, 255, 0.45); }

.nv-field:hover,
.nv-select:hover { border-color: rgba(255, 255, 255, 0.24); }

.nv-field:focus,
.nv-select:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--nv-acc-line);
    box-shadow: 0 0 0 3px var(--nv-acc-soft);
}

.nv-field:disabled,
.nv-select:disabled { opacity: 0.5; cursor: default; }

.nv-field[readonly] { background-color: rgba(255, 255, 255, 0.03); }

.nv-field[aria-invalid="true"],
.nv-select[aria-invalid="true"] { border-color: rgba(248, 113, 113, 0.7); }

.nv-field[aria-invalid="true"]:focus,
.nv-select[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16); }

.nv-select {
    padding-right: 36px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    cursor: pointer;
}

.nv-select option,
.nv-select optgroup { background: #1b1f30; color: #fff; }

.nv-hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--nv-fg3);
}

.nv-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--nv-bad);
}

.nv-error .bi { flex: 0 0 auto; margin-top: 1px; }
.nv-error:empty { display: none; }

.nv-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.nv-form-grid > .nv-span-all { grid-column: 1 / -1; }

.nv-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--nv-fg2);
    cursor: pointer;
}

.nv-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--nv-acc);
    color-scheme: dark;
    cursor: pointer;
}

.nv-check:has(input:disabled) { opacity: 0.5; cursor: default; }

.nv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 4px 0 10px;
    background: var(--nv-acc-soft);
    border: 1px solid rgba(139, 124, 246, 0.4); /* unslop-ignore */
    border-radius: 8px;
    color: #fff;
    font-size: 0.8rem;
    white-space: nowrap;
}

.nv-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--nv-fg2);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.nv-chip__remove:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.nv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.nv-save {
    font-size: 0.8rem;
    color: var(--nv-fg3);
    min-height: 1em;
}

.nv-save.is-ok { color: var(--nv-ok); }
.nv-save.is-error { color: var(--nv-bad); }
.nv-save.is-busy { color: var(--nv-fg2); }
/* leer nimmt die Statuszeile in senkrechten Stapeln keinen Platz ein (sonst Luecke durch gap); in Zeilen
   bleibt sie, weil sie dort oft als Platzhalter zwischen Knoepfen steht (Antwortfeld im Support) */
.nv-stack > .nv-save:empty { display: none; }

/* ── Zahlen ─────────────────────────────────────────────────────────────────────────────────────── */

.nv-num { font-variant-numeric: tabular-nums; }
.nv-pos { color: var(--nv-ok); }
.nv-neg { color: var(--nv-bad); }

.nv-hero {
    padding: 20px 24px;
    background: var(--nv-card);
    border: 1px solid var(--nv-card-line);
    border-radius: 16px;
    min-width: 0;
}

.nv-hero__label {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nv-fg2);
}

.nv-hero__label span { margin-left: 6px; font-weight: 500; color: var(--nv-fg3); }

.nv-hero__value {
    margin: 0;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--nv-fg);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.nv-hero__value.nv-pos { color: var(--nv-ok); }
.nv-hero__value.nv-neg { color: var(--nv-bad); }

.nv-hero__sub {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--nv-fg3);
}

.nv-hero__sub b { color: var(--nv-fg); font-weight: 600; }

.nv-kpis {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 12px;
}

.nv-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--nv-card);
    border: 1px solid var(--nv-card-line);
    border-radius: 12px;
    color: var(--nv-fg);
    font: inherit;
    text-align: left;
    text-decoration: none;
}

a.nv-kpi,
button.nv-kpi {
    cursor: pointer;
    transition: background-color var(--nv-ease), border-color var(--nv-ease);
}

a.nv-kpi:hover,
button.nv-kpi:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--nv-line-2); color: var(--nv-fg); }

.nv-kpi.on,
.nv-kpi[aria-current="true"],
.nv-kpi[aria-pressed="true"] { background: var(--nv-acc-soft); border-color: var(--nv-acc); }

.nv-kpi__label { font-size: 0.8rem; font-weight: 500; color: var(--nv-fg3); }

.nv-kpi__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.nv-kpi__sub { font-size: 0.78rem; color: var(--nv-fg2); }

/* Gesperrte Kachel: gestrichelt, Schloss in der Ecke, Wert als unscharfes Beispiel (.nv-blur) */
.nv-kpi--locked {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.22);
}

.nv-kpi--locked::after,
.nv-upsell::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 12px;
    width: 22px;
    height: 22px;
    opacity: 0.6;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    pointer-events: none;
    z-index: 2;
}

/* ── Tabellen und Listen ────────────────────────────────────────────────────────────────────────── */

/* Ohne overflow: hidden (bis 23.10.2026), sonst schneidet der Rahmen Menues und Rueckfragen in den Zeilen ab;
   die runden Ecken tragen die Eckzellen selbst (Kopf oben, letzte Zeile unten fuer Hover und Auswahl). */
.nv-tablewrap {
    border: 1px solid var(--nv-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.nv-tablewrap .nv-table thead th { background: rgba(255, 255, 255, 0.04); }
.nv-tablewrap .nv-table thead tr:first-child th:first-child { border-top-left-radius: 11px; }
.nv-tablewrap .nv-table thead tr:first-child th:last-child { border-top-right-radius: 11px; }
.nv-tablewrap > .nv-table:last-child tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.nv-tablewrap > .nv-table:last-child tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }

.nv-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.nv-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--nv-line);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    vertical-align: bottom;
}

.nv-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--nv-line-soft);
    vertical-align: middle;
}

.nv-table tbody tr:last-child td { border-bottom: 0; }
.nv-table tbody tr { transition: background-color var(--nv-ease); }
.nv-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }

.nv-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.nv-table .nowrap,
.nv-nowrap { white-space: nowrap; }

.nv-table th a { color: inherit; text-decoration: none; }
.nv-table th a:hover,
.nv-table th[aria-sort] a { color: #fff; }

.nv-row { position: relative; cursor: pointer; }   /* Bezug fuer .nv-confirm--pop */
.nv-row:focus-within { background: rgba(255, 255, 255, 0.05); }
.nv-row.is-open { background: var(--nv-acc-soft); }

.nv-row__main { color: #fff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.nv-row__main:hover { color: var(--nv-tint); }

.nv-row-actions { text-align: right; white-space: nowrap; }

@media (hover: hover) {
    .nv-row .nv-row-actions > * { opacity: 0; transition: opacity var(--nv-ease); }
    .nv-row:hover .nv-row-actions > *,
    .nv-row:focus-within .nv-row-actions > *,
    .nv-row.is-open .nv-row-actions > *,
    .nv-row .nv-row-actions > .nv-confirm { opacity: 1; }
}

.nv-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 16px;
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--nv-fg3);
}

.nv-pager__count { margin: 0; }
.nv-pager__count b { color: var(--nv-fg2); font-weight: 600; font-variant-numeric: tabular-nums; }

.nv-pages {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--nv-ctl);
    border: 1px solid var(--nv-ctl-line);
    border-radius: 10px;
}

.nv-pages .nv-seg-btn { min-width: 34px; padding: 0 8px; }
.nv-pages__gap { padding: 0 4px; color: var(--nv-fg3); }

.nv-empty {
    margin: 0;
    padding: 40px 16px;
    text-align: center;
    color: var(--nv-fg3);
    font-size: 0.9rem;
}

.nv-empty b {
    display: block;
    margin-bottom: 4px;
    color: var(--nv-fg);
    font-size: 0.95rem;
    font-weight: 600;
}

.nv-empty p { margin: 0 auto; max-width: 52ch; }
.nv-empty .nv-btn { margin-top: 16px; }

.nv-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--nv-fg2);
}

.nv-loading::before {
    content: '';
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--nv-acc);
    border-radius: 50%;
    animation: nv-spin 0.8s linear infinite;
}

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

.nv-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--nv-fg);
}

.nv-status::before {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nv-fg3);
}

.nv-status--ok::before { background: var(--nv-ok); }
.nv-status--warn::before { background: var(--nv-warn); }
.nv-status--bad::before { background: var(--nv-bad); }

.nv-plan {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--nv-line-2);
    border-radius: 6px;
    color: var(--nv-fg);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: nowrap;
}

.nv-plan--top { border-color: var(--nv-acc); color: #c9c1ff; }
.nv-plan--muted { color: var(--nv-fg3); }

.nv-kv {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
    font-size: 0.875rem;
}

.nv-kv dt { margin: 0; font-weight: 500; color: var(--nv-fg3); }
.nv-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--nv-fg); }

/* ── Ebenen: Schublade, Modal, Rueckfrage, Toasts ───────────────────────────────────────────────── */

.nv-shade {
    position: fixed;
    inset: 0;
    z-index: 1044;
    background: rgba(0, 0, 0, 0.5);
}

.nv-shade[hidden] { display: none; }

.nv-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    background: var(--nv-surface);
    border-left: 1px solid var(--nv-line-2);
    color: var(--nv-fg2);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.nv-drawer.is-open {
    transform: none;
    visibility: visible;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, visibility 0s;
}

.nv-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--nv-line);
}

.nv-drawer__head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nv-fg);
    overflow-wrap: anywhere;
}

.nv-drawer__head p { margin: 4px 0 0; font-size: 0.85rem; color: var(--nv-fg3); overflow-wrap: anywhere; }

.nv-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nv-drawer__body h3 {
    margin: 24px 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nv-fg3);
}

.nv-drawer__body h3:first-child { margin-top: 0; }

.nv-drawer__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--nv-line);
}

html.nv-locked,
html.nv-locked body { overflow: hidden; }

/* Bootstrap-Modal in dunkler Haut; Bootstrap regelt Fokus und Esc */
.nv-modal .modal-content {
    background: var(--nv-surface);
    border: 1px solid var(--nv-line-2);
    border-radius: 14px;
    box-shadow: var(--nv-pop-shadow);
    color: var(--nv-fg2);
}

.nv-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--nv-line);
}

.nv-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--nv-fg);
}

.nv-modal .modal-body {
    padding: 20px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.nv-modal .modal-footer {
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--nv-line);
}

.nv-modal .modal-footer > * { margin: 0; }
.nv-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 0.6; }
.nv-modal .btn-close:hover { opacity: 1; }

/* Rueckfrage in der Zeile (aus .th-confirm des Dashboards) */
.nv-confirm {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--nv-fg);
}

.nv-confirm__text { min-width: 0; }

.nv-confirm--pop {
    position: absolute;
    right: 8px;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    padding: 6px 8px 6px 12px;
    background: #1b1f30;
    border: 1px solid var(--nv-ctl-line);
    border-radius: 10px;
    box-shadow: var(--nv-pop-shadow);
    white-space: nowrap;
}

/* Toasts: Container #toastContainer in base.html, Ausloeser nv.toast() bzw. jktPlatform.showToast() */
.nv-toasts {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 24px);
    transform: translateX(-50%);
    pointer-events: none;
}

.nv-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 440px;
    max-width: 100%;
    padding: 10px 6px 10px 14px;
    background: rgba(24, 28, 40, 0.98);
    border: 1px solid var(--nv-ctl-line);
    border-left: 3px solid var(--nv-tint);
    border-radius: 12px;
    box-shadow: var(--nv-pop-shadow);
    color: var(--nv-fg);
    font-size: 0.875rem;
    line-height: 1.45;
    pointer-events: auto;
    animation: nv-toast-in 0.16s ease-out;
}

.nv-toast__icon { flex: 0 0 auto; margin-top: 1px; font-size: 1rem; color: var(--nv-tint); }
.nv-toast__text { flex: 1 1 auto; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }

.nv-toast__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px 0 -4px 4px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--nv-fg3);
    font-size: 1.1rem;
    cursor: pointer;
}

.nv-toast__close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.nv-toast--ok { border-left-color: var(--nv-ok); }
.nv-toast--ok .nv-toast__icon { color: var(--nv-ok); }
.nv-toast--warn { border-left-color: var(--nv-warn); }
.nv-toast--warn .nv-toast__icon { color: var(--nv-warn); }
.nv-toast--bad { border-left-color: var(--nv-bad); }
.nv-toast--bad .nv-toast__icon { color: var(--nv-bad); }

.nv-toast.is-leaving { opacity: 0; transition: opacity 0.16s ease; }

@keyframes nv-toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ── Gesperrt, Editor, Dateien ──────────────────────────────────────────────────────────────────── */

/* Upsell wie die gesperrten Kennzahlen des Dashboards und vorschau_basis.html */
.nv-upsell {
    position: relative;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    color: var(--nv-fg2);
    overflow: hidden;
}

.nv-upsell__text h2,
.nv-upsell__text h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nv-fg);
}

.nv-upsell__text p {
    margin: 0 0 16px;
    max-width: 52ch;
    font-size: 0.9rem;
    line-height: 1.55;
}

.nv-upsell__shot {
    position: relative;
    margin: 16px 0 0;
    border-radius: 12px;
    overflow: hidden;
}

.nv-upsell__shot img {
    display: block;
    width: 100%;
    height: auto;
    filter: blur(6px);
    opacity: 0.55;
    transform: scale(1.04);
    user-select: none;
    pointer-events: none;
}

.nv-upsell--split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: center;
    padding: 24px;
}

.nv-upsell--split .nv-upsell__shot { margin: 0; }

.nv-blur {
    filter: blur(5px);
    opacity: 0.55;
    user-select: none;
}

/* Quill (Theme snow) dunkel: Huelle .nv-quill um Werkzeugleiste und Editor. Selektoren mit .ql-snow,
   damit sie ohne !important vor quill.snow.css liegen, das die Seiten erst danach laden. */
.nv-quill .ql-toolbar.ql-snow {
    padding: 6px 8px;
    background: var(--nv-ctl);
    border: 1px solid var(--nv-ctl-line);
    border-radius: 10px 10px 0 0;
    font-family: inherit;
}

.nv-quill .ql-container.ql-snow {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--nv-ctl-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    color: var(--nv-fg);
    font-family: inherit;
    font-size: 0.95rem;
}

.nv-quill:focus-within .ql-toolbar.ql-snow,
.nv-quill:focus-within .ql-container.ql-snow { border-color: var(--nv-acc-line); }

.nv-quill .ql-snow .ql-editor { min-height: 160px; padding: 12px 14px; line-height: 1.6; }
.nv-quill .ql-snow .ql-editor.ql-blank::before { left: 14px; right: 14px; color: rgba(255, 255, 255, 0.45); }
.nv-quill .ql-snow .ql-editor a { color: var(--nv-tint); }
.nv-quill .ql-snow .ql-editor blockquote { border-left-color: rgba(255, 255, 255, 0.2); color: var(--nv-fg2); }
.nv-quill .ql-snow .ql-editor pre.ql-syntax,
.nv-quill .ql-snow .ql-editor code { background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.9); }

.nv-quill .ql-snow.ql-toolbar .ql-stroke,
.nv-quill .ql-snow .ql-toolbar .ql-stroke { stroke: rgba(255, 255, 255, 0.75); }
.nv-quill .ql-snow.ql-toolbar .ql-fill,
.nv-quill .ql-snow .ql-toolbar .ql-fill { fill: rgba(255, 255, 255, 0.75); }
.nv-quill .ql-snow.ql-toolbar .ql-picker,
.nv-quill .ql-snow .ql-picker-label { color: rgba(255, 255, 255, 0.8); }

.nv-quill .ql-snow.ql-toolbar button:hover .ql-stroke,
.nv-quill .ql-snow.ql-toolbar button:focus .ql-stroke,
.nv-quill .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.nv-quill .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke { stroke: #c9c1ff; }
.nv-quill .ql-snow.ql-toolbar button:hover .ql-fill,
.nv-quill .ql-snow.ql-toolbar button:focus .ql-fill,
.nv-quill .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: #c9c1ff; }
.nv-quill .ql-snow.ql-toolbar button:hover,
.nv-quill .ql-snow.ql-toolbar button:focus,
.nv-quill .ql-snow.ql-toolbar button.ql-active,
.nv-quill .ql-snow.ql-toolbar .ql-picker-label:hover,
.nv-quill .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.nv-quill .ql-snow.ql-toolbar .ql-picker-item:hover,
.nv-quill .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: #c9c1ff; }

.nv-quill .ql-snow .ql-picker-options {
    background: #1b1f30;
    border: 1px solid var(--nv-ctl-line);
    border-radius: 8px;
    box-shadow: var(--nv-pop-shadow);
}

.nv-quill .ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: transparent; }
.nv-quill .ql-snow .ql-picker.ql-expanded .ql-picker-options { border-color: var(--nv-ctl-line); }
.nv-quill .ql-snow .ql-picker-item { color: rgba(255, 255, 255, 0.85); }

.nv-quill .ql-snow .ql-tooltip {
    background: #1b1f30;
    border: 1px solid var(--nv-ctl-line);
    border-radius: 10px;
    box-shadow: var(--nv-pop-shadow);
    color: var(--nv-fg2);
}

.nv-quill .ql-snow .ql-tooltip input[type=text] {
    background: var(--nv-ctl);
    border: 1px solid var(--nv-ctl-line);
    border-radius: 8px;
    color: #fff;
    color-scheme: dark;
}

.nv-quill .ql-snow .ql-tooltip a.ql-action,
.nv-quill .ql-snow .ql-tooltip a.ql-remove,
.nv-quill .ql-snow .ql-tooltip a.ql-preview { color: var(--nv-tint); }

/* Ablageflaeche fuer Dateien */
.nv-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 140px;
    padding: 24px 16px;
    margin: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    color: var(--nv-fg3);
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--nv-ease), border-color var(--nv-ease);
}

.nv-dropzone > .bi { font-size: 1.6rem; color: var(--nv-tint); margin-bottom: 4px; }
.nv-dropzone b { color: var(--nv-fg); font-size: 0.95rem; font-weight: 600; }
.nv-dropzone:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); }

.nv-dropzone.is-over {
    background: var(--nv-acc-soft);
    border-color: var(--nv-acc-line);
    color: var(--nv-fg2);
}

.nv-dropzone:focus-within {
    outline: 2px solid var(--nv-focus);
    outline-offset: 2px;
}

/* Fortschritt (natives progress) */
.nv-progress {
    display: block;
    width: 100%;
    height: 6px;
    appearance: none;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--nv-acc);
    overflow: hidden;
}

.nv-progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
.nv-progress::-webkit-progress-value { background: var(--nv-acc); border-radius: 3px; transition: width 0.2s ease; }
.nv-progress::-moz-progress-bar { background: var(--nv-acc); border-radius: 3px; }

/* ── Hilfsklassen: Abstaende nur aus der Skala ──────────────────────────────────────────────────── */

.nv-mt-0 { margin-top: 0; }
.nv-mt-4 { margin-top: 4px; }
.nv-mt-8 { margin-top: 8px; }
.nv-mt-12 { margin-top: 12px; }
.nv-mt-16 { margin-top: 16px; }
.nv-mt-20 { margin-top: 20px; }
.nv-mt-24 { margin-top: 24px; }
.nv-mt-32 { margin-top: 32px; }
.nv-mt-48 { margin-top: 48px; }
.nv-mb-0 { margin-bottom: 0; }
.nv-mb-4 { margin-bottom: 4px; }
.nv-mb-8 { margin-bottom: 8px; }
.nv-mb-12 { margin-bottom: 12px; }
.nv-mb-16 { margin-bottom: 16px; }
.nv-mb-20 { margin-bottom: 20px; }
.nv-mb-24 { margin-bottom: 24px; }
.nv-mb-32 { margin-bottom: 32px; }
.nv-mb-48 { margin-bottom: 48px; }
.nv-gap-4 { gap: 4px; }
.nv-gap-8 { gap: 8px; }
.nv-gap-12 { gap: 12px; }
.nv-gap-16 { gap: 16px; }
.nv-gap-20 { gap: 20px; }
.nv-gap-24 { gap: 24px; }
.nv-gap-32 { gap: 32px; }
.nv-gap-48 { gap: 48px; }

.nv-muted { color: var(--nv-fg3); }
.nv-tint { color: var(--nv-tint); }

/* ── Bausteine aus Welle 2 (seit 23.10.2026, Welle 3): Schalter, Avatar, Auswahl-Zeilen, Summen,
   Knopfzeile, Pfad, Auswahlknopf, Toast mit Knopf. Herkunft je Baustein im Kommentar. ─────────── */

/* Schalter (aus .ko-switch, Konto): Checkbox mit role="switch"; das echte Feld liegt unsichtbar auf der
   Spur und bleibt fokussierbar, die Spur zeigt den Zustand */
.nv-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nv-fg);
    cursor: pointer;
}

.nv-switch__input {
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 24px;
    margin: -12px 0 0;
    opacity: 0;
    cursor: pointer;
}

.nv-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid var(--nv-line-2);
    transition: background-color var(--nv-ease), border-color var(--nv-ease);
}

.nv-switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    transition: transform var(--nv-ease);
}

.nv-switch__input:checked + .nv-switch__track { background: var(--nv-acc-on); border-color: var(--nv-acc-line); }
.nv-switch__input:checked + .nv-switch__track::after { transform: translateX(16px); background: #fff; }
.nv-switch__input:focus-visible + .nv-switch__track { outline: 2px solid var(--nv-focus); outline-offset: 2px; }
.nv-switch__input:disabled + .nv-switch__track { opacity: 0.5; }
.nv-switch__label { min-width: 0; }

/* Avatar (aus .ko-avatar, Konto, und .sp-av, Support; gleich gebaut wie .bv-av und .pd-avatar):
   Profilbild oder Initialen. Mit Bild traegt der Kreis .has-bild, die Initialen bleiben fuer den Fall, dass
   das Bild nicht laedt, und werden erst dann wieder sichtbar. --lg 56 px (Handy 48), --xl 96 px (Handy 72). */
.nv-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nv-ctl);
    border: 1px solid var(--nv-line-2);
    color: var(--nv-fg);
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
}

.nv-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nv-avatar.has-bild .nv-avatar__initialen { visibility: hidden; }
.nv-avatar--lg { width: 56px; height: 56px; font-size: 1.1rem; font-weight: 700; }
.nv-avatar--xl { width: 96px; height: 96px; font-size: 1.6rem; font-weight: 700; }

/* Auswahl als Zeile (aus .ko-wahl__zeile, Abo-Verwaltung): Radio oder Checkbox mit Text in einer
   umrandeten Zeile, die gewaehlte Zeile als lila Flaeche. .nv-choices ist das fieldset darum.
   --box fuer Pflicht-Haekchen mit laengerem Text (aus .co-check, Checkout): oben ausgerichtet, ruhige
   Flaeche, gewaehlt nur ein lila Hauch. */
.nv-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.nv-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 12px;
    margin: 0;
    border: 1px solid var(--nv-ctl-line);
    border-radius: 10px;
    background: var(--nv-ctl);
    font-size: 0.9rem;
    color: var(--nv-fg2);
    cursor: pointer;
    transition: background-color var(--nv-ease), border-color var(--nv-ease);
}

.nv-choice:hover { border-color: rgba(255, 255, 255, 0.24); }
.nv-choice:has(input:checked) { border-color: var(--nv-acc-line); background: var(--nv-acc-on); color: #fff; }

.nv-choice input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--nv-acc);
    color-scheme: dark;
    cursor: pointer;
}

.nv-choice input:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 2px; }

.nv-choice--box {
    align-items: flex-start;
    padding: 12px 14px;
    line-height: 1.45;
    border-color: var(--nv-card-line);
    background: var(--nv-card);
    color: var(--nv-fg);
}

.nv-choice--box:hover { border-color: var(--nv-line-2); }
.nv-choice--box:has(input:checked) { border-color: var(--nv-acc-line); background: var(--nv-acc-soft); color: var(--nv-fg); }
.nv-choice--box input { margin-top: 2px; }

/* Summenzeilen (aus .co-summary, Checkout und Upgrade-Vorschau): links Text, rechts Betrag;
   --muted fuer Nebenzeilen (USt), --total fuer den faelligen Betrag */
.nv-sum {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nv-line);
}

.nv-sum__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--nv-fg2);
}

.nv-sum__row > :last-child { text-align: right; white-space: nowrap; }
.nv-sum__row--muted { font-size: 0.8rem; color: var(--nv-fg3); }
.nv-sum__row--total { margin-top: 4px; font-size: 1rem; font-weight: 700; color: var(--nv-fg); }

/* Knopfzeile (aus .ko-aktionen, Konto; gleich gebaut wie .aa-knopfzeile): Knoepfe und Formulare
   nebeneinander, dazu wahlweise ein .nv-save; auf dem Handy volle Breite */
.nv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.nv-actions form { margin: 0; }
.nv-actions .nv-save { margin: 0; }

/* Pfad ueber dem Titel (aus .ln-crumbs, Lektion, und .acd-pfad, Kursseite):
   <nav class="nv-crumbs" aria-label="Pfad"><ol><li><a href="..">Kurs</a></li><li aria-current="page">..</li></ol></nav> */
.nv-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--nv-tint);
}

.nv-crumbs li { min-width: 0; overflow-wrap: anywhere; }

.nv-crumbs li + li::before {
    content: "\203A";
    content: "\203A" / "";
    margin: 0 8px;
    color: var(--nv-fg3);
}

.nv-crumbs a { color: var(--nv-tint); text-decoration: none; }
.nv-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nv-crumbs [aria-current] { color: var(--nv-fg2); }

/* Auswahlknopf (aus .ad-auswahl, Marketing und Leads; Gegenstueck zu .bv-select-btn): Bootstrap-Dropdown
   als Knopf mit Label und Wert, .is-on bei gesetztem Filter, Menue .nv-menu mit Links */
.nv-pick__btn { gap: 8px; }
.nv-pick__label { color: var(--nv-fg3); font-weight: 500; }
.nv-pick__value { color: #fff; }
.nv-pick__btn .bi { font-size: 0.75rem; color: var(--nv-fg3); }
.nv-pick__btn.is-on { border-color: var(--nv-acc-line); }
.nv-pick .dropdown-menu { max-height: 60vh; overflow-y: auto; }

/* Toast mit Knopf (aus .ad-toast-action, .bv-toast-undo und SupportUI.toast): nv.toast(text, art,
   {aktion: {text, klick}}) oder {aktion: {text, href}}; der Knopf steht vor dem Schliessen-Knopf */
.nv-toast__action {
    flex: 0 0 auto;
    align-self: center;
    padding: 4px 6px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Fokus und Bewegung ─────────────────────────────────────────────────────────────────────────── */

.nv-btn:focus-visible,
.nv-seg-btn:focus-visible,
.nv-view:focus-visible,
.nv-link:focus-visible,
.nv-kpi:focus-visible,
.nv-chip__remove:focus-visible,
.nv-toast__close:focus-visible,
.nv-card--link:focus-visible,
.nv-row a:focus-visible,
.nv-table th a:focus-visible,
.nv-crumbs a:focus-visible,
.nv-toast__action:focus-visible,
.nv-check input:focus-visible {
    outline: 2px solid var(--nv-focus);
    outline-offset: 2px;
}

.nv-view:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
    .nv-drawer,
    .nv-drawer.is-open { transition: none; }
    .nv-toast { animation: none; }
    .nv-loading::before { animation: none; border-top-color: rgba(255, 255, 255, 0.18); border-right-color: var(--nv-acc); }
    .nv-switch__track,
    .nv-switch__track::after { transition: none; }
}

/* ── Schmale Bildschirme ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
    .nv-grid > [class*="nv-span-"] { grid-column: span 12; }
    .nv-upsell--split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    /* unten Platz fuer die Handy-Leiste aus base.html */
    .nv-page { padding: 12px 12px 104px; }
    .nv-panel { padding: 16px 14px 20px; border-radius: 14px; }
    .nv-head { align-items: stretch; padding-bottom: 16px; margin-bottom: 16px; }
    .nv-head h1 { font-size: 1.3rem; }
    .nv-head__tools { width: 100%; }
    .nv-head__tools > .nv-btn,
    .nv-head__tools > form,
    .nv-head__tools > .nv-search { flex: 1 1 100%; }
    .nv-head__tools > form .nv-btn { width: 100%; }
    .nv-card { padding: 14px; }
    .nv-hero { padding: 16px; }
    .nv-hero__value { font-size: 2.2rem; }

    .nv-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .nv-kpis > .nv-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }

    .nv-seg:not(.nv-seg--inline) { display: flex; width: 100%; }
    .nv-seg:not(.nv-seg--inline) .nv-seg-btn { flex: 1 1 0; min-width: 0; }
    .nv-seg-btn { min-height: 40px; }
    .nv-btn--sm { min-height: 40px; }
    .nv-btn--icon.nv-btn--sm { width: 40px; }

    /* iOS zoomt beim Fokus in Felder unter 16 px */
    .nv-field,
    .nv-select { font-size: 16px; }

    .nv-form-grid { grid-template-columns: minmax(0, 1fr); }
    .nv-bar > :not(.nv-seg--inline) { flex: 1 1 100%; }

    /* Tipp-Ziele ab 40 px (Haekchen, Pfad), Knopfzeilen und Auswahlknoepfe in voller Breite */
    .nv-check { min-height: 40px; }
    .nv-crumbs ol { margin: -10px 0 -6px; align-items: center; }
    .nv-crumbs li { display: inline-flex; align-items: center; min-height: 40px; }
    .nv-crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
    .nv-actions > .nv-btn,
    .nv-actions > form,
    .nv-actions > form .nv-btn { width: 100%; }
    .nv-pick,
    .nv-pick__btn { width: 100%; }
    .nv-pick__btn { justify-content: space-between; }
    .nv-pick__btn .bi { margin-left: auto; }
    .nv-avatar--lg { width: 48px; height: 48px; font-size: 1rem; }
    .nv-avatar--xl { width: 72px; height: 72px; font-size: 1.3rem; }

    .nv-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .nv-kv dd { margin-bottom: 8px; }

    /* Tabellen als gestapelte Karten */
    .nv-table--stacked thead { display: none; }
    .nv-table--stacked,
    .nv-table--stacked tbody { display: block; }
    .nv-table--stacked tr {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--nv-line-soft);
    }
    .nv-table--stacked tbody tr:last-child { border-bottom: 0; }
    .nv-tablewrap > .nv-table--stacked:last-child tbody tr:last-child { border-radius: 0 0 11px 11px; }
    .nv-table--stacked td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .nv-table--stacked td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 50%;
        font-size: 0.78rem;
        color: var(--nv-fg3);
    }
    .nv-table--stacked td.num { text-align: right; }
    .nv-table--stacked td[data-label] > * { text-align: right; }
    .nv-table--stacked .nv-row-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
    .nv-table--stacked .nv-row-actions > * { opacity: 1; }

    .nv-pager { justify-content: center; text-align: center; }
    .nv-pages .nv-seg-btn { min-width: 40px; }

    .nv-drawer { width: 100%; border-left: 0; }
    .nv-drawer__head,
    .nv-drawer__body,
    .nv-drawer__foot { padding-left: 16px; padding-right: 16px; }
    .nv-drawer__foot .nv-btn { flex: 1 1 auto; }

    /* Modal als Sheet von unten, ueber der Handy-Leiste */
    .nv-modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        min-height: 0;
        margin: 0;
    }
    .nv-modal.fade .modal-dialog { transform: translateY(24px); }
    .nv-modal.show .modal-dialog { transform: none; }
    .nv-modal .modal-content {
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .nv-modal .modal-body { overflow-y: auto; }
    .nv-modal .modal-footer > .nv-btn,
    .nv-modal .modal-footer > .btn { flex: 1 1 0; }

    .nv-confirm--pop {
        position: static;
        transform: none;
        white-space: normal;
    }

    .nv-toasts { bottom: calc(84px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
    .nv-toast { width: 100%; }

    .nv-upsell { padding: 16px; }
    .nv-upsell--split { padding: 16px; }
}