/* ===== Navigations-WIDGET (schwebend, links auf dem Desktop) ===== */
/* Nav-Widget gehört zur WALL — Fenster (--z-window) liegen IMMER darüber (--z-raised).
   Volle Höhe (oben bis unten, wie im ERP). Die Breite ist FEST (Florian 12.09.2026: „nicht mehr in der
   Breite verstellbar") — kein Griff, kein gemerkter Nutzerwert mehr; nur das Einklappen ändert sie noch. */
.cc-nw{position:fixed;top:0;bottom:0;left:0;width:var(--sz-220);
  background:var(--surface);border:0;border-right:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;overflow:hidden;z-index:var(--z-raised)}
/* Kopf wie im ERP: Bildmarke mittig, der Klapp-Pfeil oben rechts, kein Schriftzug (nur für Screenreader). */
.cc-nw-head{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-5) var(--sp-6);border-bottom:1px solid var(--grey-200)}
.cc-nw-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:var(--sz-100);line-height:1}
.cc-nw-brand{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cc-nw-toggle{position:absolute;top:var(--sp-3);right:var(--sp-3);background:var(--grey-100);border-color:var(--grey-100);color:var(--grey-600)}
.cc-nw-toggle:hover{background:var(--grey-200);color:var(--grey-800)}
.cc-nw-body{flex:1 1 auto;padding:var(--sp-4) var(--sp-3) var(--sp-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-0)}
.cc-nw-list{display:flex;flex-direction:column;gap:var(--sp-0)}

/* Einträge wie im ERP: schlichter Glyph, normale Schrift, kompakte Zeilen. */
.cc-nw-item{display:flex;align-items:center;gap:var(--sp-4);width:100%;text-align:left;padding:var(--sp-2) var(--sp-4);border:0;background:none;
  border-radius:var(--radius);color:var(--ink);font-size:var(--fs-base);font-weight:var(--fw-normal);line-height:var(--lh);cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast)}
.cc-nw-item:hover{background:color-mix(in srgb,var(--o) 7%,var(--surface))}
.cc-nw-item.on{background:color-mix(in srgb,var(--o) 13%,var(--surface));color:var(--o)}

/* Icon = das echte Modul-Icon (Design::icon aus module.json), schlichter Glyph im ERP-Stil. */
.cc-nw-ico{display:inline-flex;align-items:center;justify-content:center;width:var(--sz-18);height:var(--sz-18);
  font-size:var(--fs-md);line-height:1;flex:0 0 auto;color:var(--grey-700)}
.cc-nw-item:hover .cc-nw-ico{color:var(--ink)}
.cc-nw-item.on .cc-nw-ico{color:var(--o)}
/* Buchstaben-Fallback (Modul ohne Icon) behält das dezente Kästchen. */
.cc-nw-ico-ltr{background:var(--grey-100);border-radius:var(--radius);font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--grey-700)}
.cc-nw-item.on .cc-nw-ico-ltr{background:var(--o);color:var(--surface)}

.cc-nw-lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Umsortieren per Ziehen (nav.js): der gezogene Eintrag hebt sich ab, die Liste zeigt den Zieh-Zeiger. */
.cc-nw-list.cc-nw-sorting,.cc-nw-list.cc-nw-sorting .cc-nw-item{cursor:grabbing}
.cc-nw-item.cc-nw-dragging{background:var(--surface);box-shadow:var(--shadow-md);color:var(--o);position:relative;z-index:var(--z-raised)}
.cc-nw-item.cc-nw-dragging .cc-nw-ico{color:var(--o)}

/* Hinweis, wenn nichts angeheftet ist. */
.cc-nw-hint{font-size:var(--fs-sm);color:var(--muted);padding:var(--sp-4) var(--sp-3)}

/* Fester Fuss: DREI Einstiege nebeneinander (Konto, System, Suche) — Icon oben, Label darunter.
   Seit „Hintergrund" in die Konto-Sidebar gewandert ist, teilen sich nur noch drei Spalten die Breite:
   deshalb mehr Innenabstand und eine Stufe grössere Schrift (unten .cc-nw-fico/.cc-nw-flbl). */
