/* ── NAVIGATIONS-WERKBANK ──────────────────────────────────────────────────────
   Die vier Varianten der MaxxiPower-Navigations-Vorlage (Hover-Tooltip, Accordion,
   Slide-Out Panel, Collapsed) plus Gruppen-Panel, Schnellsuche und Zuletzt-benutzt.
   Masse, Radien und Typo folgen der Vorlage; die FARBEN kommen aus den Token der
   Konsole, damit jede Marke sie traegt. Die Vorlage „MaxxiPower" setzt am Ende der
   Datei genau ihre eigenen Token — dann sieht es aus wie das Original.

   Alles ausser Akkordeon gilt ab 901 px: darunter ist die Spur eine Schublade.
   ────────────────────────────────────────────────────────────────────────────── */

:root{
  --nv-panel-w:280px;      /* Vorlage: .nav__panel width 280px */
  --nv-top:70px;           /* Hoehe der Kopfleiste — unter 1280 px beginnt das Panel darunter */
  --nv-fly-w:260px;        /* Vorlage: #hover-preview width 260px */
  --nv-menu-w:340px;       /* Vorlage: .settings width 340px */
  --nv-r-card:0.75rem;     /* Vorlage: mode-card / preview radius */
  --nv-r-pop:1rem;         /* Vorlage: settings / dropdown radius */
  --nv-pop:var(--surface); /* Flaeche schwebender Karten — Vorlage faerbt sie um */
  --nv-pop-line:var(--line);
  --nv-pop-ink:var(--ink);
  --nv-pop-ink-soft:var(--ink-soft);
  --nv-pop-shadow:0 12px 40px rgba(20,22,25,.14);
}

/* Fokus sichtbar auf allem, was diese Datei anfasst (Regelwerk R26). */
.nv-item:focus-visible,.nv-sub-a:focus-visible,.nv-g:focus-visible,.nv-gear:focus-visible,
.mode-card:focus-visible,.nvw-card:focus-visible,.nv-p-x:focus-visible,.nv-menu-x:focus-visible,
.nv-menu-cta:focus-visible,.nv-cmd-i:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* ── Variante A: Hover-Tooltip ──
   Vorlage: 260 px, Radius .75rem, Polster 1.25rem 1.5rem, Pfeil links oben,
   Titel in Akzentfarbe, Versalien, Trennlinie darunter. */
.nv-fly{position:fixed;z-index:120;width:var(--nv-fly-w);max-width:340px;
  background:var(--nv-pop);border:1px solid var(--nv-pop-line);border-radius:var(--nv-r-card);
  padding:1.25rem 1.5rem;box-shadow:var(--nv-pop-shadow);
  opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .15s var(--ease),transform .15s var(--ease);
  max-height:88vh;overflow-y:auto;scrollbar-width:none}
.nv-fly::-webkit-scrollbar{width:0;display:none}
.nv-fly.on{opacity:1;transform:none;pointer-events:auto}
.nv-fly::before{content:"";position:absolute;left:-6px;top:20px;width:12px;height:12px;
  background:var(--nv-pop);border-left:1px solid var(--nv-pop-line);border-bottom:1px solid var(--nv-pop-line);
  transform:rotate(45deg)}
.hp-title{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--lime);
  font-weight:700;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--nv-pop-line)}
.hp-desc{font-size:.75rem;line-height:1.5;color:var(--nv-pop-ink-soft);margin:-.15rem 0 .7rem}
.nv-sub-a{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem 0;
  font-size:.8125rem;color:var(--nv-pop-ink-soft);background:none;border:0;text-align:left;
  cursor:pointer;font-family:var(--sans);transition:color .12s}
.nv-sub-a .ic{width:12px;height:12px;flex:none;color:var(--nv-pop-ink-soft);transition:color .12s}
.nv-sub-a:hover{color:var(--nv-pop-ink)}
.nv-sub-a:hover .ic{color:var(--lime)}
.nv-sub-a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-sub-lbl{font-size:.625rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--nv-pop-ink-soft);opacity:.75;padding:.6rem 0 .25rem}

