/* ═══ Landing/Gate & Pricing: eigenständige Marken-Splash-Seiten ═══
   Diese Regeln stammen aus der Design-2026-Schicht, sind aber
   STRUKTUR (Landing-Layout, Ausblenden des alten Workspace-Chromes,
   reduzierte Bewegung) bzw. das bewusst dunkle Marken-Kleid der
   Startseite. Sie gelten darum in BEIDEN Themen — die Startseite
   behält ihr Neon-Artwork, die App selbst folgt dem Theme. */
:root { --neon-ink: #040208; }
/* ── 15 · Startseite (Gate): noch eine Stufe tiefer ins Schwarz ───── */
#view-studio-gate { background: var(--neon-ink); }

/* ── 15b · Startseite als Landing nach der Showcase-Referenz ───────
   Navbar mit Dropdowns (Platform → Studio, Solutions → Admin
   Terminal, Pricing), Split-Hero mit dem exakt ausgeschnittenen
   Portal-Artwork, Fakten-Reihe und drei Feature-Karten. Alle Knöpfe
   tragen dieselben IDs und Handler wie zuvor. */
/* Das Gate war als zentrierte Flex-Buehne gebaut — die Landing
   braucht normalen Block-Fluss von oben nach unten. Nur :not([hidden]):
   sonst wuerde diese ID-Regel das Verstecken der Seite ueberstimmen. */
#view-studio-gate:not([hidden]) { display: block; overflow-y: auto; overflow-x: hidden; padding-bottom: 52px; }
.novi-land-nav {
  position: relative; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 16px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(168, 85, 247, 0.14);
  background: rgba(4, 2, 9, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
}
.novi-land-brand { display: flex; align-items: center; gap: 11px; }
.novi-land-logo { width: 40px; height: 40px; display: block; filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6)); }
.novi-land-brand-name { font-size: 15.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.novi-land-brand-name b { color: #c4b5fd; font-weight: 800; }
.novi-land-menu { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.novi-land-item { position: relative; }
.novi-land-link {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--nv-text-mut);
  border: none; background: none; font-family: inherit;
  transition: color 0.16s ease, background 0.16s ease;
}
.novi-land-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.novi-land-item:hover .novi-land-link,
.novi-land-item:focus-within .novi-land-link,
.novi-land-link.as-btn:hover { color: #fff; background: rgba(168, 85, 247, 0.12); }
.novi-land-drop {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 350px; padding: 10px; z-index: 60;
  background: linear-gradient(168deg, rgba(24, 16, 42, 0.97), rgba(8, 5, 16, 0.99));
  border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 14px;
  box-shadow: 0 0 40px -10px rgba(168, 85, 247, 0.45), 0 26px 60px -20px rgba(0, 0, 0, 0.9);
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.novi-land-drop::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.novi-land-item:hover .novi-land-drop,
.novi-land-item:focus-within .novi-land-drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.novi-land-drop-btn {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 12px; border-radius: 10px; text-align: left; cursor: pointer;
  border: 1px solid transparent; background: none; font-family: inherit; color: var(--nv-text);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.novi-land-drop-btn:hover { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.3); }
.novi-land-drop-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(109, 40, 217, 0.16));
  border: 1px solid rgba(196, 155, 255, 0.35);
  box-shadow: 0 0 14px -4px rgba(168, 85, 247, 0.5);
}
.novi-land-drop-icon svg { width: 19px; height: 19px; stroke: #d8b4fe; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.novi-land-drop-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.novi-land-drop-text b { font-size: 14px; font-weight: 700; color: #fff; }
.novi-land-drop-text span { font-size: 12px; color: var(--nv-text-dim); line-height: 1.45; }
.novi-land-drop-hint { display: block; padding: 10px 12px; font-size: 11.5px; color: var(--nv-text-faint); line-height: 1.5; }
.novi-land-drop-btn[hidden] + .novi-land-drop-hint { padding-top: 10px; }
.novi-land-drop-btn:not([hidden]) + .novi-land-drop-hint { display: none; }

.novi-land-hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center; gap: clamp(18px, 3vw, 48px);
  max-width: 1560px; margin: 0 auto;
  padding: clamp(28px, 5vh, 72px) clamp(18px, 4vw, 56px) clamp(18px, 3vh, 40px);
}
.novi-land-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #c4b5fd; margin-bottom: 18px;
}
.novi-land-eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.8);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
}
.novi-land-title {
  margin: 0; font-size: clamp(42px, 4.4vw, 68px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.06; color: #fff;
}
.novi-land-title em {
  font-style: normal;
  background: linear-gradient(100deg, #c084fc 10%, #a855f7 60%, #7c3aed 110%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #c084fc;
}
.novi-land-sub {
  margin: 20px 0 0; max-width: 500px;
  font-size: 15px; line-height: 1.65; color: var(--nv-text-dim);
}
.novi-land-ctas { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.novi-land-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.18s ease;
}
.novi-land-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.novi-land-cta.primary {
  border: none; color: #fff;
  background: linear-gradient(135deg, #c026f7 -20%, #a855f7 35%, #6d28d9 110%);
  box-shadow: 0 0 0 1px rgba(216, 180, 254, 0.22) inset, 0 12px 30px -10px rgba(168, 85, 247, 0.65), 0 0 26px -6px rgba(168, 85, 247, 0.45);
}
.novi-land-cta.primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.novi-land-cta.ghost {
  color: var(--nv-vio-text);
  background: rgba(13, 8, 24, 0.72); border: 1px solid rgba(168, 85, 247, 0.36);
}
.novi-land-cta.ghost:hover { background: rgba(168, 85, 247, 0.14); border-color: rgba(196, 155, 255, 0.55); }
.novi-land-stats {
  display: flex; gap: clamp(18px, 2.6vw, 42px); margin-top: 38px; flex-wrap: wrap;
}
.novi-land-stats > div { display: flex; flex-direction: column; gap: 4px; }
.novi-land-stats b {
  font-size: 24px; font-weight: 800; letter-spacing: -0.01em;
  background: linear-gradient(120deg, #ffffff 18%, #d8b4fe 62%, #a855f7 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #e9d5ff;
}
.novi-land-stats span { font-size: 11.5px; color: var(--nv-text-faint); }
.novi-entry-hero-art { position: relative; pointer-events: none; }
.novi-entry-hero-art img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 48%, #000 55%, transparent 98%);
  mask-image: radial-gradient(ellipse 82% 78% at 50% 48%, #000 55%, transparent 98%);
  filter: drop-shadow(0 40px 90px rgba(124, 58, 237, 0.4));
  transform: translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -6px), 0);
}
.novi-land-cards {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; max-width: 1560px; margin: 0 auto;
  padding: 8px clamp(18px, 4vw, 56px) clamp(46px, 7vh, 84px);
}
.novi-land-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px; border-radius: 16px;
  background: linear-gradient(168deg, rgba(24, 16, 42, 0.82), rgba(8, 5, 16, 0.92));
  border: 1px solid rgba(168, 85, 247, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 44px -30px rgba(0, 0, 0, 0.85);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.novi-land-card:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 155, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 34px -12px rgba(168, 85, 247, 0.4), 0 26px 48px -30px rgba(0, 0, 0, 0.9);
}
.novi-land-card-art {
  display: block; height: 170px; border-radius: 11px; overflow: hidden; margin-bottom: 8px;
  border: 1px solid rgba(168, 85, 247, 0.14);
}
.novi-land-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.novi-land-card-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #c4b5fd; }
.novi-land-card b { font-size: 16.5px; font-weight: 750; color: #fff; letter-spacing: -0.01em; }
.novi-land-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--nv-text-dim); }
@media (max-width: 1080px) {
  .novi-land-hero { grid-template-columns: 1fr; }
  .novi-entry-hero-art { order: -1; max-width: 560px; margin: 0 auto; }
  .novi-land-menu { gap: 0; }
  .novi-land-brand-name { display: none; }
}
@media (max-width: 720px) {
  .novi-land-nav { flex-wrap: wrap; gap: 10px; }
  .novi-land-menu { order: 3; width: 100%; justify-content: flex-start; }
}

/* ── 16 · Studio ohne Workspace-Chrome ─────────────────────────────
   Sobald das Studio sichtbar ist, verschwindet die komplette alte
   Workspace-Oberfläche (rote Kopfleiste + alte Sidebar): sie liegt als
   #app-shell VOR dem Studio im Dokument und stand sonst als Balken
   darüber. Zurück zum Gate oder ins Admin Terminal bringt sie
   unverändert wieder — die Regel greift NUR, solange das Studio offen
   ist. Es wird nichts gelöscht: alle Knöpfe und Funktionen des
   Workspace bleiben erhalten. */
body:has(#view-novi-studio:not([hidden])) #app-shell { display: none !important; }

/* ── 16b · Anmeldung im Novi-Design ────────────────────────────────
   Die alte weiße Creator-Hub-Anmeldeseite ist damit vollständig
   verschwunden: derselbe Formular-Unterbau (gleiche IDs, gleiche
   Login/Registrieren-Logik) trägt jetzt den Obsidian-Auftritt mit
   Portal-Artwork und Glaskarte. */
#view-login.login-screen {
  position: relative; isolation: isolate;
  background: #050309; color: var(--nv-text, #e9e7f5);
}
#view-login::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 52% at 50% 44%, rgba(4, 2, 9, 0.55) 0%, rgba(4, 2, 9, 0.25) 55%, transparent 84%),
    linear-gradient(to bottom, rgba(4, 2, 9, 0.55), transparent 30%, transparent 62%, rgba(4, 2, 9, 0.8)),
    url("/hub-assets/novi-hero-portal.webp") center 28% / cover no-repeat,
    #050309;
}
#view-login .login-card {
  background: linear-gradient(168deg, rgba(24, 16, 42, 0.94), rgba(8, 5, 16, 0.97));
  border: 1px solid rgba(168, 85, 247, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 60px -16px rgba(168, 85, 247, 0.5),
    0 30px 70px -30px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
}
#view-login .mark { width: 54px; height: 54px; background: none; border-radius: 0; }
#view-login .mark img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.65)); }
#view-login h1 {
  background: linear-gradient(97deg, #ffffff 30%, #d9c6ff 75%, #a855f7 118%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #efe9ff;
}
#view-login .sub { color: #a9a2cc; }
#view-login .login-field label { color: #cfccdf; }
#view-login .login-field input {
  background: rgba(6, 3, 13, 0.78);
  border: 1px solid rgba(148, 116, 220, 0.28);
  color: #f1edff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
#view-login .login-field input:focus {
  outline: none; border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18), 0 0 24px -10px rgba(168, 85, 247, 0.55);
}
#view-login .btn-primary {
  border: none; color: #fff;
  background: linear-gradient(135deg, #c026f7 -20%, #a855f7 35%, #6d28d9 110%);
  box-shadow: 0 0 0 1px rgba(216, 180, 254, 0.22) inset, 0 12px 30px -10px rgba(168, 85, 247, 0.65);
  transition: transform 0.16s ease, filter 0.2s ease;
}
#view-login .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
#view-login .login-error { color: #f87171; }
#view-login .login-mode-toggle {
  text-align: center; font-size: 12.5px; color: #c9b3ff; text-decoration: underline;
}
#view-login .login-mode-toggle:hover { color: #e9d5ff; }

/* ── 17 · Ruhe respektieren ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .novi-hero-btn, .novi-card-cta, .novi-asset-btn, .novi-phase-nav-btn,
  .novi-cwm-section, .novi-cs-card, .novi-gd-kpi, .novi-nav-item,
  .novi-p05-scene-row, .novi-vd-char-frame, .novi-p05-gallery-frame {
    transition: none;
  }
}

/* ── Anmeldung als Fenster statt eigener Seite (04.08.) ──────────
   Formular unveraendert — dieselben Felder, IDs und Logik. Nur die
   Darstellung wechselt: es liegt ueber der Startseite. */
/* novi-login-fenster */
#view-login.login-screen {
  position: fixed; inset: 0; z-index: 900; min-height: 0; padding: 20px;
  background: rgba(4, 2, 10, 0.74); backdrop-filter: blur(6px); overflow-y: auto;
}
#view-login[hidden] { display: none; }
#view-login::before { display: none; }
#view-login .login-card { position: relative; max-width: 400px; width: 100%; }
.novi-login-zu {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid rgba(168, 85, 247, 0.28);
  background: rgba(10, 6, 20, 0.7); color: #cfccdf; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.novi-login-zu svg { width: 16px; height: 16px; }
.novi-login-zu:hover { color: #fff; border-color: rgba(196, 155, 255, 0.55); background: rgba(168, 85, 247, 0.16); }

/* ── Anmeldung im hellen Auftritt (04.08.) ──────────────────────
   Angeglichen an die uebrigen Seiten: weisse Flaeche, rote Aktion,
   keine dunklen Verlaeufe mehr. Steht am Ende, damit es die frueheren
   Obsidian-Regeln dieser Ansicht ueberschreibt. */
/* novi-login-hell */
#view-login.login-screen {
  background: rgba(28, 28, 32, 0.55);
  backdrop-filter: blur(6px);
  color: #1b1b1f;
}
#view-login::before, #view-login::after { display: none !important; }
#view-login .login-card {
  background: #fff;
  border: 1px solid #e3e3e8;
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
  color: #1b1b1f;
}
#view-login .mark img { filter: none; }
#view-login h1 {
  background: none; -webkit-text-fill-color: initial;
  color: #1b1b1f; font-weight: 700;
}
#view-login .sub { color: #5f5f6b; }
#view-login .login-field label { color: #3d3d46; font-weight: 600; }
#view-login .login-field input {
  background: #fff; border: 1px solid #d5d5dd; color: #1b1b1f;
  border-radius: 8px;
}
#view-login .login-field input:focus {
  outline: none; border-color: var(--spk-rot);
  box-shadow: 0 0 0 3px rgba(var(--spk-rot-rgb), 0.14);
}
#view-login .btn-primary {
  background: var(--spk-rot); border: none; color: #fff;
  border-radius: 8px; font-weight: 700; box-shadow: none;
}
#view-login .btn-primary:hover { background: var(--spk-rot-dunkel); transform: none; filter: none; }
#view-login .login-mode-toggle { color: var(--spk-rot); }
#view-login .login-mode-toggle:hover { color: var(--spk-rot-dunkel); }
#view-login .login-error { color: var(--spk-rot-dunkel); }
.novi-login-zu {
  border: 1px solid #dcdce3; background: #fff; color: #5f5f6b;
}
.novi-login-zu:hover { color: var(--spk-rot); border-color: var(--spk-rot); background: #fff5f6; }

/* ── Anmeldung: auch die Flaeche dahinter hell (04.08.) ─────────
   Die Karte war schon angeglichen, der Grund dahinter blieb dunkel:
   Er kommt nicht nur aus den Deko-Ebenen dieser Ansicht, sondern auch
   aus Hintergrundbild und Plexus. Deshalb hier eine deckende helle
   Flaeche und alles Dekorative darin ausgeblendet. */
/* novi-login-hell-bg */
/* Heller Schleier statt deckender Flaeche: die Anmeldung soll als
   Fenster ueber der Startseite liegen, nicht als eigene Seite wirken.
   Deckend war sie von der Startseite nicht zu unterscheiden. */
#view-login.login-screen {
  background: rgba(244, 244, 247, 0.86) !important;
  background-image: none !important;
  backdrop-filter: blur(8px) !important;
}
/* Ausgeblendet heisst ausgeblendet — auch gegen das display:flex der
   Grundregel und jede spaetere Ergaenzung. */
#view-login[hidden] { display: none !important; }
/* Alles ausser der Karte ist Zierrat der alten Fassung. */
#view-login > *:not(.login-card) { display: none !important; }
#view-login .novi-neon-fx,
#view-login .novi-splash-fx,
#view-login canvas { display: none !important; }


/* ═══ NOVI HOME — Startseite nach Referenz design-reference/novi-homepage-desktop.png ═══
   Tokens aus dem Referenzbild gemessen (1672×941): Navy-Schwarz #070b14,
   Panels #0a0f1a, Violett #8b5cf6/#a855f7, Gold-CTA #d6a24a, Grün #45d483.
   Alles unter .nvh- gescoped; die Seite ist bewusst opak dunkel. */