.cc-nw-foot{flex:0 0 auto;padding:0;border-top:1px solid var(--grey-200);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cc-nw-fitem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
  min-width:0;padding:var(--sp-3) var(--sp-1);border:0;background:none;border-radius:0;
  color:var(--grey-700);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.cc-nw-fitem:hover{background:color-mix(in srgb,var(--o) 7%,var(--surface));color:var(--ink)}
.cc-nw-fitem:hover .cc-nw-fico{color:var(--o)}
/* Aktiv wie in der Liste: das vorne liegende Fenster (hier System) ist markiert. */
.cc-nw-fitem.on{background:color-mix(in srgb,var(--o) 13%,var(--surface));color:var(--o)}
.cc-nw-fitem.on .cc-nw-fico{color:var(--o)}
/* Drei Spalten statt vier = mehr Platz je Eintrag: Icon und Label eine Stufe grösser als vorher. */
.cc-nw-fico{font-size:var(--fs-lg);line-height:1;color:var(--grey-700)}
.cc-nw-flbl{max-width:100%;font-size:var(--fs-xs);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* eingeklappt: nur Icons (Zeigetext am Eintrag), kleinere Bildmarke. Das N-Monogramm ist EINE Figur —
   es wird nur verkleinert, nicht beschnitten (das frühere Zuschneiden galt der zweiteiligen DevQon-Marke). */
.cc-nw.cc-nw-collapsed{width:var(--sz-64)}
.cc-nw.cc-nw-collapsed .cc-nw-lbl,.cc-nw.cc-nw-collapsed .cc-nw-hint{display:none}
.cc-nw.cc-nw-collapsed .cc-nw-head{padding:var(--sp-9) var(--sp-2) var(--sp-4)}
.cc-nw.cc-nw-collapsed .cc-nw-logo{font-size:var(--sz-32)}
.cc-nw.cc-nw-collapsed .cc-nw-toggle{transform:rotate(180deg);top:var(--sp-1);right:var(--sp-1)}
.cc-nw.cc-nw-collapsed .cc-nw-item{justify-content:center;padding:var(--sp-3) 0}
.cc-nw.cc-nw-collapsed .cc-nw-ico{font-size:var(--fs-lg)}
/* Eingeklappt untereinander: drei Spalten hätten auf 64 px keinen Platz — nur die Icons, Zeigetext trägt den Namen. */
.cc-nw.cc-nw-collapsed .cc-nw-foot{grid-template-columns:1fr;padding:var(--sp-2)}
.cc-nw.cc-nw-collapsed .cc-nw-flbl{display:none}
.cc-nw.cc-nw-collapsed .cc-nw-fico{font-size:var(--fs-lg)}

/* Gast-Hinweis im leeren Nav (nicht angemeldet) */
.cc-nw-guest{margin:var(--sp-4) var(--sp-2);padding:var(--sp-6) var(--sp-5);text-align:center;background:var(--grey-50);border:1px solid var(--border);border-radius:var(--radius)}
.cc-nw-guest-txt{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-4)}
.cc-nw-login{width:100%;background:var(--o);color:var(--surface);border:0;border-radius:var(--radius);padding:var(--sp-3) var(--sp-6);font-size:var(--fs-base);font-weight:var(--fw-bold);cursor:pointer}
.cc-nw-login:hover{background:var(--o-h)}
.cc-nw.cc-nw-collapsed .cc-nw-guest-txt{display:none}

/* Breadcrumb (Design::breadcrumb) — Navigations-Pfad; gehört zum nav-Design. */
.cc-crumbs { display: flex; align-items: center; gap:var(--sp-2); font-size: var(--fs-sm); margin-bottom: var(--gap-sm); }
.cc-crumb { color: var(--muted); text-decoration: none; }
.cc-crumb:hover { color: var(--o); }
.cc-crumb-current { color: var(--ink); font-weight: var(--fw-med); }
.cc-crumb-sep { color: var(--border); display: inline-flex; }

/* ================================================================================
   OFFENE FENSTER IN DER NAVIGATION — der zweite, gleichwertige Weg zum Fenster-Wechsel
   (der erste ist die Randleiste rechts, window-Modul). Drei Teile:
     1. Punkt am angehefteten Eintrag: diese Anwendung LÄUFT gerade.
     2. Gruppe „Offen" am Fuss der Liste: Fenster, die NICHT angeheftet sind, tauchen
        trotzdem auf — so kann kein offenes Fenster unsichtbar werden.
     3. Vorschau beim Zeigen: der echte Fensterinhalt verkleinert, nicht nur der Name.
   ================================================================================ */

/* 1 — „läuft"-Punkt. Sitzt rechts im Eintrag; sein blosses Erscheinen ist das Signal
   (kein Pulsieren: die Kern-Dauern sind für einen Puls zu kurz, und eine eigene Dauer
   wäre eine erfundene Bewegungs-Skala). */
.cc-nw-live{width:var(--sz-6);height:var(--sz-6);border-radius:var(--radius-pill);background:var(--o);
  flex:0 0 auto;margin-left:auto}
.cc-nw-live.cc-nw-live-min{background:var(--grey-300)}
.cc-nw.cc-nw-collapsed .cc-nw-live{position:absolute;right:var(--sp-2);top:var(--sp-2);margin:0}
.cc-nw.cc-nw-collapsed .cc-nw-item{position:relative}

/* 2 — Gruppe „Offen": abgesetzt, aber nicht lauter als die angehefteten Einträge. */
.cc-nw-open{margin-top:var(--sp-4);padding-top:var(--sp-2);border-top:1px dashed var(--grey-200)}
.cc-nw-openhead{display:flex;align-items:center;gap:var(--sp-3);width:100%;border:0;background:none;
  padding:var(--sp-2) var(--sp-4) var(--sp-1);font-family:inherit;font-size:var(--fs-2xs);
  text-transform:uppercase;letter-spacing:var(--tracking);color:var(--grey-400);cursor:pointer;text-align:left}
.cc-nw-openhead:hover{color:var(--o)}
.cc-nw-opencount{margin-left:auto;font-variant-numeric:tabular-nums}
.cc-nw-item.cc-nw-ghost .cc-nw-lbl{color:var(--grey-600)}
.cc-nw-item.cc-nw-ghost.on .cc-nw-lbl{color:var(--o)}
.cc-nw-item.cc-nw-minned .cc-nw-lbl{font-style:italic;opacity:var(--op-soft)}
.cc-nw.cc-nw-collapsed .cc-nw-openhead{justify-content:center;padding:var(--sp-2) 0}
.cc-nw.cc-nw-collapsed .cc-nw-openlbl,.cc-nw.cc-nw-collapsed .cc-nw-opencount{display:none}

/* 3 — Vorschau: zeigt den ECHTEN, verkleinerten Fensterinhalt neben der Navigation. */
.cc-nw-peek{position:fixed;z-index:var(--z-popover);width:var(--sz-260);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;
  opacity:0;transform:translateX(calc(var(--sp-2) * -1));pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.cc-nw-peek.cc-nw-peek-in{opacity:1;transform:none}
.cc-nw-peek-h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);
  background:var(--grey-50);border-bottom:1px solid var(--border);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--grey-800);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-nw-peek-note{margin-left:auto;font-weight:var(--fw-normal);color:var(--grey-400);font-style:italic}
.cc-nw-peek-b{position:relative;overflow:hidden;background:var(--surface-2)}
/* Der geklonte Fensterknoten sitzt oben links und wird per transform verkleinert (JS rechnet den Massstab). */
.cc-nw-peek-b > .cc-win{position:absolute;left:0;top:0;transform-origin:0 0;
  border:0;border-radius:0;box-shadow:none;transition:none;max-width:none;max-height:none}

@media (prefers-reduced-motion:reduce){
  .cc-nw-peek{transition:none}
}