/* Punkt-Kachel in Karte und Panel — Anmutung wie .navi in der Spur. */
.nv-item{display:flex;align-items:center;gap:11px;width:100%;padding:8px 12px;border-radius:10px;
  background:none;border:0;color:var(--rail-ink);font-size:.94rem;font-weight:500;text-align:left;
  position:relative;white-space:nowrap;font-family:var(--f-nav,inherit);cursor:pointer;
  transition:background .16s,color .16s}
.nv-item .ic{width:19px;height:19px;flex:none;color:var(--rail-ink-soft);transition:color .16s}
.nv-item:hover{background:var(--rail-hover-bg,rgba(255,255,255,.06));color:var(--rail-hover-ink,#fff)}
.nv-item:hover .ic{color:var(--lime)}
.nv-item.on{background:var(--rail-active);font-weight:600}
.nv-item.on .ic{color:var(--lime)}
.nv-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nv-item .nv-chip{font-size:.62rem;font-weight:900;letter-spacing:.05em;padding:2px 6px;border-radius:6px;
  background:var(--lime);color:var(--on-lime);flex:none}
.nv-item .nv-chip.mut{background:transparent;color:var(--rail-ink-soft);border:1px solid var(--rail-line)}
/* In der Schwebe-Karte liegen die Punkte auf der Popover-Flaeche, nicht auf der Spur. */
.nv-fly .nv-item{color:var(--nv-pop-ink);font-size:.8125rem;padding:.4rem .5rem}
.nv-fly .nv-item .ic{width:14px;height:14px;color:var(--nv-pop-ink-soft)}
.nv-fly .nv-item:hover{background:color-mix(in srgb,var(--lime) 8%,transparent);color:var(--nv-pop-ink)}

/* ── Variante B: Accordion — Unterseiten inline, Kante links ──
   Vorlage: Einzug 2rem, Kante 1.5px, beim Zeigen Akzentfarbe, .8125rem. */
.nv-sub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.nv-sub.open{max-height:900px}
.nv-sub .nv-sub-a{padding:.375rem .75rem;margin-left:2rem;border-left:1.5px solid var(--rail-line);
  color:var(--rail-ink-soft);border-radius:0 8px 8px 0;transition:all .12s}
.nv-sub .nv-sub-a .ic{color:var(--rail-ink-soft)}
.nv-sub .nv-sub-a:hover{color:var(--lime);border-left-color:var(--lime);
  background:color-mix(in srgb,var(--lime) 6%,transparent)}
.nv-sub .nv-sub-a:hover .ic{color:var(--lime)}
.nv-sub .nv-sub-lbl{margin-left:2rem;border-left:1.5px solid var(--rail-line);padding-left:.75rem;
  color:var(--rail-ink-soft)}
#railMain .navi.nv-auf{color:var(--rail-hover-ink,#fff)}
#railMain .navi.nv-auf .ic{color:var(--lime)}
body.nvv-akk #railMain .navi::after{content:"";width:6px;height:6px;flex:none;margin-left:auto;
  border-right:2px solid var(--rail-ink-soft);border-bottom:2px solid var(--rail-ink-soft);
  transform:rotate(-45deg);transition:transform .2s var(--ease);opacity:.6}
body.nvv-akk #railMain .navi.nv-auf::after{transform:rotate(45deg);border-color:var(--lime);opacity:1}
body.nvv-akk.rail-collapsed #railMain .navi::after{display:none}

/* Gruppen-Akkordeon: Kante an der Gruppe, faerbt beim Zeigen. */
body.nvs-grpakk #railMain .grp{border-left:2px solid var(--rail-line);padding-left:8px;margin-left:2px;
  transition:border-color .18s var(--ease)}
body.nvs-grpakk #railMain .grp:hover{border-left-color:var(--lime)}
body.nvs-grpakk #railMain .grp-lbl{transition:color .16s}
body.nvs-grpakk #railMain .grp:hover .grp-lbl{color:var(--lime)}
body.nvs-grpakk #railMain .grp:hover .grp-lbl::after{border-color:var(--lime)}
body.nvs-grpakk.rail-collapsed #railMain .grp{border-left:0;padding-left:0;margin-left:0}