.nvh {
  --nvh-bg: #070b14;
  --nvh-panel: rgba(10, 15, 26, 0.92);
  --nvh-panel-2: rgba(13, 18, 30, 0.9);
  --nvh-line: rgba(139, 92, 246, 0.16);
  --nvh-line-strong: rgba(139, 92, 246, 0.34);
  --nvh-vio: #8b5cf6;
  --nvh-vio-2: #a855f7;
  --nvh-gold: #d6a24a;
  --nvh-green: #45d483;
  --nvh-text: #f4f3fa;
  --nvh-text-2: #9d9ab4;
  --nvh-text-3: #6f6c86;
  --nvh-r: 18px;
  display: flex; flex-direction: column; gap: 22px;
  color: var(--nvh-text);
}
.nvh-panel {
  background: var(--nvh-panel);
  border: 1px solid var(--nvh-line);
  border-radius: var(--nvh-r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 22px 44px -30px rgba(0, 0, 0, 0.85);
}
/* Such-/Profilzeile */
.nvh-top { display: flex; align-items: center; gap: 14px; }
.nvh-search {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 14px; cursor: pointer;
  background: var(--nvh-panel-2); border: 1px solid var(--nvh-line);
  color: var(--nvh-text-3); font: inherit; font-size: 13.5px; text-align: left;
}
.nvh-search:hover { border-color: var(--nvh-line-strong); }
.nvh-search svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.nvh-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 14px;
  background: var(--nvh-panel-2); border: 1px solid var(--nvh-line);
}
.nvh-user img { width: 34px; height: 34px; border-radius: 50%; display: block; }
.nvh-user b { font-size: 13px; color: var(--nvh-text); display: block; }
.nvh-user span { font-size: 10.5px; color: var(--nvh-text-2); }
/* Hero */
.nvh-hero {
  position: relative; overflow: hidden; min-height: 350px;
  padding: 44px 46px;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  background:
    linear-gradient(90deg, rgba(7, 10, 19, 0.97) 0%, rgba(7, 10, 19, 0.86) 34%, rgba(7, 10, 19, 0.25) 62%, rgba(7, 10, 19, 0) 100%),
    url("/hub-assets/novi-home/hero-environment.webp") right top / auto 108% no-repeat,
    radial-gradient(ellipse at 70% 20%, rgba(139, 92, 246, 0.16), transparent 60%),
    #0a0e1a;
}
.nvh-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: #b9a4f4; margin-bottom: 16px;
}
.nvh-hero h2 {
  margin: 0; font-size: clamp(30px, 3.2vw, 46px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.08; color: #fdfdff;
}
.nvh-hero h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #a855f7 10%, #8b5cf6 55%, #c084fc 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #a855f7;
}
.nvh-hero p { margin: 16px 0 0; max-width: 360px; font-size: 14px; line-height: 1.6; color: var(--nvh-text-2); }
.nvh-hero-ctas { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.nvh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  transition: transform .16s ease, filter .2s ease, background .18s ease;
}
.nvh-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.nvh-btn.gold {
  border: 1px solid rgba(240, 200, 130, 0.55); color: #ffe9c4;
  background: linear-gradient(135deg, rgba(214, 162, 74, 0.32), rgba(120, 82, 24, 0.28));
  box-shadow: 0 0 24px -6px rgba(214, 162, 74, 0.5);
}
.nvh-btn.gold:hover { transform: translateY(-1px); filter: brightness(1.12); }
.nvh-btn.ghost {
  border: 1px solid rgba(139, 92, 246, 0.32); color: #cfc9e8;
  background: rgba(13, 18, 30, 0.7);
}
.nvh-btn.ghost:hover { background: rgba(139, 92, 246, 0.12); }
/* KPI-Zeile */
.nvh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.nvh-kpi { display: flex; align-items: center; gap: 16px; padding: 22px 22px; }
.nvh-kpi-icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.24), rgba(139, 92, 246, 0.06));
  box-shadow: 0 0 18px -4px rgba(139, 92, 246, 0.5), inset 0 0 0 1px rgba(139, 92, 246, 0.35);
}
.nvh-kpi-icon svg { width: 22px; height: 22px; stroke: #c4b5fd; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nvh-kpi-num { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; color: #fdfdff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nvh-kpi-label { font-size: 12.5px; font-weight: 650; color: #cfcce0; margin-top: 2px; }
.nvh-kpi-sub { font-size: 10.5px; color: var(--nvh-text-3); margin-top: 1px; }
/* Untere Module */
.nvh-modules { display: grid; grid-template-columns: 1.05fr 1.15fr 0.95fr; gap: 18px; align-items: stretch; }
.nvh-mod { padding: 22px 24px; display: flex; flex-direction: column; }
.nvh-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: #a48ee8; margin-bottom: 8px;
}
.nvh-mod h3 { margin: 0 0 12px; font-size: 18px; font-weight: 750; color: #fdfdff; letter-spacing: -0.01em; }
.nvh-mod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.nvh-range { display: flex; align-items: center; gap: 6px; }
.nvh-range select {
  font: inherit; font-size: 11.5px; color: #cfc9e8; padding: 6px 8px; border-radius: 9px;
  background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.28);
}
.nvh-iconbtn {
  border: 1px solid rgba(139, 92, 246, 0.28); background: rgba(139, 92, 246, 0.08);
  color: #cfc9e8; border-radius: 9px; padding: 6px 8px; cursor: pointer; font: inherit;
}
.nvh-iconbtn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.nvh-chart { position: relative; flex: 1; min-height: 150px; margin-top: 4px; }
.nvh-chart .novi-spark-wrap { height: 100%; min-height: 150px; }
.nvh-chart .novi-spark-wrap.is-flat,
.nvh-chart .novi-spark-wrap.is-up,
.nvh-chart .novi-spark-wrap.is-down { --spark-color: #8b5cf6; }
.nvh-chart-chip {
  position: absolute; right: 8px; top: 34%;
  background: rgba(10, 15, 26, 0.92); border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 11px; padding: 8px 13px; text-align: center;
  box-shadow: 0 0 20px -6px rgba(139, 92, 246, 0.6);
}
.nvh-chart-chip b { display: block; font-size: 15px; color: #fdfdff; font-variant-numeric: tabular-nums; }
.nvh-chart-chip span { font-size: 10px; color: var(--nvh-text-2); }
.nvh-link {
  margin-top: 14px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 650; color: #b9a4f4;
}
.nvh-link:hover { color: #d8ccff; }
.nvh-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
/* Pipeline */
.nvh-pipe { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1; padding: 10px 4px 0; }
.nvh-pipe-step { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; min-width: 90px; }
.nvh-pipe-icon {
  width: 58px; height: 58px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 18px -6px rgba(139, 92, 246, 0.45);
}
.nvh-pipe-icon svg { width: 25px; height: 25px; stroke: #c4b5fd; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nvh-pipe-step b { font-size: 13px; color: #fdfdff; font-weight: 700; }
.nvh-pipe-step span { font-size: 11px; color: var(--nvh-text-2); }
.nvh-pipe-arrow { color: #5b5680; flex: none; }
.nvh-pipe-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Rechte Spalte: Assistent + Status */
.nvh-right { display: flex; flex-direction: column; gap: 18px; }
.nvh-assi { position: relative; overflow: hidden; flex: 1; padding: 22px 24px; }
.nvh-assi img {
  position: absolute; right: 6px; bottom: 0; width: 42%; max-width: 170px; height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
.nvh-assi p { margin: 0 0 16px; max-width: 62%; font-size: 12.5px; line-height: 1.6; color: var(--nvh-text-2); }
.nvh-assi .nvh-btn { font-size: 12px; padding: 9px 16px; }
.nvh-status { display: flex; align-items: center; gap: 15px; padding: 18px 22px; }
.nvh-shield {
  flex: none; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(69, 212, 131, 0.1); border: 1px solid rgba(69, 212, 131, 0.4);
  box-shadow: 0 0 18px -6px rgba(69, 212, 131, 0.55);
}
.nvh-shield svg { width: 24px; height: 24px; stroke: var(--nvh-green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nvh-status-main { flex: 1; min-width: 0; }
.nvh-status b { display: block; font-size: 15px; color: #fdfdff; }
.nvh-status span { font-size: 11.5px; color: var(--nvh-text-2); }
.nvh-status-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--nvh-green); box-shadow: 0 0 10px rgba(69, 212, 131, 0.9);
}
/* Responsive */
@media (max-width: 1180px) {
  .nvh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nvh-modules { grid-template-columns: 1fr 1fr; }
  .nvh-right { grid-column: 1 / -1; flex-direction: row; }
  .nvh-right > * { flex: 1; }
}
@media (max-width: 760px) {
  .nvh-kpis { grid-template-columns: 1fr; }
  .nvh-modules { grid-template-columns: 1fr; }
  .nvh-right { flex-direction: column; }
  .nvh-hero { padding: 28px 22px; min-height: 0; background-size: 0, auto 240px, auto, auto;
    background-position: 0 0, right bottom, 70% 20%, 0 0; padding-bottom: 250px; }
  .nvh-hero p { max-width: none; }
  .nvh-assi p { max-width: 100%; }
  .nvh-assi img { position: static; display: block; margin: 8px auto 0; width: 40%; }
  .nvh-pipe { flex-wrap: wrap; justify-content: center; }
}


/* ═══ LANDING: BOSS-NOVI-KOMMANDOZENTRALE ═══
   1:1 nach design-reference/novi-landing-dark.png (1604x981).
   Tokens aus dem Bild: Grund #000009, Panels #01040F..#08090F,
   Gold #E7A94F, Violett #7C5CFF/#A855F7, Gruen #45D483.
   Diese Seite traegt den Referenz-Look in JEDER Schalterstellung —
   die Regeln stehen als letzte Schicht und pinnen die Flaechen. */
#view-studio-gate:not([hidden]) {
  background: #000009 !important;
  color: #f2f2f8;
}
/* Referenz ist fast reines Schwarz: die alten Deko-Ebenen und die
   Laufschrift gehoeren nicht mehr zu dieser Seite. */
#view-studio-gate .novi-splash-fx,
#view-studio-gate .novi-splash-marquee { display: none !important; }
#view-studio-gate { padding-bottom: 0 !important; }

.novi-lx-nav {
  position: relative; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 16px clamp(18px, 3.6vw, 60px);
  background: rgba(0, 0, 9, 0.85);
  backdrop-filter: blur(10px);
}
.novi-lx-brand { display: flex; align-items: center; gap: 12px; }
.novi-lx-logo { width: 44px; height: 42px; display: block; filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.55)); }
.novi-lx-brand-text b { display: block; font-size: 15px; font-weight: 800; letter-spacing: 0.2em; color: #fff; }
.novi-lx-brand-text b i { font-style: normal; color: #E7A94F; }
.novi-lx-brand-text > span { display: block; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #8b93a7; margin-top: 3px; }
.novi-lx-menu { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.novi-lx-item { position: relative; }
.novi-lx-link {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: #e6e2f2;
  border: none; background: none; font-family: inherit;
  transition: color 0.16s ease, background 0.16s ease;
}
.novi-lx-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.novi-lx-item:hover .novi-lx-link,
.novi-lx-item:focus-within .novi-lx-link,
.novi-lx-link.as-btn:hover { color: #fff; background: rgba(168, 85, 247, 0.14); }
.novi-lx-drop {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 350px; padding: 10px; z-index: 60;
  background: linear-gradient(168deg, rgba(16, 10, 30, 0.98), rgba(3, 2, 10, 0.99));
  border: 1px solid rgba(168, 85, 247, 0.32); border-radius: 14px;
  box-shadow: 0 0 40px -10px rgba(168, 85, 247, 0.45), 0 26px 60px -20px rgba(0, 0, 0, 0.9);
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.novi-lx-drop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.novi-lx-item:hover .novi-lx-drop,
.novi-lx-item:focus-within .novi-lx-drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.novi-lx-drop-btn {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 12px; border-radius: 10px; text-align: left; cursor: pointer;
  border: 1px solid transparent; background: none; font-family: inherit; color: #e6e2f2;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.novi-lx-drop-btn:hover { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.3); }
.novi-lx-drop-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(109, 40, 217, 0.16));
  border: 1px solid rgba(196, 155, 255, 0.35);
}
.novi-lx-drop-icon svg { width: 19px; height: 19px; stroke: #d8b4fe; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.novi-lx-drop-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.novi-lx-drop-text b { font-size: 14px; font-weight: 700; color: #fff; }
.novi-lx-drop-text span { font-size: 12px; color: #8b93a7; line-height: 1.45; }
.novi-lx-drop-hint { display: block; padding: 10px 12px; font-size: 11.5px; color: #6b7280; line-height: 1.5; }
.novi-lx-drop-btn:not([hidden]) + .novi-lx-drop-hint { display: none; }

#view-studio-gate .novi-entry-auth { position: static; display: flex; align-items: center; gap: 12px; }
#view-studio-gate .novi-entry-auth-in { display: flex; align-items: center; gap: 12px; }
#view-studio-gate .novi-entry-auth-in[hidden] { display: none; }
#view-studio-gate .novi-entry-auth-user { font-size: 13px; color: #b9b6d4; }
#view-studio-gate .novi-entry-auth-btn {
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: #e6e2f2; background: rgba(10, 8, 22, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.3);
  transition: background 0.16s ease, border-color 0.16s ease;
}
#view-studio-gate .novi-entry-auth-btn:hover { background: rgba(168, 85, 247, 0.14); }
#view-studio-gate .novi-entry-auth-btn.primary {
  border: none; color: #fff;
  background: linear-gradient(135deg, #c026f7 -20%, #a855f7 35%, #6d28d9 110%);
  box-shadow: 0 0 22px -6px rgba(168, 85, 247, 0.6);
}
.novi-lx-dash {
  padding: 11px 24px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: #F3C77C;
  background: rgba(20, 13, 2, 0.5);
  border: 1px solid rgba(231, 169, 79, 0.65);
  box-shadow: 0 0 22px -8px rgba(231, 169, 79, 0.55);
  transition: background 0.16s ease, transform 0.16s ease, filter 0.2s ease;
}
.novi-lx-dash:hover { background: rgba(231, 169, 79, 0.14); transform: translateY(-1px); }

.novi-lx-hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center; gap: clamp(10px, 1.6vw, 26px);
  max-width: 1604px; margin: 0 auto;
  padding: clamp(10px, 1.6vh, 22px) clamp(18px, 3.6vw, 60px) 6px;
}
.novi-lx-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: #E7A94F; margin-bottom: 18px;
}
.novi-lx-eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid rgba(231, 169, 79, 0.85);
  box-shadow: 0 0 10px rgba(231, 169, 79, 0.6);
}
.novi-lx-h1 { margin: 0; font-size: clamp(38px, 3.9vw, 62px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.07; color: #fff; }
.novi-lx-h1 em {
  font-style: normal;
  background: linear-gradient(95deg, #F3B653 0%, #E7A94F 34%, #c084fc 78%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #E7A94F;
}
.novi-lx-sub { margin: 18px 0 0; max-width: 470px; font-size: 15px; line-height: 1.65; color: #a6a3bd; }
.novi-lx-ctas { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.novi-lx-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  transition: transform 0.16s ease, filter 0.2s ease, background 0.18s ease, box-shadow 0.2s ease;
}
.novi-lx-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.novi-lx-cta.violett {
  border: 1px solid rgba(167, 139, 250, 0.6); color: #fff;
  background: linear-gradient(135deg, #7C5CFF 0%, #5b34e6 100%);
  box-shadow: 0 0 30px -8px rgba(124, 92, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.novi-lx-cta.violett:hover { transform: translateY(-1px); filter: brightness(1.1); }
.novi-lx-cta.gold {
  color: #F3C77C; background: rgba(20, 13, 2, 0.4);
  border: 1px solid rgba(231, 169, 79, 0.6);
  box-shadow: 0 0 22px -10px rgba(231, 169, 79, 0.5);
}
.novi-lx-cta.gold:hover { background: rgba(231, 169, 79, 0.12); transform: translateY(-1px); }
.novi-lx-art { position: relative; pointer-events: none; }
.novi-lx-art img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  -webkit-mask-image: radial-gradient(ellipse 88% 84% at 50% 46%, #000 60%, transparent 99%);
  mask-image: radial-gradient(ellipse 88% 84% at 50% 46%, #000 60%, transparent 99%);
  filter: drop-shadow(0 30px 80px rgba(88, 28, 135, 0.45));
}

.novi-lx-pills {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  max-width: 1604px; margin: 0 auto;
  padding: 10px clamp(18px, 3.6vw, 60px) 0;
}
.novi-lx-pill {
  display: flex; align-items: center; gap: 15px;
  padding: 17px 20px; border-radius: 15px;
  background: rgba(4, 6, 18, 0.85);
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.novi-lx-pill-icon {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.novi-lx-pill-icon svg { width: 21px; height: 21px; stroke: #c4b5fd; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.novi-lx-pill-text b { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.novi-lx-pill-text span { display: block; font-size: 12px; color: #8b93a7; margin-top: 3px; }
.novi-lx-punkt { width: 8px; height: 8px; border-radius: 50%; background: #45D483; box-shadow: 0 0 9px #45D483; display: inline-block; }

.novi-lx-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  max-width: 1604px; margin: 0 auto;
  padding: 20px clamp(18px, 3.6vw, 60px) clamp(30px, 4.5vh, 52px);
}
.novi-lx-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 18px; border-radius: 18px;
  background: rgba(7, 8, 15, 0.92);
  border: 1px solid rgba(139, 92, 246, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 22px 44px -30px rgba(0, 0, 0, 0.9);
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.novi-lx-card:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 155, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 34px -12px rgba(168, 85, 247, 0.38);
}
.novi-lx-card-art { display: block; border-radius: 12px; overflow: hidden; border: 1px solid rgba(139, 92, 246, 0.14); }
.novi-lx-card-art img { width: 100%; height: auto; display: block; }
.novi-lx-card-tag { margin-top: 8px; padding: 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #E7A94F; }
.novi-lx-card b { padding: 0 8px; font-size: 19px; font-weight: 750; color: #fff; letter-spacing: -0.01em; }
.novi-lx-card p { margin: 0; padding: 0 8px; font-size: 13px; line-height: 1.6; color: #a6a3bd; }
.novi-lx-card-mehr {
  margin-top: 6px; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: #b79bff;
}
.novi-lx-card-mehr svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1180px) {
  .novi-lx-hero { grid-template-columns: 1fr; }
  .novi-lx-art { order: -1; max-width: 640px; margin: 0 auto; }
  .novi-lx-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .novi-lx-cards { grid-template-columns: 1fr; }
  .novi-lx-brand-text { display: none; }
}
@media (max-width: 760px) {
  .novi-lx-nav { flex-wrap: wrap; gap: 10px; }
  .novi-lx-menu { order: 3; width: 100%; justify-content: flex-start; margin: 0; }
  .novi-lx-pills { grid-template-columns: 1fr; }
  #view-studio-gate .novi-entry-auth { margin-left: auto; }
  /* Auf dem Handy nichts unter 10px — darunter sind gesperrte
     Grossbuchstaben kaum noch lesbar (Befund des Mobil-Audits). */
  .novi-lx-brand-text > span { font-size: 10px; letter-spacing: 0.14em; }
  #view-studio-gate [style*="8px"],
  #view-studio-gate [style*="9px"] { font-size: 10px !important; letter-spacing: 0.16em !important; }
}

/* ── Eingangsseite randlos (04.08.) ──────────────────────────────
   Die Ansicht trug 28px Abstand ringsum, dadurch stand die Kopfleiste
   nicht am oberen Rand und links wie rechts blieb ein heller Streifen.
   Die Leiste soll ueber die volle Breite laufen und oben anliegen. */
/* novi-randlos */
#view-studio-gate:not([hidden]) { padding: 0; }
#view-studio-gate > .novi-lx-nav {
  margin: 0; border-radius: 0; width: 100%;
}


/* ═══ KOMMANDOZENTRALE v2 — Uebersicht nach
   design-reference/novi-studio-uebersicht.png ═══ */
.nvh2-heldenreihe { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: stretch; }
.nvh2-hero { position: relative; overflow: hidden; min-height: 250px; display: flex; align-items: center; }
.nvh2-hero-copy { position: relative; z-index: 1; max-width: 55%; }
.nvh2-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; pointer-events: none; }
.nvh2-hero-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}
.nvh2-zitat { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.nvh2-zitat p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #e6e2f2; }
/* Design 3.0: Segoe Script/Brush Script sind Windows-only — der kursive
   Georgia-Fallback sieht auf allen Plattformen gewollt aus statt nackt. */
.nvh2-signatur { font-family: "Segoe Script", "Brush Script MT", Georgia, serif; font-style: italic; font-size: 21px; color: #c4b5fd; }
/* Name historisch: seit dem 17.08. sind es fuenf Kacheln — die
   Qualitaets-Kachel ist entfallen. Der Klassenname bleibt, weil an ihm
   die Design- und Skin-Regeln haengen. */
.nvh2-sechs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nvh2-sechs .nvh-kpi-num { font-size: 22px; }
.nvh2-modules {
  display: grid; gap: 18px; align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Performance ueber die volle Breite; darunter Kalender und
     Monatsziel nebeneinander, exakt haelftig — die Fuge liegt auf der
     Seitenmitte.

     26.08.: vorher sechs Spalten mit zusaetzlichen Feldern "pipe" und
     "seite". Beide Module sind laengst aus dem Markup verschwunden,
     ihre Felder standen aber noch im Raster — deshalb sass der
     Kalender in der rechten Haelfte einer Zeile (links das leere
     pipe-Feld) und das Monatsziel eine Zeile TIEFER. Die zwei leeren
     Felder haben die beiden auseinandergehalten. */
  grid-template-areas:
    "perf perf"
    "kal  ziel";
}
.nvh2-perf { grid-area: perf; }
.nvh2-pipe { grid-area: pipe; }
.nvh2-kal { grid-area: kal; }
.nvh2-ziel { grid-area: ziel; }
.nvh2-seite { grid-area: seite; display: flex; flex-direction: column; gap: 18px; }
.nvh2-kpigrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }

/* ══ Phase 07: der Ablauf als sichtbarer Weg (17.08.) ══════════════
   Die Schrittnummern stehen bereits im Markup (data-schritt) — hier
   werden sie sichtbar gemacht. attr() im content ist genau dafuer da;
   es braucht kein einziges neues Element im HTML. */
#novi-p06-body .novi-cwm-section[data-schritt] {
  position: relative; padding-left: 58px; margin-bottom: 14px;
}
#novi-p06-body .novi-cwm-section[data-schritt]::before {
  content: attr(data-schritt);
  position: absolute; left: 16px; top: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #c4b5fd; background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.42);
}
/* Die Linie zwischen den Nummern macht aus sechs Kaesten einen Weg.
   Sie endet am letzten Schritt — sonst liefe sie ins Leere. */
#novi-p06-body .novi-cwm-section[data-schritt]::after {
  content: ""; position: absolute; left: 28px; top: 50px; bottom: -14px;
  width: 2px; background: linear-gradient(180deg, rgba(139,92,246,.34), rgba(139,92,246,.08));
  pointer-events: none;
}
#novi-p06-body .novi-cwm-section[data-schritt="6"]::after { display: none; }
/* Enger, damit mehr vom Ablauf gleichzeitig im Bild ist. */
#novi-p06-body .novi-cwm-section { padding-top: 14px; padding-bottom: 14px; }
#novi-p06-body .novi-section-sub { font-size: 12.5px; line-height: 1.5; margin: 4px 0 10px; opacity: .8; }
#novi-p06-body .novi-cwm-section-title { font-size: 13px; letter-spacing: .04em; }
/* Die einmalige Windows-Registrierung: zusammengeklappt, weil sie
   genau einmal gebraucht wird und sonst als Textwand mitten im
   Ablauf steht. Der Inhalt bleibt vollstaendig erreichbar. */
#novi-p06-body .novi-einmal-hilfe > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: #c4b5fd; padding: 5px 0;
}
#novi-p06-body .novi-einmal-hilfe > summary::-webkit-details-marker { display: none; }
#novi-p06-body .novi-einmal-hilfe > summary::before { content: "?"; width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 1px solid rgba(139,92,246,.5); }
#novi-p06-body .novi-einmal-hilfe[open] > summary { margin-bottom: 4px; }

/* ══ Kommandozentrale ohne Seiten-Scrollen (17.08., Wunsch) ══════════
   Gemessen war die Übersicht 2944 px hoch: Hero 249, Kennzahlen 209,
   Woche 169 und darunter 2057 px Kacheln — bei 582 px sichtbarer
   Höhe also fünf Bildschirme.

   Ehrlich dazu: ALLES gleichzeitig lesbar auf einen Schirm zu legen
   geht nicht, dafür ist es zu viel Inhalt. Was geht, ist das hier:
   Die SEITE scrollt nicht mehr. Der Kopfbereich wird kompakt, und der
   Kachelbereich füllt exakt die restliche Fensterhöhe — wird eine
   Kachel zu voll, scrollt sie IN SICH. Man sieht damit immer die
   ganze Kommandozentrale auf einmal, statt an ihr entlangzufahren.

   Nur ab 1100 px Breite und 620 px Höhe: darunter ist eine feste
   Höhe schädlich, dort bleibt der gewohnte Fluss. Browser ohne :has()
   ignorieren die Regel und scrollen wie bisher. */
@media (min-width: 1100px) and (min-height: 620px) {
  /* 25.08., Wunsch: KEIN bildschirmfuellendes Armaturenbrett mehr.

     Frueher stand hier das Gegenteil - "Jede Kachel bekommt einen
     echten Deckel und scrollt darunter in sich". Das sah aufgeraeumt
     aus, versteckte aber Inhalt: gemessen bei 1200x760 waren es 54 px
     in "Deine Woche", 122 px in der Performance, 156 px im Kalender
     und 698 px im Monatsziel-Verfolger - dort mehr als doppelt so viel
     wie sichtbar war.

     Jetzt gilt: eine Seite, ein Scrollbalken. Die Seite wird dadurch
     hoeher (2.410 statt 1.708 px), aber nichts ist mehr versteckt.

     Die Media Query bleibt, weil sie die Abstaende setzt. */
  .novi-main:has(#novi-page-overview:not([hidden])) > .novi-content {
    padding-top: 16px; padding-bottom: 16px;
  }
  #novi-page-overview > .nvh { gap: 12px; }
  #novi-page-overview .nvh2-modules { gap: 12px; }
  #novi-page-overview .nvh2-seite { gap: 12px; }
  #novi-page-overview .nvh2-heldenreihe { gap: 12px; }
  #novi-page-overview .nvh-kpis { gap: 10px; }
  #novi-page-overview .nvh2-hero { min-height: 150px; }
}
/* Auf sehr hohen Bildschirmen bleibt sonst Luft ungenutzt. */
@media (min-width: 1600px) and (min-height: 900px) {
  #novi-page-overview .nvh2-hero { min-height: 190px; }
}
/* In der Kommandozentrale stehen die Kennzahlen in EINER Zeile
   nacheinander — bei Platzmangel laeuft die Reihe seitlich weiter. */
.nvh2-perf .nvh2-kpigrid {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
}
.nvh2-perf .nvh2-kpi { flex: 0 0 auto; min-width: 150px; max-width: 210px; }
.nvh2-kpi {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px; border-radius: 12px;
  background: rgba(10, 8, 24, 0.65); border: 1px solid rgba(139, 92, 246, 0.16);
}
/* Unter der Kennzahl: nur Kanaele mit echter Veraenderung. */
.nvh2-kanaldeltas {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed rgba(139, 92, 246, 0.2);
}
.nvh2-kanaldelta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 9.5px; color: #8b93a7;
}
.nvh2-kanaldelta-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.nvh2-kanaldelta b { font-weight: 700; flex: none; }
.nvh2-kanaldelta.plus b { color: #45d483; }
.nvh2-kanaldelta.minus b { color: #f87171; }
.nvh2-kpi > span { font-size: 10px; color: #8b93a7; letter-spacing: 0.02em; }
.nvh2-kpi > b { font-size: 16.5px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.nvh2-kpi .novi-kpi-delta { font-size: 10.5px; }
.nvh2-deltanote { margin: 10px 0 0; font-size: 10.5px; color: #6b7280; }
.nvh2-empty { margin: 14px 0 0; font-size: 12.5px; color: #8b93a7; }
.nvh2-breit { width: 100%; justify-content: center; margin-top: 14px; }
/* "Alle KPI's aktualisieren" — epischer Auftritt (01.08.): Gold-Violett-
   Aura, wandernder Lichtstreif, Puls-Glow, drehendes Icon beim Hover.
   Nur Optik — ID, Wiring und Delegation bleiben unangetastet. */
#nvh2-refresh-unten {
  position: relative; overflow: hidden;
  padding: 13px 18px; border-radius: 14px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff;
  border: 1px solid rgba(232, 185, 74, 0.55);
  background:
    linear-gradient(120deg, rgba(88, 48, 160, 0.55), rgba(20, 12, 44, 0.92) 45%, rgba(120, 74, 20, 0.5)),
    rgba(12, 8, 28, 0.95);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.25),
    0 6px 22px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(232, 185, 74, 0.22);
  animation: nvh2RefreshPuls 2.6s ease-in-out infinite;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
#nvh2-refresh-unten::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.16) 45%, rgba(232, 185, 74, 0.28) 55%, transparent);
  transform: skewX(-18deg);
  animation: nvh2RefreshGlanz 3.4s ease-in-out infinite;
  pointer-events: none;
}
#nvh2-refresh-unten svg {
  transition: transform 0.5s ease;
  filter: drop-shadow(0 0 5px rgba(232, 185, 74, 0.65));
}
#nvh2-refresh-unten:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 185, 74, 0.9);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(232, 185, 74, 0.4);
}
#nvh2-refresh-unten:hover svg { transform: rotate(360deg); }
#nvh2-refresh-unten:active { transform: translateY(0); }
@keyframes nvh2RefreshPuls {
  0%, 100% { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 14px rgba(232, 185, 74, 0.18); }
  50% { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.38), 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 26px rgba(232, 185, 74, 0.34); }
}
@keyframes nvh2RefreshGlanz {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}
.nvh2-pipe-reihe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.nvh2-pipe-karte {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 10px 6px; border-radius: 12px;
  background: rgba(10, 8, 24, 0.65); border: 1px solid rgba(139, 92, 246, 0.18);
}
.nvh2-pipe-art { display: block; width: 100%; border-radius: 9px; overflow: hidden; border: 1px solid rgba(139, 92, 246, 0.16); }
.nvh2-pipe-art img { width: 100%; height: auto; display: block; }
.nvh2-pipe-karte b { font-size: 10.5px; font-weight: 700; color: #fff; line-height: 1.25; }
.nvh2-pipe-karte > span:last-child { font-size: 9.5px; color: #8b93a7; }
.nvh2-pipe-fuss { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.nvh2-pipe-stand { display: flex; flex-direction: column; gap: 2px; flex: none; }
.nvh2-pipe-stand span { font-size: 9.5px; color: #8b93a7; }
.nvh2-pipe-stand b { font-size: 15px; color: #fff; }
.nvh2-pipe-balken { flex: 1; height: 8px; border-radius: 999px; background: rgba(139, 92, 246, 0.14); overflow: hidden; }
.nvh2-pipe-balken span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #a855f7 60%, #d8b4fe); box-shadow: 0 0 10px rgba(168, 85, 247, 0.6); }
.nvh2-kal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nvh2-kal-nav { display: flex; align-items: center; gap: 6px; }
.nvh2-kal-heute {
  padding: 6px 12px; border-radius: 9px; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 700; color: #d8b4fe;
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(168, 85, 247, 0.3);
}
.nvh2-kal-monat { margin-top: 10px; font-size: 13px; font-weight: 700; color: #fff; }
.nvh2-kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.nvh2-kal-kopf { font-size: 9.5px; color: #8b93a7; text-align: center; padding: 2px 0; }
.nvh2-kal-tag {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: #b9b6d4; border-radius: 8px;
  background: rgba(10, 8, 24, 0.6); border: 1px solid rgba(139, 92, 246, 0.1);
}
.nvh2-kal-tag.leer { opacity: 0.28; }
.nvh2-kal-tag.violett { background: rgba(139, 92, 246, 0.3); border-color: rgba(168, 85, 247, 0.55); color: #fff; }
.nvh2-kal-tag.gruen { background: rgba(69, 212, 131, 0.22); border-color: rgba(69, 212, 131, 0.5); color: #d1fae5; }
.nvh2-kal-tag.heute { box-shadow: 0 0 0 2px rgba(216, 180, 254, 0.8); }
.nvh2-kal-legende { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.nvh2-kal-legende span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #8b93a7; }
.nvh2-kal-legende i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.nvh2-kal-legende i.violett { background: #a855f7; }
.nvh2-kal-legende i.gruen { background: #45d483; }
.nvh2-kal-legende i.ohne { background: rgba(139, 146, 167, 0.35); }
.nvh2-kal-tag.plan { border: 1px dashed rgba(196, 181, 253, 0.85); }
.nvh2-kal-tag.slotm { box-shadow: inset 0 -3px 0 rgba(224, 179, 74, 0.55); }
.nvh2-kal-legende i.slotm { background: transparent; box-shadow: inset 0 -3px 0 rgba(224, 179, 74, 0.75); border-radius: 2px; }
.nvh2-kal-legende i.plan { background: transparent; border: 1px dashed rgba(196, 181, 253, 0.85); border-radius: 50%; box-sizing: border-box; }
/* "Geplante Uploads" — Startseiten-Panel aus den Phase-10-Plänen.
   Jede Zeile ist ein Knopf und springt direkt in die Phase 10 des
   jeweiligen Projekts. */
.nvh2-plan { display: flex; flex-direction: column; gap: 8px; }
.nvh2-plan-zeile { display: flex; align-items: center; gap: 8px; background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.22); border-radius: 10px; padding: 8px 10px; cursor: pointer; text-align: left; color: inherit; width: 100%; font: inherit; }
.nvh2-plan-zeile:hover { background: rgba(139, 92, 246, 0.16); }
.nvh2-plan-wann { font-size: 11px; font-weight: 700; color: #c4b5fd; white-space: nowrap; }
.nvh2-plan-wann.faellig { color: #f8b4b4; }
.nvh2-plan-ziel { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvh2-plan-kanal { font-size: 10.5px; color: #8b93a7; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.nvh2-plan-leer { font-size: 12px; color: #8b93a7; margin: 0; }
/* Upload-Heatmap (Analytics): 12 Monate, eine Zelle pro Tag. */
.nvhm-rollen { overflow-x: auto; padding-bottom: 6px; }
.nvhm-grid { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; grid-auto-columns: 11px; gap: 2px; }
.nvhm-zelle { border-radius: 2.5px; background: rgba(139, 146, 167, 0.14); }
.nvhm-zelle.v1 { background: rgba(139, 92, 246, 0.35); }
.nvhm-zelle.v2 { background: rgba(139, 92, 246, 0.65); }
.nvhm-zelle.v3 { background: #a855f7; }
.nvhm-zelle.g1 { background: rgba(69, 212, 131, 0.4); }
.nvhm-zelle.g2 { background: rgba(69, 212, 131, 0.7); }
.nvhm-zelle.g3 { background: #45d483; }
.nvhm-legende { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 10px; color: #8b93a7; }
.nvhm-legende i { width: 11px; height: 11px; border-radius: 2.5px; display: inline-block; }
/* Geplant-Seite: gleiche Zeilen wie das Startseiten-Panel, volle Breite. */
#novi-geplant-body .nvh2-plan-zeile { max-width: 720px; }
#novi-geplant-body { display: flex; flex-direction: column; gap: 8px; }
/* "Was ist passiert?"-Bericht nach dem KPI-Abruf */
#novi-delta-bericht { position: fixed; inset: 0; z-index: 4000; background: rgba(4, 6, 12, 0.72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.nvdb-box { background: #0d1220; border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 16px; padding: 20px 22px; max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); }
.nvdb-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 17px; }
.nvdb-zeile { padding: 9px 0; border-bottom: 1px solid rgba(139, 92, 246, 0.14); }
.nvdb-zeile b { font-size: 13px; }
.nvdb-teile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.nvdb-teil { font-size: 11px; border-radius: 999px; padding: 2px 9px; background: rgba(139, 146, 167, 0.14); color: #c7cbd8; }
.nvdb-teil.plus { background: rgba(69, 212, 131, 0.16); color: #86efac; }
.nvdb-teil.minus { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
/* Kanal-Logbuch */
.novi-logbuch-liste { display: flex; flex-direction: column; }
.novi-logbuch-zeile { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(139, 92, 246, 0.14); }
.novi-logbuch-datum { font-size: 11.5px; font-weight: 700; color: #e0b34a; white-space: nowrap; }
.novi-logbuch-text { flex: 1; min-width: 0; font-size: 12.5px; }
/* ── System-Puls-Leiste: vier ehrliche Fakten am unteren Studio-Rand.
   Sitzt als schmale feste Zeile rechts neben der Sidebar; auf dem Handy
   rutscht sie über die untere Navigationsleiste. ── */
.novi-puls {
  position: fixed; left: 264px; right: 0; bottom: 0; z-index: 18;
  display: flex; align-items: stretch;
  background: rgba(8, 6, 18, 0.93);
  border-top: 1px solid rgba(139, 92, 246, 0.22);
  backdrop-filter: blur(8px);
  font-size: 12px;
}
.novi-puls-seg {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 10px; background: none; border: none; color: var(--nv-text-mut);
  font: inherit; font-size: inherit; cursor: pointer; white-space: nowrap; overflow: hidden;
}
.novi-puls-seg + .novi-puls-seg { border-left: 1px solid rgba(139, 92, 246, 0.14); }
.novi-puls-seg:hover { background: rgba(139, 92, 246, 0.1); }
.novi-puls-punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #64748b; }
.novi-puls-punkt.gut { background: #34d399; }
.novi-puls-label { opacity: 0.72; overflow: hidden; text-overflow: ellipsis; }
.novi-puls-wert { color: var(--nv-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
#view-novi-studio .novi-content { padding-bottom: 96px; }
:root[data-theme="light"][data-legacy-light] .novi-puls {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: rgba(109, 40, 217, 0.22);
}
@media (max-width: 760px) {
  .novi-puls { left: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); font-size: 10px; }
  .novi-puls-seg { flex-direction: column; gap: 2px; padding: 5px 4px; }
  .novi-puls-punkt { display: none; }
  .novi-puls-label { max-width: 100%; }
  .novi-puls-wert { max-width: 100%; }
  #view-novi-studio .novi-content { padding-bottom: 150px; }
}
/* Wochen-Rückblick: Faktenreihe auf der Studio-Startseite */
/* 25.08.: Beide Raster zaehlen selbst durch. Vorher standen fuenf
   KPI-Karten in drei Spalten (3 + 2 mit Luecke) und sechs
   Wochen-Fakten in fuenf (5 + 1). Eine feste Spaltenzahl passt nie
   zu einer Kachelzahl, die sich aendern kann. */
/* Der Skin gewinnt hier: :root[data-skin="spk"] .nvh-kpis setzt
   repeat(3, ...) mit !important. Deshalb muss die Regel den Skin im
   Waehler mitfuehren - in dieser Datei haengt der ganze Look an
   data-skin, und wer das vergisst, aendert nichts. */
:root[data-skin] #novi-page-overview .nvh-kpis,
#novi-page-overview .nvh-kpis {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
}
:root[data-skin] #novi-page-overview .nvwr-reihe,
#novi-page-overview .nvwr-reihe {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
  gap: 10px !important;
}
.nvwr-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.nvwr-fakt { flex: 1 1 150px; min-width: 130px; background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.14); border-radius: 12px; padding: 12px 14px; }
.nvwr-fakt b { display: block; font-size: 22px; line-height: 1.2; }
.nvwr-fakt span { font-size: 11.5px; color: var(--nv-text-mut); }
.nvwr-hint { font-size: 11px; color: var(--nv-text-mut); margin-top: 8px; }
/* Projektkarten: 10-Segment-Phasenbalken */
.novi-vp-phasenbar { display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.novi-vp-phz { flex: 1 1 0; height: 6px; border-radius: 3px; background: rgba(139, 146, 167, 0.25); }
.novi-vp-phz.ok { background: #8b5cf6; }
.novi-vp-phasenbar-text { flex: none; font-size: 10.5px; color: var(--nv-text-mut); margin-left: 6px; white-space: nowrap; }
#novi-vp-fast { max-width: 220px; }
#novi-vp-fast.aktiv { background: rgba(139, 92, 246, 0.28); border-color: rgba(139, 92, 246, 0.6); }
/* Automatische Logbuch-Einträge: kleiner Auto-Chip vor dem Text */
.novi-logbuch-autochip { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 1px 7px; background: rgba(224, 179, 74, 0.16); color: #e0b34a; }
/* ── Optik-Paket (03.08.) ─────────────────────────────────────────────
   1 Seitenübergänge + gestaffeltes Einblenden (nur beim Seitenwechsel;
     die .novi-anim-Klasse wird nach ~0,9 s wieder entfernt, damit
     Re-Renders — z. B. Tippen in der Projektsuche — nicht flackern)   */
@keyframes noviSeiteEin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes noviKarteEin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.novi-page.novi-anim { animation: noviSeiteEin 0.26s ease both; }
.novi-page.novi-anim :is(.nvh-panel, .novi-vp-card, .novi-profile-card, .novi-settings-tile, .nvwr-fakt, .novi-cwm-section, .nvan-chart) { animation: noviKarteEin 0.34s ease both; }
.novi-page.novi-anim :is(.nvh-panel, .novi-vp-card, .novi-profile-card, .novi-settings-tile, .nvwr-fakt, .novi-cwm-section, .nvan-chart):nth-child(2) { animation-delay: 0.05s; }
.novi-page.novi-anim :is(.nvh-panel, .novi-vp-card, .novi-profile-card, .novi-settings-tile, .nvwr-fakt, .novi-cwm-section, .nvan-chart):nth-child(3) { animation-delay: 0.1s; }
.novi-page.novi-anim :is(.nvh-panel, .novi-vp-card, .novi-profile-card, .novi-settings-tile, .nvwr-fakt, .novi-cwm-section, .nvan-chart):nth-child(4) { animation-delay: 0.15s; }
.novi-page.novi-anim :is(.nvh-panel, .novi-vp-card, .novi-profile-card, .novi-settings-tile, .nvwr-fakt, .novi-cwm-section, .nvan-chart):nth-child(5) { animation-delay: 0.2s; }
.novi-page.novi-anim :is(.nvh-panel, .novi-vp-card, .novi-profile-card, .novi-settings-tile, .nvwr-fakt, .novi-cwm-section, .nvan-chart):nth-child(n+6) { animation-delay: 0.24s; }
/* 3 Skeleton-Loader: schimmernde Platzhalter, solange Server-Daten laden */
.novi-skel { position: relative; overflow: hidden; border-radius: 8px; background: rgba(139, 146, 167, 0.13); min-height: 12px; }
.novi-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); animation: noviSkelZug 1.2s infinite; }
@keyframes noviSkelZug { to { transform: translateX(100%); } }
/* 4 Verlaufskurven: Linie zeichnet sich einmal sanft ein */
.nvan-linie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nvanZeichnen 0.9s ease forwards; }
@keyframes nvanZeichnen { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .novi-page.novi-anim, .novi-page.novi-anim * { animation: none !important; }
  .novi-skel::after { animation: none; }
  .nvan-linie { animation: none; stroke-dashoffset: 0; }
}
/* 2 Kanal-Akzentfarben: Farbwahl-Punkte auf den Profilkarten */
.novi-akzentdots { display: flex; gap: 7px; align-items: center; margin: 10px 0 2px; flex-wrap: wrap; }
.novi-akzentdot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; flex: none; }
.novi-akzentdot.aktiv { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
/* 5 Akzent-Themes: Farbwahl in den Einstellungen */
.novi-akzent-wahl { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(139, 92, 246, 0.18); border-radius: 14px; background: rgba(139, 92, 246, 0.05); }
.novi-akzent-label b { display: block; font-size: 13px; }
.novi-akzent-label span { font-size: 11.5px; color: var(--nv-text-mut); }
.novi-akzent-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; flex: none; }
.novi-akzent-swatch.violett { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.novi-akzent-swatch.gold { background: linear-gradient(135deg, #e0b34a, #a1741f); }
.novi-akzent-swatch.smaragd { background: linear-gradient(135deg, #34d399, #0f9d6a); }
.novi-akzent-swatch.aktiv { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }
/* Gold-Thema: die sichtbarsten Akzente des Studios */
:root[data-novi-akzent="gold"] .novi-nav-item:hover { background: rgba(224, 179, 74, 0.09); }
:root[data-novi-akzent="gold"] .novi-nav-item.active { background: linear-gradient(120deg, rgba(224, 179, 74, 0.3), rgba(161, 116, 31, 0.2)); box-shadow: inset 0 0 0 1px rgba(240, 205, 120, 0.34), 0 0 22px -4px rgba(224, 179, 74, 0.45); }
:root[data-novi-akzent="gold"] .novi-card-cta:not(.danger):not(.secondary) { background: linear-gradient(135deg, #e0b34a, #a1741f); }
:root[data-novi-akzent="gold"] .novi-completeness-fill, :root[data-novi-akzent="gold"] .novi-cw-summary-fill { background: linear-gradient(90deg, #e0b34a, #b8860b); }
:root[data-novi-akzent="gold"] .novi-vp-phz.ok { background: #e0b34a; }
:root[data-novi-akzent="gold"] .novi-puls { border-top-color: rgba(224, 179, 74, 0.3); }
:root[data-novi-akzent="gold"] .novi-puls-seg:hover { background: rgba(224, 179, 74, 0.1); }
:root[data-novi-akzent="gold"] .novi-settings-tile { border-color: rgba(224, 179, 74, 0.22); background: linear-gradient(160deg, rgba(224, 179, 74, 0.08), var(--nv-lift-2)); }
:root[data-novi-akzent="gold"] .nvwr-fakt { border-color: rgba(224, 179, 74, 0.2); background: rgba(224, 179, 74, 0.07); }
:root[data-novi-akzent="gold"] .nvh-panel { border-color: rgba(224, 179, 74, 0.18); }
/* Smaragd-Thema */
:root[data-novi-akzent="smaragd"] .novi-nav-item:hover { background: rgba(52, 211, 153, 0.09); }
:root[data-novi-akzent="smaragd"] .novi-nav-item.active { background: linear-gradient(120deg, rgba(52, 211, 153, 0.28), rgba(15, 157, 106, 0.2)); box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.34), 0 0 22px -4px rgba(52, 211, 153, 0.45); }
:root[data-novi-akzent="smaragd"] .novi-card-cta:not(.danger):not(.secondary) { background: linear-gradient(135deg, #34d399, #0f9d6a); }
:root[data-novi-akzent="smaragd"] .novi-completeness-fill, :root[data-novi-akzent="smaragd"] .novi-cw-summary-fill { background: linear-gradient(90deg, #34d399, #059669); }
:root[data-novi-akzent="smaragd"] .novi-vp-phz.ok { background: #34d399; }
:root[data-novi-akzent="smaragd"] .novi-puls { border-top-color: rgba(52, 211, 153, 0.3); }
:root[data-novi-akzent="smaragd"] .novi-puls-seg:hover { background: rgba(52, 211, 153, 0.1); }
:root[data-novi-akzent="smaragd"] .novi-settings-tile { border-color: rgba(52, 211, 153, 0.22); background: linear-gradient(160deg, rgba(52, 211, 153, 0.08), var(--nv-lift-2)); }
:root[data-novi-akzent="smaragd"] .nvwr-fakt { border-color: rgba(52, 211, 153, 0.2); background: rgba(52, 211, 153, 0.07); }
:root[data-novi-akzent="smaragd"] .nvh-panel { border-color: rgba(52, 211, 153, 0.18); }
/* ── Geteilte Ansicht (Desktop): rechts eine zweite App-Instanz ────── */
.novi-split-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 8px; padding: 10px 12px; border-radius: 12px;
  background: none; border: 1px solid rgba(139, 92, 246, 0.22);
  color: var(--nv-text-mut); font: inherit; font-size: 12.5px; cursor: pointer;
}
.novi-split-btn:hover { background: rgba(139, 92, 246, 0.1); color: var(--nv-text); }
.novi-split-btn.aktiv { background: rgba(139, 92, 246, 0.2); color: var(--nv-text); border-color: rgba(139, 92, 246, 0.5); }
.novi-split-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
#novi-split {
  position: fixed; top: 0; right: 0; bottom: 0; width: 50vw; z-index: 400;
  display: flex; flex-direction: column;
  background: var(--nv-page); border-left: 1px solid rgba(139, 92, 246, 0.4);
  box-shadow: -12px 0 32px -18px rgba(0, 0, 0, 0.8);
}
.novi-split-kopf {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 5px 12px; font-size: 11px; color: var(--nv-text-mut);
  background: rgba(10, 10, 20, 0.96); border-bottom: 1px solid rgba(139, 92, 246, 0.22);
}
.novi-split-kopf button {
  background: none; border: 1px solid rgba(139, 92, 246, 0.35); color: inherit;
  border-radius: 7px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 11px;
}
.novi-split-kopf button:hover { background: rgba(139, 92, 246, 0.14); color: var(--nv-text); }
.novi-split-frame { flex: 1; width: 100%; border: 0; background: var(--nv-page); }
/* Linke Hälfte: Studio-Ansicht, Hub-Ansichten und Puls-Leiste rücken
   auf 50 % zusammen — die rechte Hälfte gehört dem zweiten Fenster. */
body.novi-split-aktiv .novi-studio-view { right: 50vw; }
body.novi-split-aktiv .novi-puls { right: 50vw; }
body.novi-split-aktiv #app-shell { max-width: 50vw; }
@media (max-width: 760px) {
  .novi-split-btn, #novi-split { display: none; }
  /* Wer die Teilung am grossen Bildschirm geöffnet hat und dann auf
     Handybreite wechselt (Drehen, Fenster verkleinern), soll nicht in
     einer halbierten Ansicht ohne zweites Fenster landen. */
  body.novi-split-aktiv .novi-studio-view,
  body.novi-split-aktiv .novi-puls { right: 0; }
  body.novi-split-aktiv #app-shell { max-width: none; }
}
/* Thumbnail-Galerie: 16:9-Kacheln im Raster, Beschriftung darunter. */
.nvtg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.nvtg-kachel { text-align: left; }
.nvtg-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.22); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nvtg-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nvtg-frame .nvtg-leer { font-size: 10.5px; color: #8b93a7; padding: 8px; text-align: center; }
.nvtg-badge { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(69, 212, 131, 0.9); color: #06130b; border-radius: 999px; padding: 2px 7px; }
.nvtg-label { font-size: 11px; color: #8b93a7; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvtg-abschnitt { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
/* Monatsziel: bestehendes Panel im dunklen Rahmen einbetten.
   !important, weil die Theme-Schicht (:root[data-theme=light] .perf-panel)
   sonst per Spezifitaet einen weissen Verlauf hineindrueckt — die
   Kommandozentrale ist themenunabhaengig dunkel. */
.nvh2-ziel-einbett { margin-top: 10px; color-scheme: dark; }
/* Monatsziel-Panel ist klickbar → Monatsarchiv (01.08.) */
#nvh2-ziel-panel { cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
#nvh2-ziel-panel:hover, #nvh2-ziel-panel:focus-visible {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.25);
  transform: translateY(-1px);
  outline: none;
}
.nvarch-labelzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nvarch-hint { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: #d8b4fe; opacity: 0.75; text-transform: none; }
#nvh2-ziel-panel:hover .nvarch-hint { opacity: 1; }
/* Monatsarchiv-Seite */
.nvarch-panel { display: block; }
.nvarch-sub { margin: 8px 0 0; font-size: 11.5px; color: #8b93a7; line-height: 1.5; }
.nvarch-scroll { overflow-x: auto; margin-top: 12px; }
.nvarch-tabelle { width: 100%; border-collapse: collapse; min-width: 720px; }
.nvarch-tabelle th {
  text-align: left; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8b93a7; padding: 8px 10px; border-bottom: 1px solid rgba(139, 92, 246, 0.25);
}
.nvarch-tabelle td { padding: 10px; font-size: 12.5px; color: #d6d3ea; border-bottom: 1px solid rgba(139, 92, 246, 0.12); }
.nvarch-tabelle td:first-child { font-weight: 700; color: #fff; white-space: nowrap; }
.nvarch-zeile.is-laufend td { background: rgba(139, 92, 246, 0.08); }
.nvarch-band {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #0b0a14; background: linear-gradient(90deg, #e8b94a, #f2d489);
}
.nvarch-ab { display: block; font-size: 9.5px; color: #8b93a7; font-weight: 400; }
.nvarch-plus { color: #45d483; font-weight: 800; }
.nvarch-minus { color: #f87171; font-weight: 800; }
.nvarch-null { color: #8b93a7; font-weight: 700; }
.nvarch-leer { color: #8b93a7; font-style: italic; }
.nvarch-ziel { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.nvarch-ziel-pct { font-size: 11.5px; font-weight: 800; color: #d8b4fe; }
.nvarch-ziel-pct.is-voll { color: #4ade80; }
.nvarch-ziel-balken { display: block; height: 5px; border-radius: 999px; background: rgba(139, 146, 167, 0.22); overflow: hidden; }
.nvarch-ziel-balken i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #e8b94a); min-width: 2px; }
/* Monatszeile aufklappbar → Kanal-Aufschlüsselung (11.08.) */
.nvarch-zeile.is-klickbar { cursor: pointer; }
.nvarch-zeile.is-klickbar:hover td { background: rgba(139, 92, 246, 0.07); }
.nvarch-pfeil { display: inline-block; margin-left: 7px; font-size: 9px; color: #8b93a7; transition: transform 0.15s ease; vertical-align: middle; }
.nvarch-zeile.is-offen .nvarch-pfeil { transform: rotate(90deg); color: #d8b4fe; }
.nvarch-detail > td { background: rgba(10, 8, 24, 0.55); padding: 12px 12px 16px; }
.nvarch-detail-titel { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8b93a7; margin: 0 0 8px; }
.nvarch-kanaltab { width: 100%; border-collapse: collapse; }
.nvarch-kanaltab th { text-align: left; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #8b93a7; padding: 5px 8px; border-bottom: 1px solid rgba(139, 92, 246, 0.18); }
.nvarch-kanaltab td { padding: 6px 8px; font-size: 12px; color: #d6d3ea; border-bottom: 1px solid rgba(139, 92, 246, 0.08); }
.nvarch-kanaltab td:first-child { font-weight: 700; color: #fff; white-space: nowrap; }
/* Speicher-Verwaltung (01.08.) */
.nvsp-balken { height: 10px; border-radius: 999px; background: rgba(139, 146, 167, 0.22); overflow: hidden; margin-top: 10px; }
.nvsp-balken span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #45d483, #e8b94a 65%, #f87171); min-width: 3px; }
.nvsp-klar { display: block; font-size: 10px; color: #8b93a7; font-weight: 400; margin-top: 2px; }
/* Serien-Planer im Clips Upload (02.08.) */
.novi-cu-serie {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(10, 8, 24, 0.55); border: 1px solid rgba(139, 92, 246, 0.2);
}
.novi-cu-serie-titel { align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8b93a7; }
.novi-cu-serie label { display: flex; flex-direction: column; gap: 4px; }
/* Feste Upload-Einstellungen je Kanal (02.08.) */
.novi-cu-einst {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(139, 92, 246, 0.18);
}
.novi-cu-einst label { display: flex; flex-direction: column; gap: 4px; }
.novi-cu-einst b { color: #d6d3ea; }
.nvsp-del { max-width: 110px; padding: 6px 10px; font-size: 11px; }
/* Referenzbilder-Schnellzugriff neben den Prompt-Knoepfen (02.08.) */
.novi-refbilder {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(10, 8, 24, 0.55); border: 1px solid rgba(139, 92, 246, 0.2);
}
/* In der Aktionsleiste: eigene volle Zeile unter den Knöpfen. */
.novi-cwm-actions .novi-refbilder { flex: 1 1 100%; margin-top: 2px; }
.novi-refbilder-titel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8b93a7; }
.novi-refbild {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 4px; border-radius: 10px;
  color: #d6d3ea; font-family: inherit; font-size: 12px; cursor: pointer;
}
.novi-refbild:hover { background: rgba(139, 92, 246, 0.14); }
.novi-refbild.fehlt { cursor: default; color: #8b93a7; font-size: 11.5px; }
.novi-refbild.fehlt:hover { background: none; }
.novi-refbild-rahmen {
  width: 38px; height: 38px; border-radius: 9px; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(24, 22, 38, 0.9); border: 1px solid rgba(168, 85, 247, 0.35);
  color: #8b93a7; font-size: 13px;
}
.novi-refbild-rahmen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.novi-refbild-copy { max-width: 110px; padding: 6px 10px; font-size: 11px; }
#novi-refbild-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(4, 2, 12, 0.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.novi-refbild-gross {
  max-width: min(760px, 94vw); max-height: 92vh; overflow: auto;
  background: rgba(16, 12, 32, 0.98); border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(139, 92, 246, 0.25);
}
.novi-refbild-gross-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.novi-refbild-gross-kopf b { color: #fff; font-size: 14px; }
#novi-refbild-zu {
  background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe; border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
  font-size: 13px; font-family: inherit;
}
.novi-refbild-gross-bild { margin-top: 12px; text-align: center; color: #8b93a7; font-size: 12px; }
.novi-refbild-gross-bild img { max-width: 100%; max-height: 68vh; border-radius: 10px; }
.novi-refbild-gross-hinweis { margin: 10px 0 0; font-size: 11px; color: #8b93a7; line-height: 1.5; }
.nvh2-ziel-einbett .perf-panel {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important; color: #e6e2f2 !important;
}
.nvh2-ziel-einbett .perf-shimmer { display: none !important; }
.nvh2-ziel-einbett .perf-date,
.nvh2-ziel-einbett .goal-ring-caption,
.nvh2-ziel-einbett .goal-substatus,
.nvh2-ziel-einbett .goal-stats-sep { color: rgba(230, 226, 242, 0.55) !important; }
.nvh2-ziel-einbett .goal-loading { color: rgba(230, 226, 242, 0.65) !important; }
.nvh2-ziel-einbett .goal-stats-current,
.nvh2-ziel-einbett .goal-stats-target { color: #fff !important; }
.nvh2-ziel-einbett .goal-remaining { color: #c4b5fd !important; }
.nvh2-ziel-einbett .goal-forecast { color: rgba(230, 226, 242, 0.75) !important; }
.nvh2-ziel-einbett .goal-forecast b { color: #fff !important; }
.nvh2-ziel-einbett .goal-ring-track { stroke: rgba(255, 255, 255, 0.08) !important; }
.nvh2-analytics { max-width: 1100px; }
.nvh2-analytics .nvh2-kpigrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  /* 26.08.: ab hier schon vorher zweispaltig — jetzt mit derselben
     Aufteilung wie oben, damit der Sprung ueber die Grenze nichts
     umsortiert. */
  .nvh2-modules { grid-template-columns: 1fr 1fr; grid-template-areas: "perf perf" "kal ziel"; }
  .nvh2-sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nvh2-heldenreihe { grid-template-columns: 1fr; }
  /* Unter 900px passen zwei Halbspalten nicht mehr nebeneinander —
     hier bleibt es bewusst untereinander. */
  .nvh2-modules { grid-template-columns: 1fr; grid-template-areas: "perf" "kal" "ziel"; }
  .nvh2-sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nvh2-kpigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nvh2-hero-copy { max-width: 100%; }
  .nvh2-hero-art { opacity: 0.4; }
  .nvh2-pipe-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* == KPI-Ladebildschirm nach Referenz (31.07.) ======================== */
.nvel { background: #030209; }
.nvel-karte {
  width: min(1240px, 94vw); max-height: 94vh; overflow: auto;
  border: 1px solid rgba(139,92,246,.26); border-radius: 26px;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, #0b0620 0%, #050310 62%, #030209 100%);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 60px rgba(124,92,255,.08) inset;
  padding: 34px 38px 30px; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.nvel-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.nvel-logo-text { display: flex; flex-direction: column; text-align: left; }
.nvel-logo-text b {
  font-size: 1.25rem; font-weight: 800; letter-spacing: .28em;
  text-transform: uppercase; color: #fff;
}
.nvel-logo-text b em { font-style: normal; color: #8b5cf6; }
.nvel-logo-text > span {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: #6f6a8d; margin-top: 3px;
}
.nvel-buehne {
  display: grid; grid-template-columns: 230px minmax(0,1fr) 230px;
  gap: 26px; width: 100%; align-items: center;
}
.nvel-panel {
  border: 1px solid rgba(139,92,246,.16); border-radius: 16px;
  background: rgba(10,6,26,.55); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.nvel-rechts { background: none; border: none; padding: 0; gap: 14px; }
.nvel-block {
  border: 1px solid rgba(139,92,246,.16); border-radius: 16px;
  background: rgba(10,6,26,.55); padding: 16px;
}
.nvel-panel-titel {
  margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #8b84ad;
}
.nvel-chart { width: 100%; height: auto; border-radius: 10px; display: block; }
.nvel-zeilen { display: flex; flex-direction: column; gap: 10px; }
.nvel-zeilen p {
  margin: 0; display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 10px; background: rgba(124,92,255,.06);
  border: 1px solid rgba(139,92,246,.12);
}
.nvel-zeilen b { color: #fff; font-size: .95rem; }
.nvel-zeilen span { color: #8b84ad; font-size: .74rem; }
.nvel-leer { margin: 0; color: #8b84ad; font-size: .8rem; line-height: 1.45; }
.nvel-mitte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nvel-orbit { position: relative; width: 300px; height: 300px; flex: 0 0 auto; }
.nvel-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(139,92,246,.22);
}
.nvel-ring.r1 { inset: 8px; border-style: dashed; opacity: .55; }
.nvel-ring.r2 { inset: 40px; }
.nvel-ring.r3 { inset: 66px; border-color: rgba(139,92,246,.34); }
.nvel-lichter { position: absolute; inset: 8px; animation: nvelKreisen 7s linear infinite; }
.nvel-lichter i {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #a78bfa; box-shadow: 0 0 12px 3px rgba(139,92,246,.75);
}
.nvel-lichter i:nth-child(1) { top: -5px; left: calc(50% - 5px); }
.nvel-lichter i:nth-child(2) { top: calc(50% - 4px); right: 27px; width: 8px; height: 8px; opacity: .9; }
.nvel-lichter i:nth-child(3) { bottom: 22px; left: 15%; width: 7px; height: 7px; opacity: .75; }
.nvel-lichter i:nth-child(4) { top: 18%; left: 8%; width: 6px; height: 6px; opacity: .6; }
.nvel-bogen {
  position: absolute; inset: 40px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: #8b5cf6; border-right-color: rgba(139,92,246,.45);
  filter: drop-shadow(0 0 8px rgba(139,92,246,.9));
  animation: nvelKreisen 2.4s linear infinite;
}
@keyframes nvelKreisen { to { transform: rotate(360deg); } }
.nvel-avatar {
  position: absolute; inset: 78px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(139,92,246,.4);
  box-shadow: 0 0 40px rgba(124,92,255,.4);
  animation: nvelAtmen 3.6s ease-in-out infinite;
}
.nvel-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes nvelAtmen {
  0%, 100% { box-shadow: 0 0 30px rgba(124,92,255,.35); }
  50% { box-shadow: 0 0 55px rgba(124,92,255,.6); }
}
.nvel .novi-epic-loader-title em { font-style: normal; color: #8b5cf6; }
.nvel-schritte {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; gap: 34px; justify-content: center;
}
.nvel-schritte li {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  position: relative; color: #6f6a8d; font-size: .78rem; font-weight: 600;
}
.nvel-schritte li + li::before {
  content: ""; position: absolute; top: 21px; right: calc(100% + 4px);
  width: 26px; height: 1px; background: rgba(139,92,246,.25);
}
.nvel-s-kreis {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(139,92,246,.3); color: #8b84ad;
  background: rgba(10,6,26,.7); transition: all .25s ease;
}
.nvel-s-kreis svg {
  width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nvel-s-kreis .haken { display: none; }
.nvel-schritte li.aktiv { color: #b9a5ff; }
.nvel-schritte li.aktiv .nvel-s-kreis {
  border-color: #8b5cf6; color: #b9a5ff;
  box-shadow: 0 0 16px rgba(139,92,246,.5);
}
.nvel-schritte li.aktiv::after {
  content: ""; position: absolute; bottom: -13px; width: 7px; height: 7px;
  border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 10px rgba(139,92,246,.9);
}
.nvel-schritte li.fertig { color: #a89fd0; }
.nvel-schritte li.fertig .nvel-s-kreis {
  background: #7c5cff; border-color: #7c5cff; color: #fff;
  box-shadow: 0 0 14px rgba(124,92,255,.55);
}
.nvel-schritte li.fertig .nvel-s-kreis svg { display: none; }
.nvel-schritte li.fertig .nvel-s-kreis .haken { display: block; }
.nvel-balkenzeile {
  display: flex; align-items: center; gap: 16px;
  width: min(560px, 100%); margin-top: 26px;
}
.nvel-balken {
  flex: 1; height: 10px; border-radius: 999px;
  background: rgba(124,92,255,.12); border: 1px solid rgba(139,92,246,.2);
  overflow: hidden;
}
#nvel-balken-fuellung {
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c5cff, #a78bfa);
  box-shadow: 0 0 16px rgba(124,92,255,.85);
  transition: width .4s ease;
}
#nvel-prozent { color: #b9a5ff; font-size: .95rem; min-width: 44px; text-align: left; }
.nvel-geduld { margin: 14px 0 0; color: #6f6a8d; font-size: .8rem; }
.nvel-donutzeile { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.nvel-donut {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(#8b5cf6 var(--winkel, 0deg), rgba(124,92,255,.14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}
.nvel-donut-text { display: flex; flex-direction: column; text-align: left; }
.nvel-donut-text b { color: #fff; font-size: 1.05rem; }
.nvel-donut-text span { color: #8b84ad; font-size: .74rem; }
.nvel-statuszeile {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 0;
  color: #cfc9e8; font-size: .84rem;
}
.nvel-statuszeile .punkt {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.nvel-statuszeile .punkt.gruen { background: #34d399; box-shadow: 0 0 10px rgba(52,211,153,.8); }
.nvel-statuszeile .punkt.wartet { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,.8); animation: nvelBlinken 1.2s ease-in-out infinite; }
@keyframes nvelBlinken { 50% { opacity: .35; } }
@media (max-width: 1100px) {
  .nvel-buehne { grid-template-columns: 1fr; }
  .nvel-panel, .nvel-rechts { display: none; }
  .nvel-schritte { gap: 16px; flex-wrap: wrap; }
  .nvel-schritte li + li::before { display: none; }
  .nvel-orbit { width: 240px; height: 240px; }
  .nvel-avatar { inset: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .nvel-lichter, .nvel-bogen, .nvel-avatar, .nvel-statuszeile .punkt.wartet { animation: none; }
}


/* == Modelle & Preise nach Referenz (31.07.) ========================== */
/* WICHTIG: kein position-Override — .novi-entry-view ist position:fixed
   und deckt damit den alten Workspace-Chrome vollstaendig ab. */
.nvpr {
  background:
    radial-gradient(ellipse 60% 40% at 75% 8%, rgba(124, 92, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 35% at 15% 85%, rgba(124, 58, 237, 0.12), transparent 60%),
    linear-gradient(180deg, #08051a 0%, #060312 55%, #070316 100%) !important;
}
.nvpr:not([hidden]) { align-items: flex-start; }
.nvpr::before, .nvpr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 34% 68%, rgba(216,180,254,.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 76% 42%, rgba(216,180,254,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 89% 78%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 22% 88%, rgba(216,180,254,.6), transparent 100%),
    radial-gradient(1px 1px at 66% 92%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 38%, rgba(216,180,254,.5), transparent 100%);
  animation: nvprFunkeln 5s ease-in-out infinite;
}
.nvpr::after {
  background-image:
    radial-gradient(1px 1px at 8% 52%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 28% 8%, rgba(216,180,254,.7), transparent 100%),
    radial-gradient(1px 1px at 50% 78%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 22%, rgba(216,180,254,.6), transparent 100%),
    radial-gradient(1px 1px at 92% 58%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 40% 96%, rgba(216,180,254,.5), transparent 100%);
  animation-delay: 2.5s;
}
/* Die Basis-Ebene legt auf ::before die Timeline-Grafik samt Maske —
   fuer den Sternenhimmel alles zuruecksetzen. */
.nvpr::before, .nvpr::after {
  height: auto; opacity: .8;
  background-size: auto; background-position: 0 0; background-repeat: repeat;
  -webkit-mask-image: none; mask-image: none;
}
@keyframes nvprFunkeln { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.nvpr-inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 26px 28px 46px; }
.nvpr-kopf { text-align: center; }
.nvpr-augenbraue {
  margin: 0 0 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .38em; text-transform: uppercase; color: #cfc9e8;
}
.nvpr-kopf h1 {
  margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 900;
  letter-spacing: -.01em; color: #fff;
}
.nvpr-kopf h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #a78bfa 10%, #7c5cff 55%, #c4b5fd 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(124, 92, 255, 0.45));
}
.nvpr-unter { margin: 10px 0 0; color: #b9b6d4; font-size: 1rem; }
.nvpr-notiz {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 18px;
  padding: 12px 22px; border-radius: 14px; text-align: left;
  border: 1px solid rgba(139, 92, 246, 0.4); background: rgba(20, 12, 44, 0.55);
  color: #cfc9e8; font-size: .84rem; line-height: 1.5;
}
.nvpr-notiz b { color: #d8b4fe; font-weight: 700; }
.nvpr-info {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(139, 92, 246, 0.5); color: #b9a5ff;
}
.nvpr-info svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.nvpr-lage { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; margin-top: 26px; align-items: start; }
.nvpr .novi-pricing-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px; margin: 0;
}
.nvpr-feld-free   { grid-column: span 2; }
.nvpr-feld-bronze { grid-column: span 2; }
.nvpr-feld-silber { grid-column: span 2; }
.nvpr-feld-gold   { grid-column: span 3; }
.nvpr-feld-platin { grid-column: span 3; }
.nvpr-plan {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  padding: 22px 22px 18px; border-radius: 20px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  background: linear-gradient(180deg, rgba(19, 12, 42, 0.85), rgba(9, 5, 24, 0.95));
  transition: transform .2s ease, box-shadow .2s ease;
}
.nvpr-plan:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(124, 92, 255, 0.18); }
.nvpr-plan > * { position: relative; z-index: 1; }
/* Kreisend leuchtender Goldrahmen: unter der Karte rotiert ein
   Lichtkegel, sichtbar bleibt nur der schmale Rand. */
.nvpr-goldrand {
  position: relative; overflow: hidden; border-radius: 21px; padding: 2px;
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.16), 0 18px 44px rgba(0, 0, 0, 0.5);
  height: 100%;
}
.nvpr-goldrand::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 260%; aspect-ratio: 1; margin: -130% 0 0 -130%;
  background: conic-gradient(
    rgba(250, 204, 21, 0.18) 0deg, rgba(250, 204, 21, 0.18) 288deg,
    #facc15 322deg, #fff3b0 338deg, #facc15 352deg, rgba(250, 204, 21, 0.18) 360deg);
  animation: nvprKreisen 3.6s linear infinite;
}
@keyframes nvprKreisen { to { transform: rotate(360deg); } }
.nvpr-goldrand .nvpr-plan { border: none; border-radius: 19px; height: 100%; }
.nvpr-plan.ist-gold { background: linear-gradient(180deg, rgba(26, 17, 8, 0.6), rgba(9, 5, 24, 0.97)), linear-gradient(180deg, rgba(19, 12, 42, 0.95), rgba(9, 5, 24, 0.97)); }
.nvpr-badge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 2; overflow: hidden;
  padding: 5px 22px 6px; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #fde68a, #d9a514);
  color: #241a02; font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(250, 204, 21, 0.4);
}
.nvpr-badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: nvprSchein 3.2s ease-in-out infinite;
}
@keyframes nvprSchein { 0% { left: -40px; } 55%, 100% { left: 110%; } }
.nvpr-blitz {
  position: absolute; top: 12%; width: 44px; height: auto; z-index: 0;
  mix-blend-mode: screen; opacity: .8;
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 38%, transparent 74%);
  mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 38%, transparent 74%);
  animation: nvprBlitzPuls 4.4s ease-in-out infinite;
}
.nvpr-blitz.links { left: 4px; }
.nvpr-blitz.rechts { right: 4px; transform: scaleX(-1); top: 34%; animation-delay: 2.2s; }
@keyframes nvprBlitzPuls {
  0%, 100% { opacity: .35; filter: brightness(.9); }
  6% { opacity: 1; filter: brightness(1.5); }
  10% { opacity: .5; }
  14% { opacity: .95; filter: brightness(1.3); }
  22%, 90% { opacity: .35; filter: brightness(.9); }
}
.nvpr-coins {
  position: absolute; left: 0; bottom: 0; width: 46%; max-width: 220px;
  z-index: 0; opacity: .9;
  -webkit-mask-image: linear-gradient(70deg, #000 55%, transparent 92%);
  mask-image: linear-gradient(70deg, #000 55%, transparent 92%);
}
.nvpr-stadt {
  position: absolute; right: 0; top: 0; height: 100%; z-index: 0; opacity: .85;
  -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(270deg, #000 55%, transparent 96%);
}
.nvpr-plan-kopf { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.nvpr-plan-icon { width: 58px; height: auto; flex: 0 0 auto; animation: nvprSchweben 5.5s ease-in-out infinite; }
@keyframes nvprSchweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.nvpr-plan-name { font-size: 1.5rem; font-weight: 800; color: #fff; }
.nvpr-plan-zeile { font-size: .8rem; color: #b9b6d4; margin-top: 2px; }
.nvpr-preis { display: flex; flex-direction: column; align-items: center; margin: 14px 0 12px; }
.nvpr-preis b {
  font-size: 2.1rem; font-weight: 900; color: #fff; letter-spacing: -.01em;
  text-shadow: 0 0 26px rgba(124, 92, 255, 0.4);
}
.nvpr-plan.ist-gold .nvpr-preis b { text-shadow: 0 0 26px rgba(250, 204, 21, 0.35); }
.nvpr-preis span { font-size: .78rem; color: #b9b6d4; margin-top: 2px; }
.nvpr-punkte { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nvpr-punkte li { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; color: #e6e2f2; line-height: 1.45; }
.nvpr-punkte svg {
  width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px;
  stroke: #a78bfa; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.nvpr-plan.ist-gold .nvpr-punkte svg { stroke: #facc15; }
.nvpr-cta {
  width: 100%; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  color: #d8b4fe; background: rgba(124, 92, 255, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.55);
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.nvpr-cta:hover { background: rgba(124, 92, 255, 0.2); color: #fff; box-shadow: 0 0 22px rgba(124, 92, 255, 0.35); }
.nvpr-cta.ist-gold {
  color: #fde68a; border-color: rgba(250, 204, 21, 0.65);
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.14), rgba(250, 204, 21, 0.05));
  animation: nvprGoldPuls 2.8s ease-in-out infinite;
}
.nvpr-cta.ist-gold:hover { color: #fff7cc; background: linear-gradient(180deg, rgba(250, 204, 21, 0.26), rgba(250, 204, 21, 0.1)); }
@keyframes nvprGoldPuls {
  0%, 100% { box-shadow: 0 0 12px rgba(250, 204, 21, 0.25); }
  50% { box-shadow: 0 0 26px rgba(250, 204, 21, 0.55); }
}
.nvpr-plan-fuss { margin: 10px 0 0; text-align: center; font-size: .76rem; color: #b9b6d4; }
.nvpr-seite { display: flex; flex-direction: column; gap: 18px; }
.nvpr-warum {
  border: 1px solid rgba(139, 92, 246, 0.28); border-radius: 18px;
  background: rgba(14, 9, 32, 0.72); padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.nvpr-seitentitel {
  margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #cfc9e8;
}
.nvpr-warum-punkt { display: flex; align-items: flex-start; gap: 12px; }
.nvpr-warum-punkt img { width: 32px; height: auto; flex: 0 0 auto; }
.nvpr-warum-punkt span { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: #b9b6d4; line-height: 1.45; }
.nvpr-warum-punkt b { color: #d8b4fe; font-size: .85rem; }
.nvpr-garantie-rand { height: auto; border-radius: 17px; }
.nvpr-garantie {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  border-radius: 15px; padding: 16px; height: 100%; box-sizing: border-box;
  background: linear-gradient(180deg, #1a1108, #0c071a);
}
.nvpr-garantie img { width: 36px; height: auto; flex: 0 0 auto; }
.nvpr-garantie span { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: #b9b6d4; line-height: 1.45; }
.nvpr-garantie b { color: #fde68a; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.nvpr-fuss {
  display: flex; justify-content: center; gap: 46px; flex-wrap: wrap;
  margin-top: 30px; padding: 16px 24px; border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.22); background: rgba(14, 9, 32, 0.6);
}
.nvpr-fuss > span { display: flex; align-items: center; gap: 12px; }
.nvpr-fuss img { width: 26px; height: auto; }
.nvpr-fuss span span { display: flex; flex-direction: column; font-size: .74rem; color: #b9b6d4; }
.nvpr-fuss b { color: #d8b4fe; font-size: .82rem; }
@media (max-width: 1280px) {
  .nvpr-lage { grid-template-columns: 1fr; }
  .nvpr-seite { flex-direction: row; }
  .nvpr-seite > * { flex: 1; }
}
@media (max-width: 980px) {
  .nvpr .novi-pricing-grid { grid-template-columns: 1fr 1fr; }
  .nvpr-feld-free, .nvpr-feld-bronze, .nvpr-feld-silber,
  .nvpr-feld-gold, .nvpr-feld-platin { grid-column: span 2; }
  .nvpr-seite { flex-direction: column; }
  .nvpr-seite > * { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nvpr::before, .nvpr::after, .nvpr-goldrand::before, .nvpr-badge::after,
  .nvpr-blitz, .nvpr-plan-icon, .nvpr-cta.ist-gold { animation: none; }
}


/* == Gemeinsamer Seiten-Hintergrund (31.07.) ==========================
   Das Plexus-Netz des Landings (novi-gate-bg.webp) traegt jetzt ALLE
   Novi-Seiten: Studio, Preise, Admin Terminal samt Unterseiten, Login.
   Ueber dem Bild liegt je Seite ein dunkler Schleier, damit die Inhalte
   unveraendert lesbar bleiben. */

/* Studio: das Netz als unterste Ebene. Das Pseudo-Element wird hier
   VOLLSTAENDIG deklariert (content/position/inset/z-index) — die alte
   4K-Ebene hatte ihre Basis-Deklaration beim Umbau verloren, das
   Studio zeigte darum gar keinen Bildhintergrund mehr. #view-novi-studio
   ist position:fixed mit z-index und damit ein Stacking-Context: z -1
   liegt ueber der eigenen Flaechenfarbe und unter allem Inhalt. */
#view-novi-studio::before {
  content: "" !important; position: absolute !important; inset: 0 !important;
  z-index: -1 !important; pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 9, 0.12) 0%, rgba(0, 0, 9, 0.30) 60%, rgba(0, 0, 9, 0.48) 100%),
    url("/hub-assets/novi-gate-bg.webp") right center / cover no-repeat #000009 !important;
}

/* Dunkle Verwaltungsseiten: Admin Terminal, Networth, Backups,
   Nutzerverwaltung usw. (alle .novi-dark-page). */
.novi-dark-page {
  background:
    linear-gradient(180deg, rgba(0, 0, 9, 0.42) 0%, rgba(0, 0, 9, 0.72) 100%),
    url("/hub-assets/novi-gate-bg.webp") center / cover no-repeat #000009 !important;
  background-attachment: fixed;
}

/* Solange eine dunkle Novi-Seite offen ist (Schalter in showView),
   trägt auch die Workspace-Hauptfläche dahinter den Plexus — vorher
   schien dort die alte helle Workspace-Fläche durch (im Light-Theme
   weiße Ränder um das Admin Terminal). background-attachment: fixed
   auf BEIDEN Ebenen: gleicher Bildausschnitt, keine sichtbare Naht.
   !important gegen die Theme-Schicht. */
body.novi-dunkel-offen .app-layout main {
  background:
    linear-gradient(180deg, rgba(0, 0, 9, 0.42) 0%, rgba(0, 0, 9, 0.72) 100%),
    url("/hub-assets/novi-gate-bg.webp") center / cover no-repeat #000009 !important;
  background-attachment: fixed;
}

/* "NUR diese Seite" (01.08., zweite Ausbaustufe): das alte
   Workspace-Gerüst verschwindet dabei KOMPLETT — rote Kopfleiste,
   Sidebar, 880px-Zentrierung und Innenabstände. Die dunkle Seite füllt
   den ganzen Bildschirm; zurück geht es über ihren eigenen
   Zurück-Knopf (die Zurück-Knöpfe der
   Unterseiten), die Navigation der hellen Seiten bleibt unberührt. */
body.novi-dunkel-offen { background: #000009 !important; }
body.novi-dunkel-offen .topbar,
body.novi-dunkel-offen .sidebar { display: none !important; }
body.novi-dunkel-offen .app-layout { min-height: 100vh; }
body.novi-dunkel-offen .app-layout main {
  max-width: none;
  margin: 0;
  padding: 0 !important;
}
/* Die 880px-Zentrierung und der Innenabstand von main fallen weg —
   den Atemraum bekommt die Seite selbst, ihr Inhalt bleibt lesbar
   mittig begrenzt. */
body.novi-dunkel-offen .novi-dark-page {
  min-height: 100vh; margin: 0;
  padding: 28px clamp(16px, 4vw, 48px) 64px;
}
body.novi-dunkel-offen .novi-dark-page > * {
  max-width: 1040px; margin-left: auto; margin-right: auto;
}

/* Preisseite: statt des generischen Sternhimmels das Original-Netz;
   die Funkel-Ebene darueber bleibt. */
.nvpr {
  background:
    linear-gradient(180deg, rgba(0, 0, 9, 0.30) 0%, rgba(0, 0, 9, 0.6) 100%),
    url("/hub-assets/novi-gate-bg.webp") center / cover no-repeat #000009 !important;
}
.nvpr::before { background-image: none; animation: none; }

/* Login: das Netz unter dem bestehenden Schleier und Portal-Artwork. */
/* Heller Auftritt wie auf den uebrigen Seiten. Hier stand das dunkle
   Portal-Artwork mit !important und schlug damit jede spaetere Regel —
   deshalb an der Quelle geaendert statt weiter hinten ueberschrieben. */
#view-login.login-screen {
  background: rgba(244, 244, 247, 0.86) !important;
  background-image: none !important;
}

/* == Neon-Lichter (01.08.) ============================================
   Bewegte Lichtebene über dem Plexus-Hintergrund: drei driftende
   Neon-Schleier (Violett/Cyan/Gold) plus zwei wandernde Lichtstrahlen.
   Jede Ebene fährt ZWEI Animationen mit teilerfremden Laufzeiten
   (Driftpfad + Atmen) — die Überlagerung wiederholt sich dadurch
   praktisch nie identisch, die Bewegung bleibt weich (ease-in-out,
   alternate). Nur transform/opacity, pointer-events:none, unter dem
   Inhalt: in .novi-entry-view liegt der Inhalt per > *-Regel auf z 1,
   im Studio arbeitet die Ebene wie die Hintergrund-Pseudoebenen auf
   z -1. Die Ebene wird beim Start per JS eingehängt
   (noviBauNeonLichter). */
.novi-neon-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.novi-entry-view > .novi-neon-fx { z-index: 0; }
#view-novi-studio > .novi-neon-fx { z-index: -1; }
.nfx-glow {
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen; filter: blur(34px);
  will-change: transform, opacity;
}
.nfx-glow.g1 {
  width: 58vmax; height: 58vmax; left: -18vmax; top: -16vmax;
  background: radial-gradient(circle closest-side, rgba(168, 85, 247, 0.34), rgba(168, 85, 247, 0.10) 46%, transparent 72%);
  animation: nfxDrift1 47s ease-in-out infinite alternate, nfxAtmen 13s ease-in-out infinite alternate;
}
.nfx-glow.g2 {
  width: 48vmax; height: 48vmax; right: -16vmax; top: 8vmax;
  background: radial-gradient(circle closest-side, rgba(56, 189, 248, 0.26), rgba(56, 189, 248, 0.08) 48%, transparent 72%);
  animation: nfxDrift2 61s ease-in-out infinite alternate, nfxAtmen 17s ease-in-out infinite alternate-reverse;
}
.nfx-glow.g3 {
  width: 44vmax; height: 44vmax; left: 24vmax; bottom: -20vmax;
  background: radial-gradient(circle closest-side, rgba(232, 185, 74, 0.20), rgba(232, 185, 74, 0.06) 48%, transparent 72%);
  animation: nfxDrift3 53s ease-in-out infinite alternate, nfxAtmen 11s ease-in-out infinite alternate;
}
.nfx-beam {
  position: absolute; top: -12%; height: 124%; width: 44px; left: 12%;
  background: linear-gradient(180deg, transparent, rgba(196, 181, 253, 0.14) 30%, rgba(168, 85, 247, 0.20) 50%, rgba(196, 181, 253, 0.12) 70%, transparent);
  transform: rotate(16deg); filter: blur(6px); mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: nfxStrahl1 33s ease-in-out infinite alternate;
}
.nfx-beam.b2 {
  left: auto; right: 16%; width: 30px;
  background: linear-gradient(180deg, transparent, rgba(125, 211, 252, 0.12) 32%, rgba(56, 189, 248, 0.18) 50%, rgba(125, 211, 252, 0.10) 68%, transparent);
  animation: nfxStrahl2 41s ease-in-out infinite alternate;
}
@keyframes nfxDrift1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(9vw, 6vh, 0) scale(1.12); }
  66% { transform: translate3d(20vw, -4vh, 0) scale(0.96); }
  100% { transform: translate3d(30vw, 10vh, 0) scale(1.08); }
}
@keyframes nfxDrift2 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(-12vw, 10vh, 0) scale(1.1); }
  70% { transform: translate3d(-22vw, 2vh, 0) scale(0.94); }
  100% { transform: translate3d(-8vw, 18vh, 0) scale(1.05); }
}
@keyframes nfxDrift3 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  30% { transform: translate3d(10vw, -8vh, 0) scale(1.06); }
  65% { transform: translate3d(-6vw, -16vh, 0) scale(1.14); }
  100% { transform: translate3d(4vw, -6vh, 0) scale(0.98); }
}
@keyframes nfxAtmen { 0% { opacity: 0.55; } 100% { opacity: 1; } }
@keyframes nfxStrahl1 {
  0% { transform: translateX(-6vw) rotate(16deg); opacity: 0.25; }
  50% { transform: translateX(18vw) rotate(19deg); opacity: 0.8; }
  100% { transform: translateX(44vw) rotate(15deg); opacity: 0.3; }
}
@keyframes nfxStrahl2 {
  0% { transform: translateX(5vw) rotate(-14deg); opacity: 0.2; }
  45% { transform: translateX(-14vw) rotate(-11deg); opacity: 0.75; }
  100% { transform: translateX(-36vw) rotate(-16deg); opacity: 0.25; }
}
/* Dunkle Verwaltungsseiten: dezente Lichtschleier direkt auf dem
   ::before — kein Overflow-Eingriff, nur wandernde background-position.
   position:relative/z-index:0 macht die Seite zum Stacking-Context,
   damit z -1 wie im Studio ÜBER der eigenen Flächenfarbe liegt. */
.novi-dark-page { position: relative; z-index: 0; }
.novi-dark-page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 18% 22%, rgba(168, 85, 247, 0.16), transparent 70%),
    radial-gradient(38% 30% at 84% 74%, rgba(56, 189, 248, 0.12), transparent 70%),
    radial-gradient(30% 26% at 62% 12%, rgba(232, 185, 74, 0.09), transparent 70%);
  background-size: 220% 220%, 240% 240%, 260% 260%;
  animation: nfxDunkel 49s ease-in-out infinite alternate;
}
@keyframes nfxDunkel {
  0% { background-position: 0% 0%, 100% 100%, 50% 0%; }
  50% { background-position: 70% 40%, 30% 60%, 20% 80%; }
  100% { background-position: 100% 100%, 0% 0%, 80% 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .novi-neon-fx *, .novi-dark-page::before { animation: none !important; }
}


/* == Video Projekte: Einstiegsseite nach Referenz (31.07.) ============ */
.nvvp-held {
  position: relative; overflow: hidden; min-height: 214px;
  display: flex; align-items: center; padding: 30px 38px;
  border-radius: 18px; border: 1px solid rgba(139, 92, 246, 0.25);
  background: linear-gradient(90deg, #150b30 0%, #0b0620 55%, #070417 100%);
}
.nvvp-held-bild {
  position: absolute; top: 0; right: 0; height: 100%; max-width: 74%;
  object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.nvvp-held-text { position: relative; z-index: 1; max-width: 52%; }
.nvvp-augenbraue {
  margin: 0 0 10px; font-size: .7rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: #a78bfa;
}
.nvvp-held-titel {
  margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; color: #fff; letter-spacing: -.01em;
}
.nvvp-held-titel em {
  font-style: normal;
  background: linear-gradient(100deg, #a78bfa 10%, #7c5cff 60%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nvvp-held-sub { margin: 0; color: #b9b6d4; }
.nvvp-weiter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%; margin-top: 18px; padding: 16px 18px;
  border: 1px solid rgba(167, 139, 250, 0.45); border-radius: 16px;
  background: linear-gradient(100deg, rgba(124, 92, 255, 0.16), rgba(124, 92, 255, 0.05));
  cursor: pointer; text-align: left;
}
.nvvp-weiter:hover { background: linear-gradient(100deg, rgba(124, 92, 255, 0.26), rgba(124, 92, 255, 0.10)); }
.nvvp-weiter-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nvvp-weiter-name {
  font-weight: 800; font-size: 1rem; color: var(--text-primary, #fff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nvvp-weiter-sub { font-size: .8rem; color: var(--text-faint, #b9b6d4); }
.nvvp-weiter-cta {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-weight: 700; font-size: .9rem; color: #a78bfa;
}
.nvvp-weiter-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.sa-bericht {
  margin-top: 12px; border: 1px solid var(--border-subtle, #e6e7eb);
  border-radius: 12px; overflow: hidden; font-size: 12.5px;
}
.sa-bericht-kopf { padding: 10px 14px; font-weight: 800; }
.sa-bericht-kopf.ist-ok { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.sa-bericht-kopf.ist-fehl { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.sa-bericht-zeile { padding: 6px 14px; border-top: 1px solid var(--border-subtle, #e6e7eb); }
.sa-bericht-zeile.ist-ok { color: var(--text-faint, #6b7280); }
.sa-bericht-zeile.ist-fehl { color: #b91c1c; font-weight: 700; }
.nvvp-karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin-top: 24px;
}
.nvvp-karte {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 10px;
  padding: 34px 22px 22px; border-radius: 18px; cursor: pointer;
  border: 1px solid rgba(139, 92, 246, 0.22); color: inherit;
  font-family: inherit;
  background: linear-gradient(180deg, rgba(19, 12, 42, 0.75), rgba(9, 5, 24, 0.92));
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nvvp-karte:hover {
  transform: translateY(-4px); border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5), 0 0 26px rgba(124, 92, 255, 0.2);
}
.nvvp-icon {
  width: 74px; height: 74px; border-radius: 18px; margin-bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.55); color: #d8b4fe;
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.26), rgba(124, 92, 255, 0.06));
  box-shadow: 0 0 26px rgba(139, 92, 246, 0.35);
}
.nvvp-icon svg {
  width: 30px; height: 30px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nvvp-titel { font-size: 1.25rem; font-weight: 800; color: #fff; }
.nvvp-text { color: #8f8aa8; font-size: .85rem; line-height: 1.5; }
.nvvp-punkt {
  display: inline-flex; align-items: center; gap: 8px;
  color: #cfc9e8; font-size: .82rem; font-weight: 600;
}
.nvvp-punkt i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #8b5cf6; box-shadow: 0 0 8px rgba(139, 92, 246, 0.9);
}
.nvvp-punkt.violett { color: #b9a5ff; }
.nvvp-cta {
  margin-top: 12px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: .9rem;
  border: 1px solid rgba(139, 92, 246, 0.5); color: #d8b4fe;
  background: rgba(124, 92, 255, 0.07);
  transition: background .2s ease, color .2s ease;
}
.nvvp-cta svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nvvp-karte:hover .nvvp-cta { background: rgba(124, 92, 255, 0.2); color: #fff; }
@media (max-width: 1100px) {
  .nvvp-karten { grid-template-columns: 1fr; }
  .nvvp-held { padding: 26px 22px; }
  .nvvp-held-text { max-width: 100%; }
  .nvvp-held-bild { opacity: .3; max-width: 100%; }
}



/* == Workflow-Kanalliste nach Referenz (31.07.) ======================= */
.nvwf-kopfzeile {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.nvwf-kopf-links { display: flex; align-items: baseline; gap: 12px; }
.nvwf-anzahl { font-size: .78rem; color: #8b93a7; }
.nvwf-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; font-size: .78rem;
  color: #b9b6d4; border: 1px solid rgba(139, 92, 246, 0.22);
  background: rgba(14, 9, 32, 0.7);
}
.nvwf-chip svg {
  width: 18px; height: 18px; stroke: #a78bfa; fill: none;
  stroke-width: 2; stroke-linecap: round;
}
.nvwf-werkzeuge {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 12px; justify-content: flex-end;
}
.nvwf-suche {
  display: flex; align-items: center; gap: 8px; flex: 1;
  min-width: 200px; max-width: 320px; margin-right: auto;
  padding: 9px 13px; border-radius: 11px;
  border: 1px solid rgba(139, 92, 246, 0.25); background: rgba(10, 8, 24, 0.7);
}
.nvwf-suche svg { width: 15px; height: 15px; stroke: #8b93a7; fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.nvwf-suche input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  color: #e6e2f2; font-family: inherit; font-size: .82rem;
}
.nvwf-suche input::placeholder { color: #6f6a8d; }
.nvwf-filter {
  padding: 9px 13px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(139, 92, 246, 0.25); background: rgba(10, 8, 24, 0.7);
  color: #e6e2f2; font-family: inherit; font-size: .82rem;
}
.nvwf-filter option { background: #0b0620; }
.nvwf-umschalter {
  display: flex; border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 11px; overflow: hidden;
}
.nvwf-umschalter button {
  padding: 9px 11px; cursor: pointer; border: none;
  background: rgba(10, 8, 24, 0.7); color: #8b93a7; line-height: 0;
}
.nvwf-umschalter button.aktiv { background: rgba(124, 92, 255, 0.25); color: #fff; }
.nvwf-umschalter svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.nvwf-liste { display: flex; flex-direction: column; gap: 10px; }
.nvwf-zeile {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 20px; border-radius: 13px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  background: linear-gradient(180deg, rgba(16, 11, 34, 0.8), rgba(9, 6, 22, 0.92));
  transition: border-color .18s ease, transform .18s ease;
}
.nvwf-zeile:hover { border-color: rgba(139, 92, 246, 0.5); transform: translateY(-1px); }
.nvwf-zeile::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3.5px; border-radius: 999px; background: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.8);
}
.nvwf-zeile.fertig { border-color: rgba(69, 212, 131, 0.35); }
.nvwf-zeile.fertig::before { background: #45d483; box-shadow: 0 0 8px rgba(69, 212, 131, 0.8); }
.nvwf-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  object-fit: cover; border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(124, 92, 255, 0.12);
}
.nvwf-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  color: #d8b4fe; font-weight: 800; font-size: 1.05rem;
}
.nvwf-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nvwf-mitte b { color: #fff; font-size: .98rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvwf-mitte span { color: #8b93a7; font-size: .78rem; }
.nvwf-zeile.fertig .nvwf-mitte span { color: #45d483; }
.nvwf-stand { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; min-width: 110px; }
.nvwf-stand > b { color: #cfc9e8; font-size: .82rem; font-weight: 700; }
.nvwf-balken {
  width: 100px; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(124, 92, 255, 0.14);
}
.nvwf-balken i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7c5cff, #a78bfa);
  box-shadow: 0 0 8px rgba(124, 92, 255, 0.8);
}
.nvwf-oeffnen { max-width: 130px; flex: none; }
.nvwf-mehr-wrap { position: relative; flex: none; }
.nvwf-mehr {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(139, 92, 246, 0.25); background: rgba(10, 8, 24, 0.7);
  color: #b9b6d4; font-size: 1rem; line-height: 1; letter-spacing: .1em;
}
.nvwf-mehr:hover { background: rgba(124, 92, 255, 0.18); color: #fff; }
.nvwf-menue {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 190px; padding: 6px; border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: linear-gradient(168deg, rgba(16, 10, 30, 0.98), rgba(4, 2, 12, 0.99));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.nvwf-menue button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border: none; border-radius: 8px;
  background: none; color: #e6e2f2; font-family: inherit; font-size: .82rem;
}
.nvwf-menue button:hover { background: rgba(124, 92, 255, 0.16); }
/* Rasteransicht: dieselben Zeilen als Kacheln. */
.nvwf-liste.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nvwf-liste.raster .nvwf-zeile { flex-direction: column; align-items: stretch; text-align: center; padding: 18px 16px; gap: 10px; }
.nvwf-liste.raster .nvwf-zeile::before { top: 0; bottom: auto; left: 14px; right: 14px; width: auto; height: 3.5px; }
.nvwf-liste.raster .nvwf-avatar { width: 52px; height: 52px; margin: 4px auto 0; }
.nvwf-liste.raster .nvwf-mitte { align-items: center; }
.nvwf-liste.raster .nvwf-mitte b { white-space: normal; }
.nvwf-liste.raster .nvwf-stand { align-items: center; }
.nvwf-liste.raster .nvwf-oeffnen { max-width: none; }
.nvwf-liste.raster .nvwf-mehr-wrap { position: absolute; top: 12px; right: 12px; }
@media (max-width: 900px) {
  .nvwf-liste.raster { grid-template-columns: 1fr; }
  .nvwf-stand { display: none; }
  .nvwf-werkzeuge { justify-content: stretch; }
  .nvwf-suche { max-width: none; }
}


/* == Website Networth nach Referenz (31.07.) ========================== */
.nw-hero-chips {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px;
}
.nw-hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 13px;
  border: 1px solid rgba(139, 92, 246, 0.28); background: rgba(12, 8, 28, 0.72);
}
.nw-hero-chip-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.45); color: #d8b4fe;
  background: rgba(124, 92, 255, 0.14);
}
.nw-hero-chip-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nw-hero-chip-text { display: flex; flex-direction: column; text-align: left; }
.nw-hero-chip-text b { color: #fff; font-size: .95rem; font-weight: 800; line-height: 1.15; }
.nw-hero-chip-text span { color: #8b93a7; font-size: .72rem; }
.nw-hero-actions .novi-hero-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-right: 8px; }
.nw-section-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.nw-section-kopf .nw-section-title { margin: 0; }
.nw-metrik-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 11px; font-size: .78rem;
  color: #b9b6d4; border: 1px solid rgba(139, 92, 246, 0.22);
  background: rgba(14, 9, 32, 0.7);
}
.nw-metrik-chip svg { width: 15px; height: 15px; stroke: #a78bfa; fill: none; stroke-width: 2; stroke-linecap: round; }
.nw-stat-sub { display: block; margin-top: 6px; font-size: .74rem; color: #8b93a7; }
.nw-stat-sub.plus { color: #45d483; }
.nw-stat-sub.minus { color: #f87171; }
.nw-panel {
  margin-top: 18px; padding: 20px 22px; border-radius: 18px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: linear-gradient(180deg, rgba(16, 11, 34, 0.82), rgba(9, 6, 22, 0.94));
}
.nw-panel-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.nw-panel-label {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #c4b5fd;
}
.nw-panel-delta { display: block; margin-top: 5px; font-size: .84rem; font-weight: 700; }
.nw-panel-delta.plus { color: #45d483; }
.nw-panel-delta.minus { color: #f87171; }
.nw-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 11px;
  border: 1px solid rgba(139, 92, 246, 0.22); background: rgba(10, 8, 24, 0.7);
}
.nw-tab {
  padding: 6px 12px; border-radius: 8px; cursor: pointer; border: none;
  background: none; color: #8b93a7; font-family: inherit;
  font-size: .76rem; font-weight: 600;
}
.nw-tab.aktiv { background: rgba(124, 92, 255, 0.28); color: #fff; }
.nw-tab:hover:not(.aktiv) { color: #d8b4fe; }
.nw-chart-svg { width: 100%; height: auto; display: block; }
.nw-chart-achse {
  display: flex; justify-content: space-between; margin-top: 6px;
  padding-left: 58px; font-size: .72rem; color: #8b93a7;
}
.nw-chart-legende { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.nw-chart-legende span { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: #8b93a7; }
.nw-chart-legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.nw-chart-legende i.gruen { background: #45d483; }
.nw-chart-legende i.rot { background: #f87171; }
.nw-up-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr auto;
  gap: 12px; align-items: baseline; padding: 10px 4px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
  font-size: .84rem; color: #cfc9e8;
}
.nw-up-row:last-of-type { border-bottom: none; }
.nw-up-row b { color: #fff; text-align: right; font-weight: 700; }
.nw-up-row .plus { color: #45d483; }
.nw-up-row .minus { color: #f87171; }
.nw-up-kopf {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: #8b93a7; border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}
.nw-up-kopf b { color: #8b93a7; font-weight: 700; }
.nw-iconbtn {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(139, 92, 246, 0.3); background: rgba(10, 8, 24, 0.7);
  color: #b9b6d4;
}
.nw-iconbtn:hover { background: rgba(124, 92, 255, 0.18); color: #fff; }
.nw-iconbtn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nw-up-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 11px 16px; border-radius: 11px;
  cursor: pointer; font-family: inherit; font-size: .84rem; font-weight: 700;
  border: 1px solid rgba(139, 92, 246, 0.4); color: #d8b4fe;
  background: rgba(124, 92, 255, 0.07);
}
.nw-up-toggle:hover { background: rgba(124, 92, 255, 0.18); color: #fff; }
.nw-up-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .nw-tabs { flex-wrap: wrap; }
  .nw-up-row { grid-template-columns: 1fr 1fr; }
  .nw-up-row b { text-align: left; }
  .nw-chart-achse { padding-left: 0; }
}


/* == Umsatzrechner: Einstieg nach Referenz (31.07.) =================== */
.nvur-held {
  position: relative; overflow: hidden; min-height: 200px;
  display: flex; align-items: center; padding: 30px 38px;
  border-radius: 18px; border: 1px solid rgba(139, 92, 246, 0.25);
  background: linear-gradient(90deg, #150b30 0%, #0b0620 55%, #070417 100%);
}
.nvur-held-bild {
  position: absolute; top: 0; right: 0; height: 100%; max-width: 72%;
  object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24%);
}
.nvur-held-text { position: relative; z-index: 1; max-width: 55%; }
.nvur-augenbraue {
  margin: 0 0 10px; font-size: .7rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: #a78bfa;
}
.nvur-held-titel {
  margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; color: #fff; letter-spacing: -.01em;
}
.nvur-held-titel em {
  font-style: normal;
  background: linear-gradient(100deg, #a78bfa 10%, #7c5cff 60%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nvur-held-sub { margin: 0; color: #b9b6d4; }
.nvur-abschnitt { margin: 24px 0 14px; display: flex; flex-direction: column; gap: 3px; }
.nvur-abschnitt b { color: #fff; font-size: 1.05rem; font-weight: 800; }
.nvur-abschnitt span { color: #8f8aa8; font-size: .84rem; }
.nvur-formate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nvur-format {
  position: relative; display: flex; align-items: center; gap: 20px;
  padding: 30px 26px; border-radius: 18px; cursor: pointer; text-align: left;
  border: 1px solid rgba(139, 92, 246, 0.22); color: inherit; font-family: inherit;
  background: linear-gradient(180deg, rgba(19, 12, 42, 0.72), rgba(9, 5, 24, 0.92));
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nvur-format:hover {
  transform: translateY(-3px); border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 24px rgba(124, 92, 255, 0.2);
}
.nvur-format.empfohlen {
  border: 1.5px solid rgba(168, 85, 247, 0.75);
  background: linear-gradient(180deg, rgba(38, 22, 74, 0.6), rgba(14, 8, 34, 0.94));
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.25);
}
.nvur-badge {
  position: absolute; top: -11px; left: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: .7rem; font-weight: 700;
  color: #e9ddff; background: #1b1038; border: 1px solid rgba(168, 85, 247, 0.6);
}
.nvur-badge svg { width: 11px; height: 11px; stroke: #d8b4fe; fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.nvur-haken {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #8b5cf6; color: #fff; box-shadow: 0 0 14px rgba(139, 92, 246, 0.7);
}
.nvur-haken svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nvur-icon {
  width: 72px; height: 72px; border-radius: 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.55); color: #d8b4fe;
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.26), rgba(124, 92, 255, 0.06));
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.35);
}
.nvur-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nvur-format-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nvur-format-text b { color: #fff; font-size: 1.2rem; font-weight: 800; }
.nvur-format-text span { color: #b9b6d4; font-size: .86rem; }
.nvur-format-text i { color: #8f8aa8; font-size: .78rem; font-style: normal; }
.nvur-hinweis {
  display: flex; align-items: center; gap: 14px; margin-top: 18px;
  padding: 13px 18px; border-radius: 14px; font-size: .85rem; color: #cfc9e8;
  border: 1px solid rgba(139, 92, 246, 0.24); background: rgba(14, 9, 32, 0.66);
}
.nvur-hinweis b { color: #c4b5fd; font-weight: 700; }
.nvur-hinweis-icon {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.5); color: #d8b4fe;
  background: rgba(124, 92, 255, 0.14);
}
.nvur-hinweis-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nvur-warum {
  position: relative; overflow: hidden; margin-top: 18px;
  padding: 24px 26px; border-radius: 18px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: linear-gradient(180deg, rgba(16, 11, 34, 0.82), rgba(9, 6, 22, 0.94));
}
.nvur-warum-bild {
  position: absolute; right: 0; bottom: 0; height: 92%; z-index: 0; opacity: .9;
  -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(270deg, #000 55%, transparent 96%);
}
.nvur-warum-kopf { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.nvur-warum-kopf b { color: #fff; font-size: 1.05rem; font-weight: 800; }
.nvur-warum-kopf span { color: #8f8aa8; font-size: .82rem; }
.nvur-vorteile {
  position: relative; z-index: 1; margin-top: 18px; padding-right: 150px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.nvur-vorteil { display: flex; align-items: flex-start; gap: 12px; }
.nvur-vorteil-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.5); color: #d8b4fe;
  background: rgba(124, 92, 255, 0.14);
}
.nvur-vorteil-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nvur-vorteil-text { display: flex; flex-direction: column; gap: 3px; }
.nvur-vorteil-text b { color: #d8b4fe; font-size: .86rem; font-weight: 700; }
.nvur-vorteil-text span { color: #8f8aa8; font-size: .76rem; line-height: 1.5; }
@media (max-width: 1200px) {
  .nvur-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 0; }
  .nvur-warum-bild { opacity: .25; }
}
@media (max-width: 900px) {
  .nvur-formate { grid-template-columns: 1fr; }
  .nvur-held-text { max-width: 100%; }
  .nvur-held-bild { opacity: .3; max-width: 100%; }
  .nvur-vorteile { grid-template-columns: 1fr; }
}


/* == Umsatzrechner: Kanalwahl + Rechner nach Referenz (31.07.) ======== */
.nvur-held-kanal { min-height: 178px; }
.nvur-wahl {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px; margin-top: 22px; align-items: start;
}
.nvur-alle {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 26px 20px; border-radius: 18px; cursor: pointer; text-align: left;
  border: 1px solid rgba(139, 92, 246, 0.22); color: inherit; font-family: inherit;
  background: linear-gradient(180deg, rgba(19, 12, 42, 0.72), rgba(9, 5, 24, 0.92));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nvur-alle.aktiv {
  border: 1.5px solid rgba(168, 85, 247, 0.75);
  background: linear-gradient(180deg, rgba(38, 22, 74, 0.6), rgba(14, 8, 34, 0.94));
  box-shadow: 0 0 26px rgba(139, 92, 246, 0.25);
}
.nvur-alle-icon {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.55); color: #d8b4fe;
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.26), rgba(124, 92, 255, 0.06));
}
.nvur-alle-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nvur-kanalraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.nvur-kanal {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(139, 92, 246, 0.2); color: inherit; font-family: inherit;
  background: linear-gradient(180deg, rgba(16, 11, 34, 0.75), rgba(9, 6, 22, 0.92));
  transition: transform .16s ease, border-color .16s ease;
}
.nvur-kanal:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, 0.5); }
.nvur-kanal.aktiv { border: 1.5px solid rgba(168, 85, 247, 0.8); box-shadow: 0 0 18px rgba(139, 92, 246, 0.3); }
.nvur-kanal img, .nvur-kanal-fallback {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(139, 92, 246, 0.35); background: rgba(124, 92, 255, 0.12);
}
.nvur-kanal-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  color: #d8b4fe; font-weight: 800; font-size: 1rem;
}
.nvur-kanal-fallback.klein { width: 26px; height: 26px; font-size: .72rem; }
.nvur-kanal b { color: #fff; font-size: .85rem; font-weight: 700; text-align: center; }
.nvur-rechner {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.55fr) minmax(0, 1fr);
  gap: 20px; margin-top: 22px; align-items: stretch;
}
.nvur-panel {
  border: 1px solid rgba(139, 92, 246, 0.22); border-radius: 18px;
  padding: 20px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(16, 11, 34, 0.82), rgba(9, 6, 22, 0.94));
}
.nvur-panel-label {
  display: flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #c4b5fd;
}
.nvur-panel-label svg { width: 16px; height: 16px; stroke: #a78bfa; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.nvur-panel-sub { margin: 8px 0 12px; font-size: .76rem; color: #8f8aa8; line-height: 1.5; }
.nvur-rpm-kopf, .nvur-rpm-zeile {
  display: grid; grid-template-columns: minmax(0, 1.5fr) 92px 92px 40px;
  gap: 10px; align-items: center;
}
.nvur-rpm-kopf {
  padding: 6px 4px; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: #8b93a7;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}
.nvur-rpm-zeile { padding: 7px 4px; border-bottom: 1px solid rgba(139, 92, 246, 0.09); }
.nvur-rpm-zeile:last-child { border-bottom: none; }
.nvur-rpm-kanal { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nvur-rpm-kanal img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.nvur-rpm-kanal i { font-style: normal; color: #e6e2f2; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvur-rpm-wert { color: #fff; font-size: .84rem; font-weight: 700; text-align: right; }
.nvur-rpm-wert input {
  width: 100%; padding: 5px 7px; border-radius: 8px; text-align: right;
  border: 1px solid rgba(168, 85, 247, 0.5); background: rgba(10, 8, 24, 0.85);
  color: #fff; font-family: inherit; font-size: .82rem;
}
.nvur-rpm-edit {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(139, 92, 246, 0.3); background: rgba(10, 8, 24, 0.7);
  color: #b9b6d4;
}
.nvur-rpm-edit:hover { background: rgba(124, 92, 255, 0.18); color: #fff; }
.nvur-rpm-edit svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nvur-viewswahl { align-items: stretch; gap: 12px; }
.nvur-schieber {
  width: 100%; margin-top: 14px; accent-color: #8b5cf6; cursor: pointer;
}
.nvur-views-zahl { color: #fff; font-size: 1.35rem; font-weight: 800; }
.nvur-views-sub { color: #8f8aa8; font-size: .78rem; }
.nvur-ring-wrap { position: relative; width: 168px; margin: 14px auto 6px; }
.nvur-ring { width: 100%; height: auto; display: block; }
.nvur-ring-spur { fill: none; stroke: rgba(124, 92, 255, 0.14); stroke-width: 12; }
.nvur-ring-fuellung {
  fill: none; stroke: #8b5cf6; stroke-width: 12; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.7));
  transition: stroke-dashoffset .35s ease;
}
.nvur-ring-mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; text-align: center;
}
.nvur-ring-mitte b { color: #fff; font-size: 1.3rem; font-weight: 800; }
.nvur-ring-mitte span { color: #8b93a7; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.nvur-formel { margin: 10px 0 8px; text-align: center; font-size: .76rem; color: #8f8aa8; line-height: 1.5; }
.nvur-ergebnis .ur-breakdown-list { display: flex; flex-direction: column; gap: 5px; }
.nvur-ergebnis .ur-breakdown-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline; font-size: .8rem;
}
.nvur-ergebnis .ur-breakdown-name { color: #b9b6d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvur-ergebnis .ur-breakdown-bar-track { display: none; }
.nvur-ergebnis .ur-breakdown-amount { color: #fff; font-weight: 700; }
@media (max-width: 1280px) {
  .nvur-rechner { grid-template-columns: 1fr 1fr; }
  .nvur-rpm { grid-column: span 2; }
}
@media (max-width: 900px) {
  .nvur-wahl { grid-template-columns: 1fr; }
  .nvur-rechner { grid-template-columns: 1fr; }
  .nvur-rpm { grid-column: auto; }
}


/* == Einstellungen-Hub nach Referenz (31.07.) ========================= */
.nvst-held {
  position: relative; overflow: hidden; min-height: 190px;
  display: flex; align-items: center; padding: 30px 38px;
  border-radius: 18px; border: 1px solid rgba(139, 92, 246, 0.25);
  background: linear-gradient(90deg, #150b30 0%, #0b0620 55%, #070417 100%);
  margin-bottom: 22px;
}
.nvst-zahnrad {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
  width: 150px; opacity: .95;
  filter: drop-shadow(0 0 26px rgba(139, 92, 246, 0.55));
  animation: nvstDrehen 24s linear infinite;
}
@keyframes nvstDrehen { to { transform: translateY(-50%) rotate(360deg); } }
.nvst-zahnrad svg { width: 100%; height: auto; display: block; }
.nvst-held-text { position: relative; z-index: 1; max-width: 60%; }
.nvst-augenbraue {
  margin: 0 0 10px; font-size: .7rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: #a78bfa;
}
.nvst-held-text h3 {
  margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; color: #fff; letter-spacing: -.01em;
}
.nvst-held-text h3 em {
  font-style: normal;
  background: linear-gradient(100deg, #a78bfa 10%, #7c5cff 60%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nvst-held-text p:last-child { margin: 0; color: #b9b6d4; }
.nvst-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.nvst-karten .novi-settings-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 30px 20px 22px; border-radius: 18px !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  background: linear-gradient(180deg, rgba(19, 12, 42, 0.72), rgba(9, 5, 24, 0.92)) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nvst-karten .novi-settings-tile:hover {
  transform: translateY(-4px); border-color: rgba(139, 92, 246, 0.55) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 24px rgba(124, 92, 255, 0.2);
}
.nvst-karten .novi-settings-tile-icon {
  width: 86px !important; height: 86px !important; border-radius: 22px !important;
  border: 1px solid rgba(168, 85, 247, 0.55) !important; color: #d8b4fe !important;
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.3), rgba(124, 92, 255, 0.06)) !important;
  box-shadow: 0 0 26px rgba(139, 92, 246, 0.35);
}
.nvst-karten .novi-settings-tile-icon svg { width: 36px !important; height: 36px !important; }
.nvst-karten .novi-settings-tile-title { font-size: 1.2rem !important; color: #fff !important; }
.nvst-karten .novi-settings-tile-sub { font-size: .8rem !important; color: #8f8aa8 !important; flex: 1; }
.nvst-pfeil {
  width: 46px; height: 34px; border-radius: 11px; margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(139, 92, 246, 0.45); color: #b9a5ff;
  background: rgba(124, 92, 255, 0.08);
  transition: background .18s ease, color .18s ease;
}
.nvst-pfeil svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nvst-karten .novi-settings-tile:hover .nvst-pfeil { background: rgba(124, 92, 255, 0.24); color: #fff; }
@media (max-width: 1200px) { .nvst-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .nvst-karten { grid-template-columns: 1fr; } .nvst-zahnrad { opacity: .25; } .nvst-held-text { max-width: 100%; } }

/* == Channel Profiles nach Referenz (31.07.) ========================== */
.nvcp-augenbraue {
  margin: 0 0 6px; display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: #a78bfa;
}
.nvcp-augenbraue svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.nvcp-titel { font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; font-weight: 800; color: #fff; }
.nvcp-titel em {
  font-style: normal;
  background: linear-gradient(100deg, #a78bfa 10%, #7c5cff 60%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.novi-profiles-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 18px !important;
}
.nvcp-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  object-fit: cover; border: 1px solid rgba(139, 92, 246, 0.4);
  background: rgba(124, 92, 255, 0.12); margin-right: 12px;
}
.nvcp-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  color: #d8b4fe; font-weight: 800; font-size: 1.15rem;
}
.nvcp-aktivzeile {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: #45d483; font-weight: 700; margin-top: 2px;
}
.nvcp-aktivzeile i {
  width: 7px; height: 7px; border-radius: 50%; background: #45d483;
  box-shadow: 0 0 8px rgba(69, 212, 131, 0.9);
}

/* == Benachrichtigungs-Popups nach Referenz (31.07.) ================== */
#nvp-stapel {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: flex; flex-direction: column; gap: 12px;
  width: min(430px, calc(100vw - 32px)); pointer-events: none;
}
.nvp-karte {
  --nvp: #38bdf8;
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px; align-items: flex-start; padding: 14px 14px 18px;
  border-radius: 15px; border: 1px solid var(--nvp);
  background: linear-gradient(180deg, rgba(14, 10, 28, 0.97), rgba(7, 5, 18, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  animation: nvpRein .3s ease;
}
@keyframes nvpRein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nvp-karte.violett { --nvp: #8b5cf6; }
.nvp-karte.gruen   { --nvp: #34d399; }
.nvp-karte.gelb    { --nvp: #eab308; }
.nvp-karte.blau    { --nvp: #38bdf8; }
.nvp-karte.rot     { --nvp: #ef4444; }
.nvp-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  object-fit: cover; background: rgba(124, 92, 255, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.35);
}
.nvp-avatar-glocke { display: inline-flex; align-items: center; justify-content: center; color: #b9a5ff; }
.nvp-avatar-glocke svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.nvp-mitte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nvp-mitte b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: .9rem; font-weight: 700; }
.nvp-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--nvp); box-shadow: 0 0 8px var(--nvp); }
.nvp-mitte > span { color: #b9b6d4; font-size: .8rem; line-height: 1.45; }
.nvp-zeit { color: #8b93a7; font-size: .72rem; white-space: nowrap; margin-top: 2px; }
.nvp-zu {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: #8b93a7;
}
.nvp-zu:hover { color: #fff; }
.nvp-zu svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.nvp-balken {
  position: absolute; left: 14px; bottom: 8px; height: 3px; border-radius: 999px;
  background: var(--nvp); box-shadow: 0 0 8px var(--nvp);
  animation: nvpAblauf 8s linear forwards;
}
@keyframes nvpAblauf { from { width: 25%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .nvp-karte, .nvp-balken { animation: none; } }

/* == Backups nach Referenz (31.07.) =================================== */
.nvbk-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.nvbk-suche {
  display: flex; align-items: center; gap: 8px; flex: none;
  width: min(280px, 100%); padding: 9px 13px; border-radius: 11px;
  border: 1px solid rgba(139, 92, 246, 0.25); background: rgba(10, 8, 24, 0.7);
}
.nvbk-suche svg { width: 15px; height: 15px; stroke: #8b93a7; fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.nvbk-suche input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  color: #e6e2f2; font-family: inherit; font-size: .82rem;
}
.nvbk-suche input::placeholder { color: #6f6a8d; }
.nvbk-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 16px; align-items: center; padding: 12px 16px; margin-bottom: 10px;
  border-radius: 14px; border: 1px solid rgba(139, 92, 246, 0.2);
  background: linear-gradient(180deg, rgba(16, 11, 34, 0.8), rgba(9, 6, 22, 0.92));
}
.nvbk-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168, 85, 247, 0.5); color: #d8b4fe;
  background: rgba(124, 92, 255, 0.14);
}
.nvbk-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.nvbk-mitte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nvbk-datum { display: flex; align-items: center; gap: 10px; }
.nvbk-datum b { color: #fff; font-size: .92rem; font-weight: 700; }
.nvbk-badge {
  padding: 2px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700;
  color: #d8b4fe; background: rgba(124, 92, 255, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.4);
}
.nvbk-keys { color: #8f8aa8; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvbk-zeit { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: .72rem; color: #8b93a7; flex: none; }
.nvbk-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #45d483; box-shadow: 0 0 8px rgba(69, 212, 131, 0.9);
}
.nvbk-restore {
  flex: none; font-size: 12px !important; padding: 9px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(139, 92, 246, 0.5) !important;
  background: rgba(124, 92, 255, 0.08) !important; color: #d8b4fe !important;
}
.nvbk-restore:hover { background: rgba(124, 92, 255, 0.2) !important; color: #fff !important; }
.nvbk-seiten { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; }
.nvbk-seite {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(139, 92, 246, 0.25); background: rgba(10, 8, 24, 0.7);
  color: #b9b6d4; font-family: inherit; font-size: .82rem; font-weight: 700;
}
.nvbk-seite.aktiv { background: rgba(124, 92, 255, 0.3); color: #fff; border-color: rgba(168, 85, 247, 0.6); }
.nvbk-seite:hover:not(.aktiv) { color: #fff; }
.nvbk-punkte { color: #8b93a7; padding: 0 4px; }
@media (max-width: 860px) {
  .nvbk-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .nvbk-zeit, .nvbk-punkt { display: none; }
  .nvbk-restore { grid-column: 2; justify-self: start; }
}

/* Zeitpunkt des letzten KPI-Abrufs links neben dem Zeitraum-Waehler. */
.nvh-abruf {
  align-self: center; white-space: nowrap;
  font-size: .72rem; color: #8b93a7;
}
@media (max-width: 760px) { .nvh-abruf { display: none; } }

/* Naechstes Meilenstein-Ziel ueber der Kennzahl. Mit .nvh2-kpi davor,
   damit die Regel die Kachel-Grundregel (.nvh2-kpi > span) schlaegt. */
.nvh2-kpi > .nvh2-zielzeit {
  display: block; margin-bottom: 3px;
  font-size: 9px; letter-spacing: .02em; color: #a78bfa;
}
.nvh2-kpi > .nvh2-zielzeit.erreicht { color: #45d483; }

/* Prompt-Button je Profil-Feld (01.08.). */
.novi-feld-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.novi-feldprompt-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 9px; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 10px; font-weight: 700;
  color: #b9a5ff; border: 1px solid rgba(139, 92, 246, 0.4);
  background: rgba(124, 92, 255, 0.08);
  transition: background .16s ease, color .16s ease;
}
.novi-feldprompt-btn:hover { background: rgba(124, 92, 255, 0.22); color: #fff; }
.novi-feldprompt-btn svg {
  width: 11px; height: 11px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Sync-Ehrlichkeit (01.08.): roter Fehl-Blitz + dauerhaftes Lade-Banner. */
.sync-flash-indicator.fehler {
  background: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
}
#sync-lade-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 950; display: flex; align-items: center; gap: 14px;
  max-width: min(720px, calc(100vw - 28px)); padding: 12px 16px;
  border-radius: 13px; border: 1px solid rgba(239, 68, 68, 0.6);
  background: linear-gradient(180deg, rgba(46, 12, 18, 0.97), rgba(24, 6, 12, 0.98));
  color: #fecaca; font-size: .84rem; line-height: 1.45;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
#sync-lade-banner button {
  flex: none; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 700;
  border: 1px solid rgba(239, 68, 68, 0.6); color: #fff;
  background: rgba(239, 68, 68, 0.18);
}
#sync-lade-banner button:hover { background: rgba(239, 68, 68, 0.32); }
#sync-lade-banner #sync-lade-zu {
  border: none; background: none; color: #fca5a5; padding: 4px 6px;
}

/* Analytics 2.0 (01.08.): Kurven-Raster. */
.nvan-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nvan-chart { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nvan-chart > b { color: #fff; font-size: .88rem; font-weight: 700; }
.nvan-delta { font-size: .74rem; font-weight: 700; }
.nvan-delta.plus { color: #45d483; }
.nvan-delta.minus { color: #f87171; }
@media (max-width: 980px) { .nvan-raster { grid-template-columns: 1fr; } }

/* Qualitäts-Dashboard (01.08.). */
.nvq-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nvq-kachel { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.nvq-kachel > b { font-size: 1.35rem; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nvq-kachel > span { font-size: .74rem; color: #8b93a7; }
.nvq-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nvq-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nvq-zeile {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center;
}
.nvq-name { color: #e6e2f2; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvq-name i { display: block; font-style: normal; color: #8b93a7; font-size: .72rem; }
.nvq-balken { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(124, 92, 255, 0.14); }
.nvq-balken i { display: block; height: 100%; border-radius: 999px; }
.nvq-balken i.top { background: #45d483; }
.nvq-balken i.gut { background: #8b5cf6; }
.nvq-balken i.mittel { background: #eab308; }
.nvq-balken i.schwach { background: #ef4444; }
.nvq-zeile > b, .nvq-projekt > b { font-size: .88rem; font-weight: 800; text-align: right; }
.nvq-kachel > b.top, .nvq-zeile > b.top, .nvq-projekt > b.top { color: #45d483; }
.nvq-kachel > b.gut, .nvq-zeile > b.gut, .nvq-projekt > b.gut { color: #c4b5fd; }
.nvq-kachel > b.mittel, .nvq-zeile > b.mittel, .nvq-projekt > b.mittel { color: #fbbf24; }
.nvq-kachel > b.schwach, .nvq-zeile > b.schwach, .nvq-projekt > b.schwach { color: #f87171; }
.nvq-anzahl { font-size: .72rem; color: #8b93a7; white-space: nowrap; }
.nvq-projekt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 12px; font-family: inherit;
  border: 1px solid rgba(139, 92, 246, 0.18); color: inherit;
  background: rgba(10, 8, 24, 0.55);
  transition: border-color .16s ease, transform .16s ease;
}
.nvq-projekt:hover { border-color: rgba(139, 92, 246, 0.5); transform: translateY(-1px); }
.nvq-fehler { font-size: .72rem; color: #fbbf24; white-space: nowrap; }
.nvq-fehler.kritisch { color: #f87171; font-weight: 700; }
@media (max-width: 1100px) {
  .nvq-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nvq-spalten { grid-template-columns: 1fr; }
}