/* ── Variante C: Slide-Out Panel ──
   Eigene SPALTE im Raster statt fixierter Flaeche ueber dem Inhalt: sonst
   verschwinden Kopfleiste und Seitentitel darunter. */
#nvPanel{display:none;position:fixed;top:0;left:var(--railw);width:var(--nv-panel-w);height:100vh;
  background:var(--rail-2);border-right:1px solid var(--rail-line);z-index:70;
  transform:translateX(-104%);transition:transform .3s var(--ease),left .3s var(--ease);
  flex-direction:column;padding:2rem 0 1rem}
#nvPanel.on{transform:none}
.nv-p-head{display:flex;align-items:center;gap:10px;padding:0 1.5rem 1.5rem;border-bottom:1px solid var(--rail-line)}
.nv-p-head b{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--rail-ink);flex:1;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-p-x{width:28px;height:28px;flex:none;border-radius:6px;border:1px solid var(--rail-line);background:none;
  display:grid;place-items:center;color:var(--rail-ink-soft);cursor:pointer;transition:border-color .15s,color .15s}
.nv-p-x:hover{border-color:var(--lime);color:var(--lime)}
.nv-p-x .ic{width:14px;height:14px}
.nv-p-desc{padding:1rem 1.5rem 0;font-size:.75rem;color:var(--rail-ink-soft);line-height:1.5}
.nv-p-list{flex:1;overflow-y:auto;padding:.75rem 1rem;scrollbar-width:none}
.nv-p-list::-webkit-scrollbar{width:0;display:none}
.nv-p-list .nv-sub-a{padding:.5rem .75rem;border-radius:10px;color:var(--rail-ink-soft);font-size:.8125rem}
.nv-p-list .nv-sub-a:hover{color:var(--rail-hover-ink,#fff);background:var(--rail-hover-bg,rgba(255,255,255,.05))}
#railMain .navi.nv-panel-auf{background:color-mix(in srgb,var(--lime) 8%,transparent)}

@media(min-width:901px){
  body.nvv-panel #nvPanel,body.nvs-grppanel #nvPanel{display:flex}
  body.rail-collapsed #nvPanel{left:var(--railw-c)}
  body.nvv-panel .rail{width:var(--railw)}
  body.rail-collapsed .rail{width:var(--railw-c)}
  .app{transition:grid-template-columns .28s var(--ease)}
  /* Gruppen-Spur (Erweiterung) */
  body.nvs-grppanel #railMain{display:none}
  body.nvs-grppanel #nvGroups{display:flex}
}
/* AB 1280 px RUECKT der Arbeitsbereich zur Seite — nichts wird verdeckt.
   DARUNTER legt sich das Panel darueber und beginnt UNTER der Kopfleiste: bei 1180 px
   blieben dem Arbeitsbereich sonst 626 px, und die Kopfleiste der Konsole (Tarif-
   Umschalter, 334 px, ohne Umbruch) laeuft dann waagerecht ueber — gemessen 6 px.
   Lieber ein Panel ueber dem Inhalt als eine Konsole, die aus dem Fenster laeuft. */
@media(min-width:1280px){
  body.nvv-panel.nv-open .app,body.nvs-grppanel.nv-open .app{
    grid-template-columns:calc(var(--railw) + var(--nv-panel-w)) minmax(0,1fr)}
  body.rail-collapsed.nv-open .app{grid-template-columns:calc(var(--railw-c) + var(--nv-panel-w)) minmax(0,1fr)}
}
@media(min-width:901px) and (max-width:1279px){
  #nvPanel{top:var(--nv-top);height:calc(100vh - var(--nv-top));box-shadow:var(--shadow-lg)}
}
#nvGroups{display:none;flex-direction:column;gap:5px;padding:6px 12px 12px;overflow-y:auto;flex:1;
  scrollbar-width:none}
#nvGroups::-webkit-scrollbar{width:0;display:none}
.nv-g{display:flex;align-items:center;justify-content:center;width:100%;padding:11px 0;
  border-radius:12px;background:none;border:0;color:var(--rail-ink-soft);position:relative;
  transition:background .16s,color .16s;cursor:pointer}
.nv-g .ic{width:21px;height:21px}
.nv-g:hover{background:var(--rail-hover-bg,rgba(255,255,255,.06));color:var(--rail-hover-ink,#fff)}
.nv-g.on{background:var(--rail-active);color:var(--rail-ink)}
.nv-g.on .ic{color:var(--lime)}
.nv-g.open::after{content:"";position:absolute;right:-12px;top:14px;bottom:14px;width:3px;
  border-radius:3px 0 0 3px;background:var(--lime)}

/* ── Variante D: Kurzhinweis statt Systemblase ── */
@media(min-width:901px){
  body.nvf-tip.rail-collapsed .navi[data-tip]{overflow:visible}
  body.nvf-tip.rail-collapsed .navi[data-tip]:hover::after,
  body.nvf-tip .nv-g[data-tip]:hover::after,
  body.nvf-tip .nv-gear[data-tip]:hover::after{
    content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);
    background:var(--nv-pop);color:var(--nv-pop-ink);border:1px solid var(--nv-pop-line);
    font-size:.75rem;font-weight:600;padding:.375rem .75rem;border-radius:6px;white-space:nowrap;
    box-shadow:var(--shadow);pointer-events:none;z-index:130}
}

/* ── Einstellungs-Menue unten in der Spur (Bauform der Vorlage) ── */
.nv-gear{width:36px;height:36px;flex:none;border-radius:8px;background:var(--rail-hover-bg,rgba(255,255,255,.06));
  border:1px solid var(--rail-line);cursor:pointer;display:grid;place-items:center;color:var(--rail-ink-soft);
  position:relative;transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.nv-gear:hover{border-color:var(--lime);color:var(--lime);transform:rotate(45deg)}
.nv-gear svg{width:18px;height:18px}
body.rail-collapsed .rail-foot{flex-wrap:wrap;justify-content:center;gap:8px}

.nv-menu{position:fixed;z-index:200;width:var(--nv-menu-w);max-width:calc(100vw - 24px);
  background:var(--nv-pop);border:1px solid var(--nv-pop-line);border-radius:var(--nv-r-pop);
  box-shadow:var(--nv-pop-shadow);overflow:hidden;
  transform:translateY(10px) scale(.95);opacity:0;pointer-events:none;
  transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.nv-menu.on{transform:none;opacity:1;pointer-events:auto}
.nv-menu-head{padding:1.25rem 1.5rem;border-bottom:1px solid var(--nv-pop-line);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.nv-menu-title{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--nv-pop-ink)}
.nv-menu-x{width:28px;height:28px;border-radius:6px;border:1px solid var(--nv-pop-line);background:none;
  cursor:pointer;display:grid;place-items:center;color:var(--nv-pop-ink-soft);transition:all .15s}
.nv-menu-x:hover{border-color:var(--lime);color:var(--lime)}
.nv-menu-x svg{width:14px;height:14px}
.nv-menu-body{padding:1.25rem 1.5rem}
.nv-menu-lbl{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--nv-pop-ink-soft);margin-bottom:.875rem}
.nv-menu-cards{display:block;margin-top:4px}
.mode-card{display:flex;align-items:center;gap:.875rem;width:100%;padding:.75rem 1rem;text-align:left;
  border:1.5px solid var(--nv-pop-line);border-radius:var(--nv-r-card);cursor:pointer;background:none;
  transition:border-color .15s,background .15s;margin-bottom:.5rem;font-family:var(--sans)}
.mode-card:hover{border-color:color-mix(in srgb,var(--nv-pop-ink) 28%,transparent)}
.mode-card.active{border-color:var(--lime);background:color-mix(in srgb,var(--lime) 8%,transparent)}
.mode-card__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--nv-pop-line);flex:none;
  display:grid;place-items:center;transition:all .15s}
.mode-card__radio.eck{border-radius:5px}
.mode-card.active .mode-card__radio{border-color:var(--lime);background:var(--lime)}
.mode-card.active .mode-card__radio::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-lime)}
.mode-card.active .mode-card__radio.eck::after{border-radius:1px}
.mode-card__icon{width:34px;height:34px;border-radius:8px;background:var(--surface-3);display:grid;
  place-items:center;flex:none;color:var(--nv-pop-ink-soft);transition:all .15s}
.mode-card.active .mode-card__icon{background:color-mix(in srgb,var(--lime) 16%,transparent);color:var(--lime)}
.mode-card__icon svg{width:15px;height:15px}
.mode-card__text{flex:1;min-width:0}
.mode-card__name{display:block;font-weight:700;font-size:.875rem;color:var(--nv-pop-ink)}
.mode-card__desc{display:block;font-size:.6875rem;color:var(--nv-pop-ink-soft);margin-top:.1rem}
.nv-menu-sep{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--nv-pop-line)}
.nv-menu-cta{display:flex;align-items:center;gap:.625rem;width:100%;padding:.625rem .875rem;
  background:var(--lime);border:none;border-radius:999px;cursor:pointer;color:var(--on-lime);
  font-family:var(--sans);font-weight:700;font-size:.8125rem;transition:filter .15s;white-space:nowrap}
.nv-menu-cta:hover{filter:brightness(1.06)}
.nv-menu-cta svg{width:14px;height:14px;flex:none}
.nv-menu-saved{display:none;align-items:center;gap:.375rem;padding:.625rem 1rem;margin-top:.625rem;
  background:var(--good-bg);border:1px solid color-mix(in srgb,var(--good) 26%,transparent);
  border-radius:.5rem;font-size:.75rem;font-weight:600;color:var(--good)}
.nv-menu-saved.show{display:flex}
.nv-menu-saved svg{width:14px;height:14px;flex:none}

/* ── Schnellsuche ── */
.nv-such{cursor:pointer;margin-bottom:6px}
.nv-kbd{font-size:.66rem;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:6px;
  border:1px solid var(--rail-line);color:var(--rail-ink-soft);flex:none}
@media(min-width:901px){
  body.rail-collapsed .nv-kbd,body.rail-collapsed #railMain .nv-item .lbl{display:none}
  body.rail-collapsed #railMain .nv-item{justify-content:center;gap:0;padding:11px 0}
  body.rail-collapsed #railMain .nv-item .ic{margin:0}
  body.rail-collapsed #railMain .nv-sub{display:none}
}
.nv-cmd{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;
  padding:12vh 20px 20px;background:rgba(10,11,12,.55);backdrop-filter:blur(3px)}
.nv-cmd.on{display:flex}
.nv-cmd-box{width:min(640px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--nv-r-pop);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;
  max-height:72vh}
.nv-cmd-top{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line)}
.nv-cmd-top .ic{width:19px;height:19px;color:var(--ink-soft);flex:none}
.nv-cmd-inp{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);
  font-family:var(--sans);font-size:1.02rem;font-weight:500}
.nv-cmd-inp::placeholder{color:var(--ink-faint)}
.nv-cmd-list{overflow-y:auto;padding:8px}
.nv-cmd-grp{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);padding:9px 12px 5px}
.nv-cmd-i{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:10px;
  background:none;border:0;color:var(--ink);font-size:.95rem;font-weight:500;text-align:left;cursor:pointer;
  font-family:var(--sans)}
.nv-cmd-i .ic{width:18px;height:18px;color:var(--ink-soft);flex:none}
.nv-cmd-i .nv-cmd-w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-cmd-i .nv-cmd-g{font-size:.72rem;color:var(--ink-faint);flex:none}
.nv-cmd-i:hover,.nv-cmd-i.sel{background:var(--surface-3)}
.nv-cmd-i.sel .ic{color:var(--lime)}
.nv-cmd-i mark{background:none;color:var(--ink);font-weight:800;padding:0}
.nv-cmd-leer{padding:22px 16px;color:var(--ink-soft);font-size:.92rem;text-align:center}
.nv-cmd-foot{border-top:1px solid var(--line);padding:9px 16px;display:flex;gap:16px;
  font-size:.75rem;color:var(--ink-faint)}
.nv-cmd-foot b{font-weight:800;color:var(--ink-soft)}

/* ── Werkbank ── */
.nvw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:14px;margin-top:4px}
.nvw-grid.vor{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.nvw-card{display:flex;flex-direction:column;text-align:left;padding:12px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--nv-r-pop);
  transition:border-color .16s,transform .16s,box-shadow .16s;font-family:var(--sans)}
.nvw-card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow)}
.nvw-card.on{border-color:var(--lime);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 26%,transparent)}
.nvw-sk{width:100%;aspect-ratio:16/9;border-radius:calc(var(--nv-r-pop) - 6px);background:var(--surface-2);
  border:1px solid var(--line);display:block;overflow:hidden}
.nvw-sk svg{width:100%;height:100%;display:block}
.nvw-t{display:flex;align-items:center;gap:8px;margin-top:11px}
.nvw-t b{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--ink);flex:1;min-width:0}
.nvw-on{font-size:.62rem;font-weight:900;letter-spacing:.06em;padding:2px 7px;border-radius:999px;
  background:var(--lime);color:var(--on-lime);flex:none;white-space:nowrap}
.nvw-d{font-size:.83rem;color:var(--ink-soft);line-height:1.5;margin-top:5px}
.nvw-w{font-size:.78rem;color:var(--ink-faint);line-height:1.45;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--line)}
.nvw-note{font-size:.82rem;color:var(--ink-soft);line-height:1.55;margin-top:2px}
.nvw-stand{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.nvw-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.nvw-pill b{color:var(--ink);font-weight:700}
.nvw-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.nvw-pv{display:flex;height:78px;border-radius:calc(var(--nv-r-pop) - 6px);overflow:hidden;border:1px solid var(--line)}
.nvw-pv .nvw-pv-rail{width:34%;display:flex;flex-direction:column;gap:6px;padding:10px 8px}
.nvw-pv .nvw-pv-body{flex:1;display:flex;flex-direction:column;gap:7px;padding:12px 10px}
.nvw-pv b{display:block;height:5px;border-radius:3px}
.nvw-pv.cf .nvw-pv-rail{background:var(--rail)}
.nvw-pv.cf .nvw-pv-rail b{background:var(--rail-ink-soft)}
.nvw-pv.cf .nvw-pv-rail b:nth-child(2){background:var(--lime)}
.nvw-pv.cf .nvw-pv-body{background:var(--bg)}
.nvw-pv.cf .nvw-pv-body b{background:var(--line-strong)}
.nvw-pv.maxxi .nvw-pv-rail{background:#141414}
.nvw-pv.maxxi .nvw-pv-rail b{background:#525252}
.nvw-pv.maxxi .nvw-pv-rail b:nth-child(2){background:#C8F526}
.nvw-pv.maxxi .nvw-pv-body{background:#F7F7F7}
.nvw-pv.maxxi .nvw-pv-body b{background:#D4D4D4}

/* ── THEME-VORLAGE „MaxxiPower" ────────────────────────────────────────────────
   Die Palette der Vorlage: Spur #141414 gegen hellen Arbeitsbereich #F7F7F7,
   Neon-Limette #C8F526, Karten mit 1rem Radius und weichem, weitem Schatten,
   Outfit fuer Ueberschriften und Instrument Sans fuer Fliesstext.

   EINE bewusste Abweichung: die gedaempfte Schrift der Spur steht auf #A3A3A3 statt
   auf #737373 der Vorlage. Auf #141414 ergibt #737373 nur 3,9:1 — die Gruppen-
   Ueberschriften laegen unter der Lesbarkeitsgrenze (Regelwerk R5). #A3A3A3 ist
   dieselbe Palette, eine Stufe heller, und liegt bei 7,3:1.

   Im Dunkel-Modus bleiben ALLE Flaechen dunkel (Regelwerk R11 Dark-Purity) — die
   weissen Karten der Vorlage gelten nur im hellen Modus. */
:root[data-nvv="maxxi"]{
  --lime:#C8F526; --lime-strong:#D4FF40; --on-lime:#0A0A0A;
  --bg:#F7F7F7; --surface:#FFFFFF; --surface-2:#F0F0F0; --surface-3:#E5E5E5;
  --ink:#0A0A0A; --ink-soft:#525252; --ink-faint:#737373;
  --line:#E5E5E5; --line-strong:#D4D4D4;
  --rail:#141414; --rail-2:#0A0A0A; --rail-ink:#F0F0F0; --rail-ink-soft:#A3A3A3;
  --rail-line:rgba(255,255,255,.10); --rail-active:rgba(200,245,38,.12);
  --rail-hover-ink:#FFFFFF; --rail-hover-bg:rgba(255,255,255,.04);
  --disp:'Outfit','Inter Tight','Inter',system-ui,sans-serif;
  --sans:'Instrument Sans','Inter',system-ui,sans-serif;
  --r-lg:1rem; --r:0.75rem; --r-sm:0.5rem;
  --shadow:0 1px 2px rgba(10,10,10,.04), 0 8px 26px rgba(10,10,10,.06);
  --shadow-lg:0 16px 48px rgba(10,10,10,.12);
  /* Schwebende Karten der Vorlage: weiss, 1rem, weicher weiter Schatten */
  --nv-pop:#FFFFFF; --nv-pop-line:#E5E5E5; --nv-pop-ink:#0A0A0A; --nv-pop-ink-soft:#525252;
  --nv-pop-shadow:0 16px 48px rgba(10,10,10,.10);
}
:root[data-nvv="maxxi"][data-theme="dark"]{
  --bg:#0A0A0A; --surface:#141414; --surface-2:#1A1A1A; --surface-3:#2D2D2D;
  --ink:#F7F7F7; --ink-soft:#A3A3A3; --ink-faint:#8A8D95;
  --line:#2D2D2D; --line-strong:#404040;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 24px 70px rgba(0,0,0,.6);
  --nv-pop:#1A1A1A; --nv-pop-line:#404040; --nv-pop-ink:#F7F7F7; --nv-pop-ink-soft:#A3A3A3;
  --nv-pop-shadow:0 12px 40px rgba(0,0,0,.45);
}
@media (prefers-color-scheme:dark){
  :root[data-nvv="maxxi"]:not([data-theme="light"]){
    --bg:#0A0A0A; --surface:#141414; --surface-2:#1A1A1A; --surface-3:#2D2D2D;
    --ink:#F7F7F7; --ink-soft:#A3A3A3; --ink-faint:#8A8D95;
    --line:#2D2D2D; --line-strong:#404040;
    --nv-pop:#1A1A1A; --nv-pop-line:#404040; --nv-pop-ink:#F7F7F7; --nv-pop-ink-soft:#A3A3A3;
    --nv-pop-shadow:0 12px 40px rgba(0,0,0,.45);
  }
}

@media (prefers-reduced-motion:reduce){
  .nv-fly,.nv-menu,#nvPanel,.nvw-card,.nv-gear,.app,.nv-sub{transition-duration:.01ms !important}
}

/* Zeile der Einzel-Ansicht (Gruppe, Tarifstufe) */
.nv-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .6rem}
.nv-meta-t{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid var(--nv-pop-line);color:var(--nv-pop-ink-soft)}
.nv-meta-t.stufe{border-color:color-mix(in srgb,var(--lime) 55%,transparent);color:var(--lime)}
#nvPanel .nv-meta{padding:0 .5rem}
#nvPanel .nv-meta-t{border-color:var(--rail-line);color:var(--rail-ink-soft)}