/* Chakra Petch — die Auszeichnungsschrift der Startseite. Selbst
   gehostet (je ~10 KB woff2), kein Abruf bei Google zur Laufzeit. */
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/hub-assets/fonts/chakra-petch-500.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/hub-assets/fonts/chakra-petch-600.woff2") format("woff2");
}


/* ══ Das Werk — der neue Video-Workflow (19.08., Etappe 1) ══════════
   Eigener, isolierter Baustein. Er nutzt die Token-Farben des Studios
   und die vorhandenen Grundbausteine (Seitenwechsler, Speicher, IDB),
   traegt aber keine Altlast: eine Schrittkarte je Master-Prompt, die
   Nummer IN der Titelzeile statt darueber, ein Kopf, der auf jeder
   Phase Titel, Thumbnails und Figur zeigt. */
#view-novi-studio .wk-kanalraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
#view-novi-studio .wk-kanal {
  text-align: left; padding: 12px 14px; border: 1px solid var(--nt-linie);
  border-radius: var(--nt-radius-mittel); background: var(--nt-flaeche);
  cursor: pointer; color: var(--nt-text); transition: border-color .15s ease;
}
#view-novi-studio .wk-kanal:hover { border-color: var(--nt-cyan); }
#view-novi-studio .wk-kanal.ist-gewaehlt { border-color: var(--nt-cyan); box-shadow: 0 0 0 1px var(--nt-cyan) inset; }
#view-novi-studio .wk-kanal b { display: block; color: var(--nt-text-stark); -webkit-text-fill-color: var(--nt-text-stark); font-size: 14px; }
#view-novi-studio .wk-kanal span { display: block; margin-top: 2px; font-size: var(--nt-schrift-s); color: var(--nt-text-gedaempft); -webkit-text-fill-color: var(--nt-text-gedaempft); }

#view-novi-studio .wk-schritt {
  position: relative; padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--nt-linie); border-radius: var(--nt-radius-gross);
  background: var(--nt-flaeche);
}
#view-novi-studio .wk-schritt-titel { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#view-novi-studio .wk-nr {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--nt-cyan); background: var(--nt-flaeche-hoch); border: 1px solid rgba(34,211,238,.45);
}
#view-novi-studio .wk-schritt.ist-fertig .wk-nr { color: var(--nt-gut); border-color: rgba(69,212,131,.5); }

/* Referenz-Leiste: die beiden Charakter-Sheets und die drei
   Thumbnails — auf jeder Phase dieselbe Wahrheit vor Augen. */
#view-novi-studio .wk-leiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 14px; }
#view-novi-studio .wk-leiste figure { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; }
#view-novi-studio .wk-leiste img { width: 78px; height: 58px; object-fit: cover; border-radius: 8px; border: 1px solid var(--nt-linie); background: var(--nt-flaeche-hoch); }
#view-novi-studio .wk-leiste figcaption { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--nt-text-gedaempft); -webkit-text-fill-color: var(--nt-text-gedaempft); }
#view-novi-studio .wk-leer-mini { width: 78px; height: 58px; border: 1px dashed var(--nt-linie); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 9px; text-align: center; padding: 2px; color: var(--nt-text-gedaempft); -webkit-text-fill-color: var(--nt-text-gedaempft); }

#view-novi-studio .wk-ordner-balken { height: 8px; border-radius: 5px; background: var(--nt-flaeche-hoch); overflow: hidden; margin-top: 8px; }
#view-novi-studio .wk-ordner-balken > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--nt-cyan), var(--nt-gut)); transition: width .4s ease; }

/* Projektkachel der Uebersicht: sechs Punkte zeigen den Stand aller
   Phasen auf einen Blick — gefuellt heisst freigegeben. */
#view-novi-studio .wk-projektkachel { position: relative; padding: 0; display: block; }
#view-novi-studio .wk-kachel-flaeche {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  text-align: left; padding: 12px 34px 12px 14px; border: 0; background: none;
  color: inherit; cursor: pointer; font: inherit;
}
/* 25.08.: .wk-kachel-weg (das Loesch-x) ist entfallen - geloescht wird
   jetzt ueber das Drei-Punkte-Menue der Karte. Regeln fuer ein Element,
   das es nicht mehr gibt, liest der Naechste als Hinweis auf etwas
   Vorhandenes. */
#view-novi-studio .wk-punktreihe { display: flex; gap: 5px; margin-top: 2px; }
#view-novi-studio .wk-punkt {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--nt-linie); color: var(--nt-text-gedaempft);
  -webkit-text-fill-color: var(--nt-text-gedaempft); background: var(--nt-flaeche-hoch);
}
#view-novi-studio .wk-punkt.ok { border-color: rgba(69,212,131,.55); color: var(--nt-gut); -webkit-text-fill-color: var(--nt-gut); }
#view-novi-studio .wk-punkt.jetzt { border-color: var(--nt-cyan); color: var(--nt-cyan); -webkit-text-fill-color: var(--nt-cyan); box-shadow: 0 0 0 1px var(--nt-cyan) inset; }
#view-novi-studio .wk-standzeile { font-size: var(--nt-schrift-s); color: var(--nt-text); -webkit-text-fill-color: var(--nt-text); }
#view-novi-studio .wk-schritt-titel b {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--nt-text-stark); -webkit-text-fill-color: var(--nt-text-stark);
}
#view-novi-studio .wk-schritt-titel .wk-wert {
  margin-left: auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--nt-schrift-s); color: var(--nt-gut); -webkit-text-fill-color: var(--nt-gut);
}
#view-novi-studio .wk-hinweis { margin: 0 0 10px; font-size: var(--nt-schrift-s); line-height: 1.5; color: var(--nt-text-gedaempft); -webkit-text-fill-color: var(--nt-text-gedaempft); }
#view-novi-studio .wk-promptzeile {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px;
  border: 1px dashed rgba(34,211,238,.35); border-radius: var(--nt-radius-mittel);
  background: rgba(34,211,238,.05);
}
#view-novi-studio .wk-promptzeile b { font-size: var(--nt-schrift-s); color: var(--nt-text-stark); -webkit-text-fill-color: var(--nt-text-stark); }
#view-novi-studio .wk-promptzeile span { font-size: var(--nt-schrift-micro); color: var(--nt-text-gedaempft); -webkit-text-fill-color: var(--nt-text-gedaempft); }
#view-novi-studio .wk-knopf, #view-novi-studio .wk-promptzeile button {
  min-height: 36px; padding: 6px 14px; border-radius: var(--nt-radius-mittel);
  border: 1px solid var(--nt-linie); background: var(--nt-flaeche-hoch);
  color: var(--nt-text); -webkit-text-fill-color: var(--nt-text);
  font-size: var(--nt-schrift-s); font-weight: 600; cursor: pointer;
}
#view-novi-studio .wk-knopf:hover, #view-novi-studio .wk-promptzeile button:hover { border-color: var(--nt-cyan); color: var(--nt-text-stark); -webkit-text-fill-color: var(--nt-text-stark); }
#view-novi-studio .wk-knopf.ist-primaer { background: var(--nt-cyan); border-color: var(--nt-cyan); color: #06121a; -webkit-text-fill-color: #06121a; }
#view-novi-studio .wk-knopf:disabled { opacity: .45; cursor: not-allowed; }
#view-novi-studio .wk-promptbox {
  display: none; white-space: pre-wrap; max-height: 300px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5;
  padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--nt-linie);
  border-radius: var(--nt-radius-mittel); background: var(--nt-flaeche-hoch); color: var(--nt-text);
}
#view-novi-studio .wk-promptbox.ist-auf { display: block; }
#view-novi-studio .wk-output {
  width: 100%; min-height: 110px; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--nt-linie); border-radius: var(--nt-radius-mittel);
  background: var(--nt-flaeche-hoch); color: var(--nt-text); font-size: 13px; line-height: 1.5;
}
#view-novi-studio .wk-thumbreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
#view-novi-studio .wk-thumb { border: 1px solid var(--nt-linie); border-radius: var(--nt-radius-mittel); padding: 10px; background: var(--nt-flaeche-hoch); }
#view-novi-studio .wk-thumb-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--nt-schrift-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--nt-text-gedaempft); -webkit-text-fill-color: var(--nt-text-gedaempft); }
#view-novi-studio .wk-thumb pre {
  margin: 0 0 8px; white-space: pre-wrap; max-height: 150px; overflow: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.45; color: var(--nt-text);
}
#view-novi-studio .wk-thumb img { width: 100%; border-radius: 6px; display: block; margin-bottom: 8px; aspect-ratio: 16/9; object-fit: cover; }
#view-novi-studio .wk-thumb .wk-leer { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; border: 1px dashed var(--nt-linie); border-radius: 6px; margin-bottom: 8px; font-size: var(--nt-schrift-s); color: var(--nt-text-leise); -webkit-text-fill-color: var(--nt-text-leise); }
#view-novi-studio .wk-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid var(--nt-linie); border-left: 4px solid var(--nt-cyan);
  border-radius: var(--nt-radius-gross); background: var(--nt-flaeche);
}
#view-novi-studio .wk-kopf .wk-kopf-haupt b { display: block; font-size: 16px; color: var(--nt-text-stark); -webkit-text-fill-color: var(--nt-text-stark); }
#view-novi-studio .wk-kopf .wk-kopf-haupt span { font-size: var(--nt-schrift-s); color: var(--nt-text-gedaempft); -webkit-text-fill-color: var(--nt-text-gedaempft); }
#view-novi-studio .wk-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--nt-linie); border-radius: 999px; background: var(--nt-flaeche-hoch);
  font-size: var(--nt-schrift-s); color: var(--nt-text); -webkit-text-fill-color: var(--nt-text);
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-novi-studio .wk-score { margin-left: auto; text-align: right; }
#view-novi-studio .wk-score b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--nt-text-stark); -webkit-text-fill-color: var(--nt-text-stark); }
#view-novi-studio .wk-score.ist-gut b { color: var(--nt-gut); -webkit-text-fill-color: var(--nt-gut); }
#view-novi-studio .wk-score.ist-schwach b { color: var(--nt-warnung); -webkit-text-fill-color: var(--nt-warnung); }
#view-novi-studio .wk-score span { font-size: var(--nt-schrift-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--nt-text-gedaempft); -webkit-text-fill-color: var(--nt-text-gedaempft); }
#view-novi-studio .wk-figur { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--nt-linie); }
#view-novi-studio .wk-fixes { border: 1px solid rgba(234,179,8,.4); background: rgba(234,179,8,.08); border-radius: var(--nt-radius-mittel); padding: 10px 12px; margin-top: 8px; font-size: var(--nt-schrift-s); line-height: 1.55; color: var(--nt-warnung); -webkit-text-fill-color: var(--nt-warnung); white-space: pre-wrap; }
#view-novi-studio .wk-frei { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#view-novi-studio .wk-frei-liste { flex-basis: 100%; margin: 0; padding-left: 18px; font-size: var(--nt-schrift-s); line-height: 1.7; color: var(--nt-text-gedaempft); }
#view-novi-studio .wk-frei-liste li.ok { color: var(--nt-gut); }
#view-novi-studio .wk-referenz { border: 1px solid var(--nt-linie); border-radius: var(--nt-radius-mittel); background: var(--nt-flaeche-hoch); padding: 10px 12px; margin-top: 10px; font-size: var(--nt-schrift-s); color: var(--nt-text); line-height: 1.55; }
#view-novi-studio .wk-eingabe { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--nt-linie); border-radius: var(--nt-radius-mittel); background: var(--nt-flaeche-hoch); color: var(--nt-text); font-size: 13px; }


/* ═══ Sparkassen-Look auf ALLEN Seiten + Kachel-Startseite (19.08.) ═══
   Zwei Dinge, die das Weltall-Design gesetzt hatte und die hier
   zurueckgenommen werden:
   1. `body.novi-dunkel-offen { background:#000009 !important }` samt
      Weltraum-Bild in `.app-layout main` — dadurch waren J.A.R.V.I.S.,
      Trading, Admin und Portfolio schwarz statt hell.
   2. Die Orb-Buehne der Startseite; sie ist jetzt ein Kachelraster.
   Dieser Block steht bewusst NACH novi-bg-styles und dem Skin, damit
   er deren !important-Regeln bei gleicher Spezifitaet schlaegt. */

/* ── 1 · Dunkle Seiten werden hell ── */
body.novi-dunkel-offen { background: var(--spk-grund, #F4F4F5) !important; }
body.novi-dunkel-offen .app-layout main {
  background: var(--spk-grund, #F4F4F5) !important;
  background-image: none !important;
}
.novi-dark-page, body.novi-dunkel-offen .novi-dark-page {
  background: var(--spk-grund, #F4F4F5) !important;
  color: var(--spk-text, #333333) !important;
}
.novi-dark-page h1, .novi-dark-page h2, .novi-dark-page h3,
.novi-dark-page .view-header h1 { color: var(--spk-tinte, #1A1A1A) !important; }

/* ── 2 · Kachelraster der Startseite ── */
.novi-bk-buehne { position: relative; margin: 18px 0 8px; }
.novi-bk-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
/* Quadratisch, mit abgerundeten Seiten (20.08., Wunsch). Damit ein
   Quadrat nicht halb leer wirkt, stapelt sich der Inhalt mittig:
   Symbol oben, Name darunter — die alte Zeilenform (Symbol links,
   Name rechts) braucht Breite und keine Hoehe. */
.novi-bk {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  aspect-ratio: 1 / 1; min-height: 0;
  padding: 18px 14px;
  font: inherit; text-align: center; cursor: pointer;
  background: var(--spk-flaeche, #FFFFFF);
  border: 1px solid var(--spk-linie, #DEDEDE);
  border-radius: 18px;
  color: var(--spk-tinte, #1A1A1A);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.novi-bk:hover {
  border-color: var(--spk-rot, #E2001A);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}
.novi-bk:focus-visible {
  outline: 2px solid var(--spk-rot, #E2001A);
  outline-offset: 2px;
}
/* Das Symbol darf im Quadrat groesser werden — es ist jetzt das,
   was die Kachel auf Distanz erkennbar macht. */
.novi-bk-ikon {
  flex: 0 0 auto; width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: rgba(var(--spk-rot-rgb, 226, 0, 26), .08);
  border: 1px solid rgba(var(--spk-rot-rgb, 226, 0, 26), .18);
}
.novi-bk-ikon svg {
  width: 30px; height: 30px;
  fill: none; stroke: var(--spk-rot, #E2001A);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.novi-bk-name {
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  line-height: 1.25;
  color: var(--spk-tinte, #1A1A1A);
}

/* ── Dieselbe Form fuer die uebrigen echten Kacheln der Seite ─────
   Gemeint sind Rasterzellen, die eine Sache anbieten: Video-Projekt-
   Karten, Kanalkacheln, Projektkacheln. Panels mit langem Fließtext
   (Held, Zitat, Kennzahlen) bleiben ausgenommen — ein Quadrat wuerde
   dort Text abschneiden statt Ordnung zu schaffen. */
#view-novi-studio .nvvp-karte,
#view-novi-studio .wk-kanal,
#view-novi-studio .wk-projektkachel {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 10px; overflow: hidden;
}
/* Die Kanalkachel hat eine Huelle mit Knopfreihe darunter — nur die
   Kachel selbst wird quadratisch, die Wege bleiben darunter stehen. */
#view-novi-studio .wk-kanal-huelle { display: flex; flex-direction: column; gap: 8px; }
#view-novi-studio .wk-kanal-huelle .wk-kanal { aspect-ratio: 1 / 1; }
/* In der Projektkachel liegt die Flaeche als eigener Knopf — sie
   traegt das Quadrat, damit das Loesch-x oben rechts frei bleibt. */
#view-novi-studio .wk-projektkachel { position: relative; padding: 14px; }
#view-novi-studio .wk-kachel-flaeche {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 100%; text-align: center;
}
/* ── Die drei Thumbnail-Varianten als Karten (21.08., Wunsch) ──────
   Mystery, Reward, Danger nebeneinander — jede mit ihrem Haken gross
   oben, damit man die drei Wetten auf einen Blick vergleichen kann,
   und mit eigenem Kopieren-Knopf fuer den Weg ins Bildwerkzeug. */
#view-novi-studio .wk-variantenreihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-top: 14px;
}
#view-novi-studio .wk-variante {
  display: flex; flex-direction: column;
  border: 1px solid var(--spk-linie, #DEDEDE);
  border-top: 3px solid var(--spk-rot, #E2001A);
  border-radius: 12px; overflow: hidden;
  background: var(--spk-flaeche, #FFFFFF);
}
#view-novi-studio .wk-variante-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--spk-linie, #DEDEDE);
  background: #FAFAFC;
}
#view-novi-studio .wk-variante-nr {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  background: var(--spk-rot, #E2001A); color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
#view-novi-studio .wk-variante-kopf b { font-size: 13px; letter-spacing: .02em; }
#view-novi-studio .wk-variante-ziel {
  flex: 1 1 100%; order: 3; font-size: 11px; line-height: 1.4;
  color: var(--spk-grau, #666666) !important; -webkit-text-fill-color: var(--spk-grau, #666666) !important;
}
#view-novi-studio .wk-variante-kopf .wk-knopf { margin-left: auto; font-size: 11px; padding: 4px 10px; }
/* Der Haken ist das, was der Zuschauer wirklich sieht — also gross. */
#view-novi-studio .wk-variante-haken {
  padding: 12px 12px 4px; font-size: 22px; font-weight: 800;
  letter-spacing: .02em; line-height: 1.15;
  color: var(--spk-tinte, #1A1A1A) !important; -webkit-text-fill-color: var(--spk-tinte, #1A1A1A) !important;
}
#view-novi-studio .wk-variante-miene {
  padding: 0 12px 8px; font-size: 11px;
  color: var(--spk-grau, #666666) !important; -webkit-text-fill-color: var(--spk-grau, #666666) !important;
}
/* Der Grundwert als kleines Schild: hell, mittel, dunkel — in genau
   den Werten, die sie beschreiben, damit man die Verteilung der drei
   Karten sieht, ohne sie zu lesen. */
#view-novi-studio .wk-grundwert {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  border: 1px solid #DEDEDE; vertical-align: baseline;
}
#view-novi-studio .wk-grundwert.ist-hell {
  background: #FFFFFF; color: #1A1A1A; -webkit-text-fill-color: #1A1A1A; border-color: #D2D2D5;
}
#view-novi-studio .wk-grundwert.ist-mittel {
  background: #EDEDF1; color: #1A1A1A; -webkit-text-fill-color: #1A1A1A; border-color: #D2D2D5;
}
#view-novi-studio .wk-grundwert.ist-dunkel {
  background: #2B2B33; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; border-color: #2B2B33;
}
#view-novi-studio .wk-variante-text {
  margin: 0; padding: 10px 12px 12px; max-height: 190px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  border-top: 1px solid var(--spk-linie, #DEDEDE);
  color: var(--spk-grau, #666666) !important; -webkit-text-fill-color: var(--spk-grau, #666666) !important;
}

/* ── Ziel-Anzeige als Dashboard (21.08., Wunsch) ──────────────
   Vorher sieben Textzeilen in derselben Lautstaerke. Ein Dashboard
   braucht eine Rangfolge: die erreichte Zahl gross, der Rueckstand als
   farbiges Zeichen, ein Balken, den man lesen kann, und die Prognose
   leise darunter. Die Reihenfolge im Markup bleibt unangetastet —
   umsortiert wird ueber order, damit die grosse Zahl UEBER dem Balken
   steht. */
:root[data-skin] #view-novi-studio .novi-ziel-block,
:root[data-skin] .novi-ziel-block,
.novi-ziel-block {
  display: flex !important; flex-direction: column; gap: 0 !important;
  padding: 18px 20px 16px !important;
  border-radius: 14px !important;
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  border-top-width: 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05), inset 0 1px 0 #FFFFFF;
}
/* 1 · Kopf: Name klein und ruhig, Prozent als Kennzahl rechts. */
:root[data-skin] .novi-ziel-zeile, .novi-ziel-zeile { order: 1; margin-bottom: 2px; }
:root[data-skin] .novi-ziel-name, .novi-ziel-name {
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: .12em !important; text-transform: uppercase;
  color: var(--spk-grau, #666666) !important; -webkit-text-fill-color: var(--spk-grau, #666666) !important;
}
:root[data-skin] .novi-ziel-pct, .novi-ziel-pct {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--spk-grau, #666666) !important; -webkit-text-fill-color: var(--spk-grau, #666666) !important;
}
/* 2 · Die erreichte Zahl ist die Hauptaussage — sie wandert nach oben
      und wird gross. "von 5 Mio" bleibt klein daneben stehen. */
:root[data-skin] .novi-ziel-zahlen, .novi-ziel-zahlen {
  order: 2; margin: 0 0 10px !important;
  display: flex; align-items: baseline; gap: 7px;
  font-size: 13px !important;
  color: var(--spk-grau, #666666) !important; -webkit-text-fill-color: var(--spk-grau, #666666) !important;
}
:root[data-skin] .novi-ziel-zahlen b, .novi-ziel-zahlen b {
  font-size: 34px !important; font-weight: 800 !important; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--spk-tinte, #1A1A1A) !important; -webkit-text-fill-color: var(--spk-tinte, #1A1A1A) !important;
}
/* 3 · Der Balken: dick genug zum Lesen, mit sichtbarer Soll-Marke.
      Die Mindestbreite macht winzige Staende sichtbar, ohne die Zahl
      daneben zu beschoenigen. */
:root[data-skin] .novi-ziel-balken, .novi-ziel-balken {
  order: 3; height: 14px !important; border-radius: 999px !important;
  background: #EDEDF1 !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
  margin: 0 0 10px !important; overflow: visible;
}
:root[data-skin] .novi-ziel-balken > i, .novi-ziel-balken > i {
  display: block; height: 100%; min-width: 6px; border-radius: 999px;
  background: var(--spk-rot, #E2001A) !important;
}
.novi-ziel-block.ist-vorn .novi-ziel-balken > i,
.novi-ziel-block.ist-fertig .novi-ziel-balken > i { background: #0A7D3C !important; }
/* Die Soll-Marke: ein klarer Strich mit Fahne statt eines Haarstrichs. */
:root[data-skin] .novi-ziel-balken > u, .novi-ziel-balken > u {
  position: absolute; top: -5px; bottom: -5px; width: 3px;
  border-radius: 2px; background: var(--spk-tinte, #1A1A1A) !important;
  transform: translateX(-1px);
}
.novi-ziel-balken > u::after {
  content: "Soll"; position: absolute; left: 50%; top: -15px;
  transform: translateX(-50%);
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--spk-tinte, #1A1A1A); -webkit-text-fill-color: var(--spk-tinte, #1A1A1A);
  white-space: nowrap;
}
/* 4 · Der Rueckstand als farbiges Zeichen, nicht als weitere Textzeile. */
:root[data-skin] .novi-ziel-rest, .novi-ziel-rest {
  order: 4; margin: 0 0 8px !important;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 12px !important;
  color: var(--spk-grau, #666666) !important; -webkit-text-fill-color: var(--spk-grau, #666666) !important;
}
:root[data-skin] .novi-ziel-rest i, .novi-ziel-rest i {
  display: inline-flex !important; align-items: center;
  font-style: normal; opacity: 1 !important;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(var(--spk-rot-rgb, 226, 0, 26), .10);
  border: 1px solid rgba(var(--spk-rot-rgb, 226, 0, 26), .28);
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
.novi-ziel-block.ist-vorn .novi-ziel-rest i,
.novi-ziel-block.ist-fertig .novi-ziel-rest i {
  background: rgba(10, 125, 60, .10); border-color: rgba(10, 125, 60, .30);
  color: #0A7D3C !important; -webkit-text-fill-color: #0A7D3C !important;
}
/* 5 · Die Rechnung dahinter bleibt lesbar, aber leise. */
:root[data-skin] .novi-ziel-fuss, .novi-ziel-fuss {
  order: 5; margin: 0 !important; font-size: 11px !important; opacity: .75;
}
/* 6 · Die Prognose als abgesetzte Fusszeile mit eigener Flaeche. */
:root[data-skin] #view-novi-studio .goal-forecast,
:root[data-skin] .goal-forecast, .goal-forecast {
  order: 6; margin: 12px -20px -16px !important;
  padding: 11px 20px 13px !important;
  border-top: 1px solid var(--spk-linie, #DEDEDE) !important;
  border-radius: 0 0 13px 13px;
  background: #FAFAFC !important;
  font-size: 11.5px !important; line-height: 1.5;
}
:root[data-skin] .goal-forecast b, .goal-forecast b {
  display: block; font-size: 12.5px !important; font-weight: 800 !important;
  color: var(--spk-tinte, #1A1A1A) !important; -webkit-text-fill-color: var(--spk-tinte, #1A1A1A) !important;
}
:root[data-skin] .goal-forecast span, .goal-forecast span {
  display: block; margin-top: 3px; opacity: .8;
  color: var(--spk-grau, #666666) !important; -webkit-text-fill-color: var(--spk-grau, #666666) !important;
}

/* ── Durchgezogen roter Kopfbalken, ganze Seite (20.08., Wunsch) ──
   Wie im Sparkassen-Kopf des Studios: eine massive rote Leiste oben,
   weisse Schrift, keine Trennlinie. Der Balken muss ueber die
   Polsterung hinauslaufen, damit er "durchgezogen" wirkt — gemessen
   sind das hier 20 px (main) plus 28 px (Seite), aber nicht jede Seite
   ist gleich gepolstert. Darum kein Rechnen mit festen Zahlen: ein
   sehr breiter Schlagschatten malt das Rot nach links und rechts
   weiter, clip-path schneidet oben und unten sauber ab. Ohne den
   Schnitt liefe das Rot ueber die ganze Seite. */
:root[data-skin] .view-header,
.view-header {
  background: var(--spk-rot, #E2001A) !important;
  box-shadow: 0 0 0 100vmax var(--spk-rot, #E2001A) !important;
  clip-path: inset(0 -100vmax);
  border-bottom: 0 !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF;
  padding: 14px 0 !important;
  margin: 0 0 26px !important;
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Auch die ID-Regeln der Altwelt ueberstimmen. */
#view-jarvis .view-header h1,
#view-jarvis .view-header .jvs-auth-konto,
#view-jarvis .view-header span,
#view-jarvis .view-header div {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
#view-jarvis .view-header .jvs-auth-ecke button,
#view-jarvis .view-header .jvs-auth-ecke a,
#view-jarvis .view-header .novi-hilfe-knopf,
#view-jarvis .view-header .back-btn {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  border-radius: 999px !important;
}
:root[data-skin] .view-header h1,
:root[data-skin] .view-header h2,
:root[data-skin] .view-header .jvs-auth-konto,
:root[data-skin] .view-header span,
:root[data-skin] .view-header div {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
}
/* Knoepfe im roten Balken: weisse Kontur auf Rot, nicht Rot auf Rot. */
:root[data-skin] .view-header button,
:root[data-skin] .view-header a.back-btn,
:root[data-skin] .view-header .novi-hilfe-knopf {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-radius: 999px !important;
}
:root[data-skin] .view-header button:hover,
:root[data-skin] .view-header .novi-hilfe-knopf:hover {
  background: #FFFFFF !important;
  color: var(--spk-rot, #E2001A) !important;
  -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] .view-header button svg,
:root[data-skin] .view-header .back-btn svg,
:root[data-skin] .view-header .novi-hilfe-knopf svg { stroke: currentColor !important; fill: none !important; }
/* Die Seite darf durch den Ueberstand keinen Querbalken bekommen. */
:root[data-skin] main, :root[data-skin] .app-layout { overflow-x: clip; }

/* ── Runde Ecken durchsetzen (20.08., im Browser gemessen) ───────
   Der Skin-Block setzt "border-radius: 4px !important" auf jeden Knopf
   im Studio, und zwei aeltere Regeln aus meiner eigenen Runde setzen
   sogar 0. Gegen !important hilft nur !important — plus hoehere
   Spezifitaet, damit auch die Huellen-Regel verliert. */
:root[data-skin] #view-novi-studio .novi-bk,
:root[data-skin] #view-novi-studio .nvvp-karte,
:root[data-skin] #view-novi-studio .wk-kanal,
:root[data-skin] #view-novi-studio .wk-kanal-huelle .wk-kanal,
:root[data-skin] #view-novi-studio .wk-projektkachel,
:root[data-skin] .novi-bk {
  border-radius: 18px !important;
}
:root[data-skin] #view-novi-studio .novi-bk-ikon { border-radius: 16px !important; }

/* ── Im Quadrat ist Hoehe knapp ─────────────────────────────
   Gemessen: die Video-Projekt-Karte lief um 11 px ueber. Lieber Text
   auf zwei Zeilen klammern als ihn hart abschneiden — abgeschnittene
   Woerter sehen nach Fehler aus, geklammerte nach Absicht. */
#view-novi-studio .nvvp-karte { padding: 16px 14px !important; gap: 8px !important; }
#view-novi-studio .nvvp-karte .nvvp-text,
#view-novi-studio .wk-kanal > span,
#view-novi-studio .wk-kachel-flaeche > span:not(.wk-punktreihe) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12px; line-height: 1.35;
}
#view-novi-studio .nvvp-karte .nvvp-titel,
#view-novi-studio .wk-kanal > b,
#view-novi-studio .wk-kachel-flaeche > b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 14px; line-height: 1.25;
}

#view-novi-studio .nvvp-karte > *,
#view-novi-studio .wk-kanal > *,
#view-novi-studio .wk-kachel-flaeche > * { max-width: 100%; }

/* ── 3 · Der Splitter war ein Kreis im Orb-Feld; als Kachel-Portal
        ist er eine schlichte Karte ueber dem Raster ── */
#jvs-splitter {
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: auto !important; height: auto !important;
  /* Im Browser gemessen (20.08.): bei einem voll besetzten Portal
     schnitt max-height 118px ab, und weil overflow sichtbar blieb,
     lag der Knopf "Bereich oeffnen" ausserhalb der Karte — nicht
     erreichbar. Eine Hoehenschranke ohne Rollweg ist keine
     Schranke, sondern ein Loch. */
  max-height: 70vh;
  overflow-y: auto !important; overscroll-behavior: contain;
  border-radius: 4px !important;
  padding: 18px 20px !important;
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14) !important;
  color: var(--spk-text, #333333) !important;
}

/* ── 4 · NUR WEISS UND ROT (19.08., Wunsch) ──────────────────────────
   Alle Fremdfarben der Altdesigns (Lavendel, Cyan, Violett, Limette,
   Orange, Blau) werden auf die Hausfarben gezwungen: weisse Flaechen,
   neutrale Schrift, Rot als einziger Akzent. `!important` ist noetig,
   weil ein Teil der Farben aus zur Laufzeit eingespritztem CSS und aus
   style-Attributen kommt. Semantik bleibt ueber Helligkeit erhalten:
   Ueberschrift dunkel, Fliesstext mittel, Nebentext hell. */
:root, :root[data-skin="spk"], :root[data-skin] {
  --nt-violett: #E2001A; --nt-cyan: #E2001A;
  --nx-glow: #E2001A; --nx-glow-deep: #B80016;
  --nv-vio-text: #E2001A; --nv-vio-text-soft: #B80016;
  --nv-good-text: #1A1A1A; --nv-good-text2: #1A1A1A;
  --nv-bad-text: #E2001A; --nv-warn-text: #1A1A1A; --nv-yellow-text: #1A1A1A;
  --nt-gut: #1A1A1A; --nt-warnung: #1A1A1A; --nt-fehler: #E2001A;
  --accent: #E2001A; --accent-strong: #B80016;
  --spk-gruen: #1A1A1A; --spk-gelb: #1A1A1A; --spk-akzent: #E2001A;
  --jvs-orb-rgb: 226, 0, 26;
}
/* Schrift: alles Bunte wird neutral, nur Betonungen bleiben rot. */
#view-jarvis *, .novi-dark-page *, .novi-studio-view *, #view-studio-gate * {
  -webkit-text-fill-color: currentColor !important;
}
.novi-dark-page, .novi-dark-page p, .novi-dark-page span, .novi-dark-page li,
.novi-dark-page td, .novi-dark-page div, .novi-dark-page label,
.novi-studio-view p, .novi-studio-view span, .novi-studio-view li, .novi-studio-view td {
  color: var(--spk-text, #333333) !important;
}
.novi-dark-page h1, .novi-dark-page h2, .novi-dark-page h3, .novi-dark-page h4,
.novi-dark-page b, .novi-dark-page strong,
.novi-studio-view h1, .novi-studio-view h2, .novi-studio-view h3, .novi-studio-view h4 {
  color: var(--spk-tinte, #1A1A1A) !important;
}
/* Flaechen: alles Dunkle wird weiss. */
.novi-dark-page .tile, .novi-dark-page .jvs-block, .novi-dark-page .nvds-karte,
.jvs-eins-karte, #jvs-schnell, .jvs-sprech {
  background: var(--spk-flaeche, #FFFFFF) !important;
  border-color: var(--spk-linie, #DEDEDE) !important;
  color: var(--spk-text, #333333) !important;
}
/* Betonte Elemente tragen Rot. */
.jvs-online, .jvs-puls, .novi-dark-page .ist-aktiv,
.jvs-kachel[data-jvs-mini]:hover .novi-bk-name { color: var(--spk-rot, #E2001A) !important; }
.jvs-puls { background: var(--spk-rot, #E2001A) !important; }
/* SVG-Symbole: nur Rot oder neutral. */
.novi-dark-page svg, #view-jarvis svg { stroke: var(--spk-rot, #E2001A); }
.novi-bk-ikon svg { stroke: var(--spk-rot, #E2001A) !important; }

/* ── 5 · Startseite aufraeumen (19.08.) ──────────────────────────────
   Der Sprech-Block war 214 px hoch: ein grosser leerer Kasten mit
   ungenutztem Wellen-Canvas. Er bleibt (er zeigt an, was J.A.R.V.I.S.
   sagt, und traegt aria-live), wird aber zur schmalen Statuszeile.
   Die Uhrzeile bekommt Luft, die Kacheln stehen als klares Raster. */
.jvs-sprech {
  display: flex !important; align-items: center; gap: 12px;
  padding: 10px 14px !important; margin-top: 16px;
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  border-radius: 4px !important;
  min-height: 0 !important;
}
.jvs-sprech-kopf {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--spk-grau, #666666) !important;
  margin: 0 !important; white-space: nowrap;
}
.jvs-sprech-kopf b { color: var(--spk-rot, #E2001A) !important; }
.jvs-sprech-reihe { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 0 !important; }
.jvs-sprech-mik svg { width: 15px; height: 15px; stroke: var(--spk-grau, #666666) !important; }
.jvs-sprech-welle { width: 90px !important; height: 20px !important; opacity: .5; }
.jvs-sprech-text {
  margin: 0 !important; flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--spk-text, #333333) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jvs-sprech-text:empty { display: none; }

/* Uhrzeile: ruhige Kopfzeile statt HUD-Leiste. */
.jvs-uhrzeile {
  display: flex !important; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 0 16px !important; margin: 0 !important;
  background: none !important; border: none !important;
  border-bottom: 1px solid var(--spk-linie, #DEDEDE) !important;
}
#jvs-uhr { font-size: 26px !important; font-weight: 700 !important; color: var(--spk-tinte, #1A1A1A) !important; letter-spacing: .01em; }
#jvs-datum { display: block; font-size: 12px; color: var(--spk-grau, #666666) !important; }
.jvs-online { font-size: 10.5px !important; font-weight: 700; letter-spacing: .08em; color: var(--spk-rot, #E2001A) !important; }

/* Kachelraster: Ueberschrift darueber, klare Zweierreihen. */
.novi-bk-buehne { margin: 20px 0 0 !important; }
.novi-bk-raster { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }

/* ── 6 · Kopfzeile der dunklen Seiten: letzte Fremdfarbe raus ── */
.novi-dark-page .view-header,
.novi-dark-page .view-header * { color: var(--spk-text, #333333) !important; }
.novi-dark-page .view-header h1 { color: var(--spk-tinte, #1A1A1A) !important; }
.novi-dark-page .back-btn,
.novi-dark-page .novi-hilfe-knopf {
  color: var(--spk-grau, #666666) !important;
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  border-radius: 4px !important;
}
.novi-dark-page .back-btn:hover,
.novi-dark-page .novi-hilfe-knopf:hover { border-color: var(--spk-rot, #E2001A) !important; color: var(--spk-rot, #E2001A) !important; }
.novi-dark-page .view-header svg,
.novi-dark-page .back-btn svg,
.novi-dark-page .nvds-kopf-ikon svg { stroke: var(--spk-rot, #E2001A) !important; color: var(--spk-rot, #E2001A) !important; }
.novi-dark-page .nvds-kopf-ikon { color: var(--spk-rot, #E2001A) !important; }

/* ── 7 · Restliche Fremdfarben aller Ansichten (gemessen, nicht geraten)
        Die Messung ueber 68 Ansichten fand noch 146 Stellen in Lavendel,
        Cyan, Violett und Graublau. Sie stammen aus fest verdrahteten
        Hex-Werten der Altdesign-Bloecke; hier werden sie an ihren
        Traegerklassen auf Weiss/Rot/Neutral gezwungen. ── */
p, li, em, b, strong, small, dt, dd,
.novi-empty-state-sub, .novi-field-hint, .novi-section-sub,
.novi-pruef-quelle, .novi-abschnitt-zaehler, figcaption {
  color: var(--spk-text, #333333);
}
.novi-empty-state-sub, .novi-field-hint, .novi-section-sub, figcaption {
  color: var(--spk-grau, #666666) !important;
}
.novi-workflow-step-icon, .novi-empty-state-icon, .nvel-s-kreis,
.novi-card-status-badge, .novi-promo-badge {
  background: rgba(var(--spk-rot-rgb, 226, 0, 26), .08) !important;
  border-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .22) !important;
  color: var(--spk-rot, #E2001A) !important;
}
.novi-workflow-step-icon svg, .novi-empty-state-icon svg, .nvel-s-kreis svg {
  stroke: var(--spk-rot, #E2001A) !important; fill: none !important;
}
.nvel-ring, .novi-promo-card, .novi-cpw-status, .novi-splash-orbit {
  border-color: var(--spk-linie, #DEDEDE) !important;
}
.novi-progress-track { background: var(--spk-linie-zart, #ECECEC) !important; }
.novi-progress-fill, .novi-completeness-fill, .novi-cw-summary-fill {
  background: var(--spk-rot, #E2001A) !important;
}
/* Deko-Reste des Weltraums bleiben unsichtbar. */
.novi-splash-fx, .novi-splash-aurora, .novi-splash-stars,
.novi-splash-grid, .novi-splash-orbit, .novi-splash-scan { display: none !important; }

/* ── 8 · Vollstaendiger Tokensatz auf Weiss/Rot/Neutral ──────────────
   Die Restfarben (#8ba3b5, #c9dbe8, #7ff0ff, #e6faff) kamen aus den
   --nv-text-*-Tokens der Altdesigns. Hier steht der komplette Satz
   in der Hausfarbenlogik: Schrift neutral abgestuft, Rot nur als
   Akzent, Flaechen weiss. ── */
:root, :root[data-skin], :root[data-skin="spk"], :root[data-theme], :root[data-theme="dark"] {
  --nv-text-strong: #1A1A1A; --nv-text: #333333; --nv-text-soft: #444444;
  --nv-text-mut: #5F5F5F; --nv-text-mut2: #666666; --nv-text-dim: #767676;
  --nv-text-dim2: #7D7D7D; --nv-text-faint: #9A9A9A; --nv-ekpi-label: #666666;
  --nv-page: #F4F4F5; --nv-sidebar: #FFFFFF; --nv-topbar: #FFFFFF; --nv-card: #FFFFFF;
  --nv-lift-1: rgba(0,0,0,.015); --nv-lift-2: rgba(0,0,0,.022); --nv-lift-3: rgba(0,0,0,.035);
  --nv-veil: rgba(255,255,255,.86); --nv-veil-strong: rgba(40,40,40,.45);
  --nx-line: #DEDEDE; --nx-line-strong: rgba(226,0,26,.34);
  --nx-card-top: #FFFFFF; --nx-card-bot: #FFFFFF;
  --nt-text-stark: #1A1A1A; --nt-text: #333333;
  --nt-text-gedaempft: #666666; --nt-text-leise: #8A8A8A;
  --nt-grund: #F4F4F5; --nt-flaeche: #FFFFFF; --nt-flaeche-hoch: #FFFFFF;
  --nt-linie: #DEDEDE; --nt-linie-stark: #D2D2D5;
  --bg-page: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #FAFAFA;
  --border-subtle: #E4E4E6; --border-strong: #D2D2D5;
  --text-primary: #1A1A1A; --text-secondary: #444444; --text-faint: #7D7D7D;
  --header-a: #E2001A; --header-b: #C60018; --header-text: #FFFFFF;
}
/* ── 9 · Kontrast: gemessene Schwachstellen ── */
.field-label, .novi-field-label { color: var(--spk-grau, #666666) !important; }
.nvtr-knopf.ist-primaer, .btn-primary, button.ist-primaer {
  background: var(--spk-rot, #E2001A) !important;
  border-color: var(--spk-rot, #E2001A) !important;
  color: #FFFFFF !important;
}
#view-studio-gate .novi-lx-nav > * span, #view-studio-gate .novi-lx-nav > * b,
#view-studio-gate .novi-lx-brand-text b, #view-studio-gate .novi-lx-brand-text span,
#view-studio-gate .novi-lx-link { color: #FFFFFF !important; }
/* Das Aufklappmenue ist WEISS — dort muss die Schrift dunkel bleiben. */
#view-studio-gate .novi-lx-nav .novi-lx-drop, #view-studio-gate .novi-lx-nav .novi-lx-drop *,
#view-studio-gate .novi-lx-nav .novi-lx-drop-text span { color: var(--spk-text, #333333) !important; }
#view-studio-gate .novi-lx-nav .novi-lx-drop-text b { color: var(--spk-tinte, #1A1A1A) !important; }
#view-studio-gate .novi-lx-drop b { color: var(--spk-tinte, #1A1A1A) !important; }
#view-studio-gate .novi-lx-drop svg { stroke: var(--spk-rot, #E2001A) !important; }
/* Letzte Farbreste im Emblem-Bauteil. */
.nvel-karte, .nvel-logo, .nvel-buehne, .nvel-chart, .nvel-zeilen, .nvel-mitte, .nvel-orbit,
.nvel-karte *, .nvel-buehne * { color: var(--spk-text, #333333) !important; }
.nvel-emblem-ring, .nvel-orbit { border-color: var(--spk-linie, #DEDEDE) !important; }
.nvel-karte svg, .nvel-logo svg, .nvel-buehne svg { stroke: var(--spk-rot, #E2001A) !important; }
.novi-card-status-badge, .novi-card-status-badge.muted { color: var(--spk-grau, #666666) !important; background: var(--spk-linie-zart, #ECECEC) !important; border-color: var(--spk-linie, #DEDEDE) !important; }

/* ── 10 · Letzte gemessene Fremdfarben (Cyan/Graublau) ── */
.jvs-block, .jvs-block *, .jvs-eins-karte, .jvs-eins-karte *,
#jvs-schnell, #jvs-schnell *, .jvs-sprech, .jvs-sprech * {
  color: var(--spk-text, #333333) !important;
}
.jvs-block b, .jvs-block h1, .jvs-block h2, .jvs-block h3,
#jvs-uhr, .jvs-eins-kopf b { color: var(--spk-tinte, #1A1A1A) !important; }
.jvs-online, .jvs-sprech-kopf b, #jvs-schnell b { color: var(--spk-rot, #E2001A) !important; }
.jvs-block svg, .jvs-eins-karte svg, #jvs-schnell svg { stroke: var(--spk-rot, #E2001A) !important; }
.jvs-block, .jvs-eins-karte, #jvs-schnell {
  background: var(--spk-flaeche, #FFFFFF) !important;
  border-color: var(--spk-linie, #DEDEDE) !important;
}
.novi-bk-name { color: var(--spk-tinte, #1A1A1A) !important; }

/* ═══ 11 · Startseite: Aufraeumen und Vereinheitlichen (19.08.) ═══════
   Aus dem Screenshot des Nutzers: oben links stand ein schwarzes
   Sternenquadrat (das 64x64-Weltraum-Canvas, das als INLINE-Element im
   Seitenfluss haengt), der Ton-Knopf war grau-schwarz, die Kopfzeile
   gequetscht. Hier wird die Startseite zu einer ruhigen, gleichmaessigen
   Seite: eine Kopfzeile, ein Statusband, ein Kachelraster, eine
   Statuszeile. ── */

/* Das Weltraum-Canvas ist reine Deko der alten Welt. */
#novi-weltraum { display: none !important; }

/* ── Kopfzeile: eine Reihe, klare Rollen ── */
/* 20.08.: Diese Regel setzte den Kopf weiss und mit Trennlinie —
   sie gewann per ID gegen die neue Balken-Regel. Jetzt traegt sie
   selbst das Rot; der breite Schlagschatten zieht es ueber die
   Polsterung hinaus, clip-path schneidet oben und unten ab. */
/* 24.08.: Der rote Balken sitzt ganz oben. main traegt oben 28px
   Innenabstand (18px unter 760px, 14px noch weiter unten) - genau das
   war der graue Streifen darueber. Der Abstand wird entfernt, solange
   die JARVIS-Seite offen ist; so muss keine der drei Zahlen an einer
   zweiten Stelle gespiegelt werden. Der Balken behaelt seinen eigenen
   Innenabstand, damit sein Inhalt nicht am Rand klebt. */
.app-layout > main:has(> #view-jarvis:not([hidden])) { padding-top: 0 !important; }
/* 24.08., nachgemessen: main war danach bei 0, #view-jarvis trug aber
   selbst noch 28px. Beides muss weg, sonst bleibt ein Streifen. Der
   seitliche Abstand bleibt - nur oben wird auf null gesetzt. */
:root[data-skin] #view-jarvis, #view-jarvis { padding-top: 0 !important; }
#view-jarvis .view-header {
  display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 !important; margin: 0 0 26px !important;
  border-bottom: 0 !important;
  background: var(--spk-rot, #E2001A) !important;
  box-shadow: 0 0 0 100vmax var(--spk-rot, #E2001A) !important;
  clip-path: inset(0 -100vmax);
  color: #FFFFFF !important;
}
#view-jarvis .view-header h1 {
  font-size: 20px !important; font-weight: 700 !important; letter-spacing: .06em;
  margin: 0 !important; white-space: nowrap;
}
#view-jarvis .nvds-kopf-ikon { display: none !important; }
#view-jarvis .jvs-auth-ecke {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--spk-grau, #666666) !important;
}
#view-jarvis .jvs-auth-ecke button, #view-jarvis .jvs-auth-ecke a {
  font-size: 12px !important; font-weight: 600;
  padding: 6px 12px !important; border-radius: 4px !important;
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  color: var(--spk-rot, #E2001A) !important;
}
#view-jarvis .view-header .back-btn,
#view-jarvis .view-header .novi-hilfe-knopf {
  width: 32px !important; height: 32px !important; flex: 0 0 auto;
  display: inline-flex !important; align-items: center; justify-content: center;
}

/* ── Statusband: Uhr links, Zustand rechts ── */
.jvs-uhrzeile {
  display: flex !important; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px !important; margin: 0 0 18px !important;
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  border-radius: 4px !important;
}
.jvs-uhrzeile > div:first-child { display: flex; flex-direction: column; line-height: 1.15; }
#jvs-uhr { font-size: 24px !important; font-weight: 700 !important; }
#jvs-datum { font-size: 12px !important; color: var(--spk-grau, #666666) !important; }
.jvs-online { margin-left: auto; }
.jvs-puls { width: 8px !important; height: 8px !important; border-radius: 50% !important; flex: 0 0 auto; }
/* Ton-Knopf und Glocke: weisse Flaeche, rotes Symbol. */
.jvs-stumm, .jvs-glocke {
  width: 34px !important; height: 34px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important;
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  border-radius: 4px !important;
  color: var(--spk-rot, #E2001A) !important;
}
.jvs-stumm svg, .jvs-glocke svg { width: 17px !important; height: 17px !important; stroke: var(--spk-rot, #E2001A) !important; }
.jvs-stumm.ist-stumm { color: var(--spk-grau, #666666) !important; }
.jvs-stumm.ist-stumm svg { stroke: var(--spk-grau, #666666) !important; }
.jvs-glocke em { font-size: 10px !important; }

/* ── Kachelraster: vier Spalten, gleiche Hoehe ── */
.novi-bk-buehne { margin: 0 0 18px !important; }
.novi-bk-raster { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; }
@media (max-width: 1180px) { .novi-bk-raster { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 860px)  { .novi-bk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px)  { .novi-bk-raster { grid-template-columns: 1fr !important; } }
.novi-bk { min-height: 82px !important; }

/* Ueberschrift ueber dem Raster. */
.novi-bk-buehne::before {
  content: "Bereiche";
  display: block; margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--spk-grau, #666666);
}

/* ── Zugangshinweis und uebrige Bloecke im gleichen Rahmen ── */
#jvs-vitals, #jvs-missionen, #jvs-heute, #jvs-konsole, #jvs-deck, #jvs-vault {
  margin: 0 0 14px !important;
}

/* Dunkelmodus-Knopf unten rechts: weiss mit rotem Symbol. */
#nvhk-dunkel-knopf {
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  color: var(--spk-rot, #E2001A) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12) !important;
}
#nvhk-dunkel-knopf svg { stroke: var(--spk-rot, #E2001A) !important; }

/* ═══ 12 · Die letzten 58 gemessenen Fremdfarben ═══════════════════════
   Gemessen ueber alle 68 Ansichten: Cyan (#7ff0ff, #22d3ee), Graublau
   (#8ba3b5, #c9dbe8), Navy (#0b1421, #0a111c) und Violett (#a855f7),
   ganz ueberwiegend im Emblem-Bauteil .nvel-* und im epischen Lader. ── */
.nvel-block, .nvel-karte, .nvel-balken, .nvel-s-kreis, .nvel-statuszeile,
.nvel-buehne, .nvel-mitte, .nvel-avatar {
  background: var(--spk-flaeche, #FFFFFF) !important;
  color: var(--spk-text, #333333) !important;
  border-color: var(--spk-linie, #DEDEDE) !important;
}
.nvel-ring, .nvel-ring.r1, .nvel-ring.r2, .nvel-ring.r3,
.nvel-bogen, .nvel-avatar, .nvel-emblem-ring, .novi-hero-visual-ring {
  border-color: var(--spk-rot, #E2001A) !important;
}
.nvel-s-kreis { background: rgba(var(--spk-rot-rgb, 226, 0, 26), .08) !important; border-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .25) !important; color: var(--spk-rot, #E2001A) !important; }
.nvel-balken { background: var(--spk-linie-zart, #ECECEC) !important; }
.nvel-balken > * { background: var(--spk-rot, #E2001A) !important; }
.novi-epic-loader-title { color: var(--spk-tinte, #1A1A1A) !important; }
.novi-epic-loader-sub, .novi-card-placeholder { color: var(--spk-grau, #666666) !important; }
.novi-card-placeholder { border-color: var(--spk-linie, #DEDEDE) !important; }
/* Die Farbwahl-Plaettchen zeigen fremde Farben — sie gehoeren zu einer
   Funktion, die es nicht mehr gibt (Hausfarbe ist fest rot). */
.novi-akzent-swatch, .novi-akzent-wahl { display: none !important; }
/* Restliche Einzelfaelle an generischen Tags innerhalb der Ansichten. */
[id^="view-"] i, [id^="view-"] em, [id^="view-"] b, [id^="view-"] li, [id^="view-"] span {
  border-color: var(--spk-linie, #DEDEDE);
}
[id^="view-"] em, [id^="view-"] li { color: var(--spk-text, #333333); }
[id^="view-"] i:not([class]):not([style*="width"]) { background: transparent !important; }

/* ── 13 · Feinschliff nach Sichtpruefung ─────────────────────────────
   Drei Dinge aus dem Screenshot: der Ton-Knopf trug den Text "Ton an"
   als rohen Textknoten und brach auf zwei Zeilen um; der Puls-Punkt
   stand frei in der Mitte, weil .jvs-online sich per margin-left:auto
   nach rechts schob; der Zugang-Kasten hatte keine sichtbare Kante. ── */
#view-jarvis .jvs-uhrzeile .jvs-stumm,
#view-jarvis .jvs-uhrzeile .jvs-glocke {
  font-size: 0 !important; line-height: 0 !important;
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; min-height: 34px !important;
  padding: 0 !important; overflow: hidden;
}
#view-jarvis .jvs-uhrzeile .jvs-stumm svg,
#view-jarvis .jvs-uhrzeile .jvs-glocke svg {
  width: 17px !important; height: 17px !important; font-size: 17px !important;
}
/* Puls und Zustand gehoeren zusammen, ganz rechts. */
#view-jarvis .jvs-uhrzeile .jvs-puls { margin-left: auto !important; }
#view-jarvis .jvs-uhrzeile .jvs-online { margin-left: 0 !important; }

/* Bloecke der Startseite tragen alle denselben Rahmen. */
#view-jarvis .jvs-block:not(:empty) {
  background: var(--spk-flaeche, #FFFFFF) !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  border-radius: 4px !important;
  padding: 16px 18px !important;
}
#view-jarvis .jvs-titel {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--spk-grau, #666666) !important;
  margin: 0 0 10px !important;
}
#view-jarvis .jvs-auth p { margin: 0 !important; font-size: 13px; line-height: 1.55; }
/* Der Kopfblock traegt die Kacheln und braucht selbst keinen Rahmen. */
#view-jarvis #jvs-kopf { background: none !important; border: none !important; padding: 0 !important; }

/* ── 14 · Spezifitaet gegen die Token-Durchsetzung ───────────────────
   `novi-tokens-durchsetzung` steht als LETZTER Style-Block und setzt
   `#view-jarvis .jvs-stumm { font-size: var(--nt-schrift-basis) }` mit
   !important. Bei gleicher Spezifitaet gewinnt der spaetere Block —
   der rohe Textknoten "Ton an" blieb deshalb sichtbar und brach den
   34-px-Knopf um. Mit einer Stufe mehr Spezifitaet greift die 0. ── */
:root[data-skin] #view-jarvis .jvs-uhrzeile .jvs-stumm,
:root[data-skin] #view-jarvis .jvs-uhrzeile .jvs-glocke,
:root #view-jarvis .jvs-uhrzeile .jvs-stumm,
:root #view-jarvis .jvs-uhrzeile .jvs-glocke {
  font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  text-indent: 0 !important;
}
:root[data-skin] #view-jarvis .jvs-uhrzeile .jvs-stumm svg,
:root[data-skin] #view-jarvis .jvs-uhrzeile .jvs-glocke svg,
:root #view-jarvis .jvs-uhrzeile .jvs-stumm svg,
:root #view-jarvis .jvs-uhrzeile .jvs-glocke svg {
  width: 17px !important; height: 17px !important; font-size: 17px !important;
  stroke: var(--spk-rot, #E2001A) !important; fill: none !important;
}

/* ── 15 · Letzte Fremdfarben mit erhoehter Spezifitaet ───────────────
   Die Regeln aus Abschnitt 12 verloren denselben Kampf wie der
   Ton-Knopf: gleiche Spezifitaet, spaeterer Block gewinnt. Mit
   :root[data-skin] davor greifen sie. Betrifft das Emblem-Bauteil
   (.nvel-*) und den epischen Lader. ── */
:root[data-skin] .nvel-karte, :root .nvel-karte,
:root[data-skin] .nvel-statuszeile, :root .nvel-statuszeile,
:root[data-skin] .nvel-zeilen, :root .nvel-zeilen,
:root[data-skin] .nvel-mitte, :root .nvel-mitte,
:root[data-skin] .nvel-buehne, :root .nvel-buehne,
:root[data-skin] .nvel-chart, :root .nvel-chart,
:root[data-skin] .nvel-logo, :root .nvel-logo {
  color: var(--spk-text, #333333) !important;
  background-color: transparent !important;
  border-color: var(--spk-linie, #DEDEDE) !important;
}
:root[data-skin] .nvel-block, :root .nvel-block,
:root[data-skin] .nvel-balken, :root .nvel-balken {
  background-color: var(--spk-flaeche, #FFFFFF) !important;
  border-color: var(--spk-linie, #DEDEDE) !important;
}
:root[data-skin] .nvel-s-kreis, :root .nvel-s-kreis {
  background-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .08) !important;
  border-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .25) !important;
  color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] .nvel-ring, :root .nvel-ring,
:root[data-skin] .nvel-bogen, :root .nvel-bogen,
:root[data-skin] .nvel-avatar, :root .nvel-avatar,
:root[data-skin] .nvel-emblem-ring, :root .nvel-emblem-ring,
:root[data-skin] .novi-hero-visual-ring, :root .novi-hero-visual-ring {
  border-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] .novi-epic-loader-title, :root .novi-epic-loader-title {
  color: var(--spk-tinte, #1A1A1A) !important;
}
:root[data-skin] .novi-epic-loader-sub, :root .novi-epic-loader-sub,
:root[data-skin] .novi-card-placeholder, :root .novi-card-placeholder {
  color: var(--spk-grau, #666666) !important;
  border-color: var(--spk-linie, #DEDEDE) !important;
}
/* Generische Tags in Ansichten: Cyan/Graublau raus. */
:root[data-skin] [id^="view-"] em, :root [id^="view-"] em,
:root[data-skin] [id^="view-"] li, :root [id^="view-"] li,
:root[data-skin] [id^="view-"] i, :root [id^="view-"] i {
  color: var(--spk-text, #333333) !important;
  border-color: var(--spk-linie, #DEDEDE) !important;
}
:root[data-skin] [id^="view-"] i:not([class]):not([style*="width"]),
:root [id^="view-"] i:not([class]):not([style*="width"]) {
  background-color: transparent !important;
}

/* ── 16 · Die letzten 13: Gegenregeln tragen eine ID ─────────────────
   Eine ID im Selektor schlaegt jede Zahl von Klassen. Die uebrigen
   Fremdfarben sitzen im Emblem und im KPI-Lader unterhalb von
   #view-novi-studio; deshalb steht die ID hier ebenfalls davor. ── */
:root[data-skin] #view-novi-studio .nvel-karte,
:root[data-skin] #view-novi-studio .nvel-statuszeile,
:root[data-skin] #view-novi-studio .nvel-zeilen,
:root[data-skin] #view-novi-studio .nvel-karte span,
:root[data-skin] #view-novi-studio .novi-epic-loader-sub,
#view-novi-studio .nvel-karte, #view-novi-studio .nvel-statuszeile,
#view-novi-studio .novi-epic-loader-sub {
  color: var(--spk-grau, #666666) !important;
}
:root[data-skin] #view-novi-studio .nvel-karte b,
:root[data-skin] #view-novi-studio .novi-epic-loader-title,
:root[data-skin] #view-novi-studio .nvel-karte em,
#view-novi-studio .nvel-karte b, #view-novi-studio .novi-epic-loader-title,
#view-novi-studio .nvel-karte em, #view-novi-studio em, #view-novi-studio b {
  color: var(--spk-tinte, #1A1A1A) !important;
}
:root[data-skin] #view-novi-studio .nvel-karte em,
#view-novi-studio .nvel-karte em { color: var(--spk-rot, #E2001A) !important; }
:root[data-skin] #view-novi-studio .nvel-s-kreis,
#view-novi-studio .nvel-s-kreis {
  background-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .08) !important;
  border-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .28) !important;
  color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #view-novi-studio .novi-epic-loader-title,
#view-novi-studio .novi-epic-loader-title { border-color: var(--spk-linie, #DEDEDE) !important; }

/* ── 17 · Statusfarben im ANGEMELDETEN Zustand (19.08.) ──────────────
   Ausgeloggt gemessen war die Seite farbrein; angemeldet erschienen 95
   weitere Stellen in Gruen, Bernstein und Lavendel — Kalendertage,
   Fortschrittspunkte, Auswahllisten. Sie tragen Bedeutung, deshalb
   wird sie NICHT geloescht, sondern in die Hausfarben uebersetzt:
   Rot = erledigt/aktiv, Grau = offen. Die Unterscheidung bleibt damit
   sichtbar, ohne eine dritte Farbe einzufuehren. ── */
:root[data-skin] .nvh2-kal-tag.gruen, .nvh2-kal-tag.gruen,
:root[data-skin] #view-novi-studio .nvh2-kal-tag.gruen {
  background-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .08) !important;
  color: var(--spk-rot, #E2001A) !important;
  border-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .45) !important;
}
:root[data-skin] .dot-ontrack, .dot-ontrack,
:root[data-skin] .nvh-status-dot, .nvh-status-dot,
:root[data-skin] .gruen, .gruen {
  background-color: var(--spk-rot, #E2001A) !important;
  color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] .dot-halfway, .dot-halfway,
:root[data-skin] .ohne, .ohne {
  background-color: var(--spk-schwach, #8A8A8A) !important;
  color: var(--spk-schwach, #8A8A8A) !important;
}
:root[data-skin] .goal-forecast.is-quiet, .goal-forecast.is-quiet {
  color: var(--spk-grau, #666666) !important;
}
/* Auswahllisten: die Eintraege standen dunkelviolett. */
:root[data-skin] option, option, select option {
  background-color: var(--spk-flaeche, #FFFFFF) !important;
  color: var(--spk-text, #333333) !important;
}

/* ── 18 · Seitenleiste schmaler und kompakter (19.08., Wunsch) ───────
   Neun Eintraege sind entfernt; die verbleibenden sechs brauchen
   weniger Platz. Schmalere Spalte, engere Zeilen, kleinere Symbole —
   der Inhalt bekommt die gewonnene Breite. ── */
:root #view-novi-studio .novi-sidebar, .novi-sidebar {
  width: 196px !important;
  min-width: 196px !important;
  padding: 14px 10px !important;
}
:root #view-novi-studio .novi-sidebar-logo, .novi-sidebar-logo {
  gap: 9px !important;
  padding: 0 4px 12px !important;
  margin-bottom: 10px !important;
}
.novi-sidebar-logo .novi-mark { --s: 26px !important; }
.novi-sidebar-logo-text b { font-size: 13px !important; letter-spacing: .04em; }
.novi-sidebar-logo-text span { font-size: 9.5px !important; line-height: 1.3; display: block; }
:root #view-novi-studio .novi-nav-item, .novi-nav-item {
  gap: 9px !important;
  padding: 7px 9px !important;
  font-size: 12.5px !important;
  min-height: 0 !important;
  border-radius: 4px !important;
}
.novi-nav-item svg { width: 15px !important; height: 15px !important; flex: 0 0 auto; }
.novi-nav-list { gap: 1px !important; }
/* Die Leiste braucht keinen eigenen Scrollbalken mehr. */
.novi-sidebar { overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 900px) {
  :root #view-novi-studio .novi-sidebar, .novi-sidebar { width: 168px !important; min-width: 168px !important; }
}

/* ── 19 · Werk Phase 01: Ergebnisanzeige und Entwurfsstand (19.08.) ──
   Der gespeicherte Output stand bisher nur als Rohtext im Eingabefeld.
   Jetzt liegt darunter eine Karte, die ihn nach seinen eigenen Marken
   auseinandernimmt: Kernwert gross und rot, Begruendungen darunter. ── */
.wk-out-leiste { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.wk-entwurf-stand {
  font-size: 11px; letter-spacing: .04em;
  color: var(--spk-grau, #666666);
}
.wk-ergebnis {
  margin-top: 12px;
  border: 1px solid var(--spk-linie, #DEDEDE);
  border-left: 3px solid var(--spk-rot, #E2001A);
  border-radius: 4px;
  background: var(--spk-flaeche, #FFFFFF);
  padding: 14px 16px;
}
.wk-erg-kopf {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--spk-rot, #E2001A);
  margin-bottom: 10px;
}
.wk-erg-zeile { padding: 8px 0; border-top: 1px solid var(--spk-linie-zart, #ECECEC); }
.wk-erg-zeile:first-of-type { border-top: none; padding-top: 0; }
.wk-erg-marke {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--spk-grau, #666666); margin-bottom: 3px;
}
.wk-erg-wert {
  font-size: 13px; line-height: 1.55; color: var(--spk-text, #333333);
  white-space: pre-wrap; word-break: break-word;
}
.wk-erg-zeile.ist-haupt .wk-erg-wert {
  font-size: 18px; font-weight: 700; line-height: 1.35;
  color: var(--spk-tinte, #1A1A1A);
}
.wk-erg-zeile.ist-haupt .wk-erg-marke { color: var(--spk-rot, #E2001A); }
/* Vier Thumbnail-Konzepte statt drei: das Raster faellt gestuft. */
.wk-thumbreihe { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }

/* ── 20 · Kanalkachel mit zwei Wegen (20.08., Wunsch) ────────────────
   Die Kachel bleibt anklickbar (= verwenden), darunter stehen die
   beiden Wege ausdruecklich: Use fuehrt in den Workflow, Edit auf die
   Kanalseite. Die Knoepfe erscheinen erst beim gewaehlten Kanal —
   sonst hingen an zwoelf Kacheln vierundzwanzig Knoepfe. ── */
.wk-kanal-huelle {
  display: flex; flex-direction: column;
  border: 1px solid var(--spk-linie, #DEDEDE);
  border-radius: 4px;
  background: var(--spk-flaeche, #FFFFFF);
  overflow: hidden;
  transition: border-color .15s;
}
.wk-kanal-huelle:hover { border-color: var(--spk-rot, #E2001A); }
.wk-kanal-huelle.ist-gewaehlt { border-color: var(--spk-rot, #E2001A); border-width: 2px; }
.wk-kanal-huelle .wk-kanal {
  border: none !important; border-radius: 0 !important;
  background: none !important; width: 100%; text-align: left;
}
.wk-kanal-wege {
  display: none; gap: 8px; padding: 0 12px 12px;
}
.wk-kanal-huelle.ist-gewaehlt .wk-kanal-wege { display: flex; }
.wk-kanal-wege .wk-knopf { flex: 1; min-height: 34px; padding: 6px 10px; font-size: 12px; }
/* Kanal-Bearbeiten: die fuenf Felder tragen denselben Rahmen wie
   die Phasen-Schritte, nur enger. */
#novi-page-werk-kanal-edit .wk-schritt { padding: 14px 16px; }
#novi-page-werk-kanal-edit .wk-output { min-height: 0; }

/* ── 21 · Referenzbild-Leiste mit Wegen (20.08., Wunsch) ─────────────
   Fuenf Zellen, jede mit Hochladen, Kopieren und Entfernen. Auf den
   alten 78 px stiessen die drei Knoepfe aneinander, also sind die
   Zellen breiter; die Wege duerfen umbrechen statt zu quetschen. Die
   Massregeln tragen dieselbe ID wie die aeltere Leisten-Regel — eine
   reine Klassenregel wuerde dagegen verlieren. ── */
/* Die Leiste ist kein Randstreifen mehr, sondern die Arbeitsflaeche
   (20.08., Wunsch: deutlich groesser). Fuenf Spalten teilen sich die
   volle Breite; wird das Fenster schmal, brechen sie selbst um. Die
   Bilder werden EINGEPASST statt beschnitten — bei einem Charakter-
   Sheet zaehlt, dass man das ganze Blatt sieht, nicht die saubere
   Kante. Alle Massregeln tragen die ID, sonst schlaegt sie die
   aeltere Leisten-Regel. */
#view-novi-studio .wk-leiste,
.wk-leiste {
  /* auto-fit statt fester Fuenferreihe: die Spaltenzahl haengt an
     der BREITE DES KASTENS, nicht am Fenster. Mit einer festen
     Fuenferreihe waeren die Zellen in der schmalen Inhaltsspalte
     wieder auf ~145px geschrumpft; so bleibt jede Zelle immer
     mindestens 200px breit und bricht lieber um. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; align-items: start; margin: 0 0 20px;
}
#view-novi-studio .wk-leiste figure,
.wk-leiste figure {
  position: relative; width: auto; margin: 0;
  display: flex; flex-direction: column; gap: 7px; align-items: stretch;
}
#view-novi-studio .wk-leiste img,
#view-novi-studio .wk-leer-mini,
.wk-leiste img, .wk-leiste .wk-leer-mini {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: contain; border-radius: 10px;
  background: var(--spk-flaeche, #FFFFFF);
}
#view-novi-studio .wk-leiste img { border: 1px solid var(--spk-linie, #DEDEDE); }
#view-novi-studio .wk-leer-mini {
  border: 1px dashed var(--spk-linie, #DEDEDE);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; text-align: center; padding: 6px;
}
/* Im Browser gemessen: der Durchsetzungs-Block am Dateiende setzt
   "#view-novi-studio figcaption { font-size: var(--nt-schrift-xs)
   !important }" — 11px. Er ist bewusst das letzte Wort, deshalb
   braucht die Ausnahme fuer DIESE eine Leiste dieselbe Haerte und
   eine hoehere Spezifitaet. Nur die Schriftgroesse ist ausgenommen,
   alles andere bleibt dem Token-Block ueberlassen. */
:root[data-skin] #view-novi-studio .wk-leiste figcaption,
#view-novi-studio .wk-leiste figcaption {
  font-size: 13px !important; font-weight: 700; letter-spacing: .04em; text-align: center;
}
.wk-rl-wege { display: flex; flex-wrap: wrap; gap: 5px; }
.wk-rl-weg {
  flex: 1 1 auto; min-width: 0; text-align: center; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 8px; border-radius: 5px;
  color: var(--spk-grau, #666666);
  background: var(--spk-flaeche, #FFFFFF);
  border: 1px solid var(--spk-linie, #DEDEDE);
  transition: color .15s, border-color .15s, background .15s;
}
.wk-rl-weg:hover {
  color: var(--spk-rot, #E2001A); border-color: var(--spk-rot, #E2001A);
  background: var(--spk-flaeche-hoch, #F7F7F7);
}
@media (max-width: 720px) {
  #view-novi-studio .wk-leiste,
  .wk-leiste { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ── 22 · Uebersicht: kompakter und hochwertiger ─────────────────────
   Die Boxen standen zu locker und wirkten flach. Engere Innenabstaende,
   feine Kante mit Lichtkante oben, ruhiger Schatten, Zahlen groesser
   als ihre Beschriftung — dieselbe Sprache wie die Bereichskacheln der
   Startseite. ── */
:root #view-novi-studio .nvh-panel, .nvh-panel {
  padding: 16px 18px !important;
  border-radius: 4px !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  background: var(--spk-flaeche, #FFFFFF) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
  position: relative;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.nvh-panel::before {
  content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--spk-rot-rgb, 226, 0, 26), .5), transparent);
  opacity: 0; transition: opacity .2s;
}
.nvh-panel:hover { border-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .45) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .08) !important; transform: translateY(-1px); }
.nvh-panel:hover::before { opacity: 1; }
.nvh-kpis { gap: 10px !important; }
.nvh-kpi { padding: 13px 15px !important; }
.nvh-kpi b, .nvh-kpi .nvh-kpi-val { font-size: 22px !important; letter-spacing: -.01em; }
.nvh-label {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .12em !important; text-transform: uppercase;
  color: var(--spk-grau, #666666) !important;
}
.nvh-kpi-icon {
  width: 32px !important; height: 32px !important; border-radius: 4px !important;
  background: rgba(var(--spk-rot-rgb, 226, 0, 26), .08) !important;
  border: 1px solid rgba(var(--spk-rot-rgb, 226, 0, 26), .18) !important;
}
.nvh-kpi-icon svg { width: 16px !important; height: 16px !important; stroke: var(--spk-rot, #E2001A) !important; }
/* Wochen-Fakten wie die Bereichskacheln. */
.nvwr-reihe { gap: 10px !important; }
.nvwr-fakt {
  padding: 13px 15px !important; border-radius: 4px !important;
  border: 1px solid var(--spk-linie, #DEDEDE) !important;
  background: var(--spk-flaeche, #FFFFFF) !important;
  transition: border-color .18s, transform .18s;
}
.nvwr-fakt:hover { border-color: rgba(var(--spk-rot-rgb, 226, 0, 26), .45) !important; transform: translateY(-1px); }
.nvwr-fakt b { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.01em; display: block; }
.nvwr-fakt span { font-size: 11.5px !important; color: var(--spk-grau, #666666) !important; }
/* Held und Zitat enger. */
.nvh2-hero { padding: 18px 20px !important; }
.nvh2-hero h2 { font-size: clamp(20px, 2.2vw, 28px) !important; margin: 4px 0 6px !important; }
.nvh2-hero p { font-size: 13px !important; margin: 0 0 12px !important; }
.nvh-hero-eyebrow { font-size: 10px !important; letter-spacing: .12em; text-transform: uppercase; }
.nvh2-zitat p { font-size: 13.5px !important; line-height: 1.5; }
.nvh2-heldenreihe { gap: 12px !important; margin-bottom: 14px !important; }
/* Auswahlkarten (Offene Video-Projekte usw.) enger. */
.nvvp-karten { gap: 12px !important; }
.nvvp-karten > * { padding: 18px !important; border-radius: 4px !important; }


/* Zweite Fassung je Regel mit :root[data-skin] davor (17.08.).
   Zwei Stichproben blieben trotz richtiger Reihenfolge stehen:
   .novi-nav-item (4 px) und .nvh-kpi-icon (schwarz). Der Skin führt
   dort ZUSÄTZLICH eine ID im Selektor und liegt damit über der
   einfachen Fassung — unabhängig von der Reihenfolge. Mit gleicher
   Spezifität entscheidet wieder die Reihenfolge, und die steht
   inzwischen richtig. */
/* ══════════════════════════════════════════════════════════════════
   Token-Durchsetzung — MUSS der letzte Style-Block bleiben (17.08.)

   Über der dunklen Oberfläche liegt der helle Sparkassen-Skin
   (<style id="novi-spk-skin">) mit 49 !important-Regeln auf genau
   diese Klassen. Bei gleicher Wichtigkeit und Spezifität gewinnt die
   SPÄTERE Regel — solange die Normalisierung vor dem Skin stand,
   verlor sie deshalb einen Teil ihrer Konflikte.

   Gemessen: von sechs Stichproben griffen drei, drei nicht
   (.novi-nav-item blieb bei 4 px, .nvh-kpi-icon blieb schwarz).

   Wer hier etwas ergänzt: dieser Block gehört ans Ende. Wandert er
   nach oben, kippt genau dieselbe Hälfte wieder um. */
/* !important ist hier Absicht, kein Schludrian: Über der dunklen
   Oberfläche liegt der helle Sparkassen-Skin (data-skin="spk") mit
   allein 49 !important-Regeln auf genau diese Klassen. Ohne gleiches
   Gewicht verliert die Token-Schicht jeden Konflikt — nachgewiesen:
   von sechs Stichproben griff genau EINE. Die Selektoren tragen
   zusätzlich eine ID und stehen später im Dokument, gewinnen also bei
   gleicher Wichtigkeit über die höhere Spezifität. */
/* ══ Stufe 2: alle Studio-Seiten und die Startseite (17.08.) ═══════
   Die Klassen der Phasenseiten sind auf ALLEN Studio-Seiten dieselben,
   deshalb greifen diese Regeln auf #view-novi-studio — eine Regel für
   alle Seiten statt zehn Kopien. Gemessen: Phase 07 hatte 10 Radien-
   und 27 Schrift-Ausreißer, die Übersicht 15 bzw. 80. */

/* Radien der Arbeitsflächen. */
#view-novi-studio .novi-cwm-section, :root[data-skin] #view-novi-studio .novi-cwm-section { border-radius: var(--nt-radius-gross) !important; }   /* war 4 */
#view-novi-studio .novi-kopf-wert, :root[data-skin] #view-novi-studio .novi-kopf-wert,
#view-novi-studio .novi-pruef, :root[data-skin] #view-novi-studio .novi-pruef,
#view-novi-studio .novi-p03-gate-list, :root[data-skin] #view-novi-studio .novi-p03-gate-list,
#view-novi-studio .novi-phase-nav, :root[data-skin] #view-novi-studio .novi-phase-nav { border-radius: var(--nt-radius-mittel) !important; }    /* war 4/8/9 */
#view-novi-studio .nvhk-punkt, :root[data-skin] #view-novi-studio .nvhk-punkt,
#view-novi-studio .novi-side-griff, :root[data-skin] #view-novi-studio .novi-side-griff { border-radius: var(--nt-radius-klein) !important; }    /* war 4 */
#view-novi-studio .novi-content input:not([type=checkbox]):not([type=radio]), :root[data-skin] #view-novi-studio .novi-content input:not([type=checkbox]):not([type=radio]),
#view-novi-studio .novi-content textarea, :root[data-skin] #view-novi-studio .novi-content textarea,
#view-novi-studio .novi-content select, :root[data-skin] #view-novi-studio .novi-content select { border-radius: var(--nt-radius-mittel) !important; } /* war 8 */
#view-novi-studio .novi-content img:not(.novi-mark-img), :root[data-skin] #view-novi-studio .novi-content img:not(.novi-mark-img) { border-radius: var(--nt-radius-mittel) !important; } /* war 8 */

/* Schriftgrößen der Arbeitsflächen. Die Abstände zur Skala sind klein
   (9,5 → 11 ist der größte Sprung), deshalb verschiebt sich nichts im
   Umbruch — geprüft wird das trotzdem nach dem Deploy. */
#view-novi-studio .novi-pruef-quelle, :root[data-skin] #view-novi-studio .novi-pruef-quelle,
#view-novi-studio .novi-field-hint, :root[data-skin] #view-novi-studio .novi-field-hint,
#view-novi-studio .novi-phase-nav-here, :root[data-skin] #view-novi-studio .novi-phase-nav-here,
#view-novi-studio .novi-abschnitt-zaehler, :root[data-skin] #view-novi-studio .novi-abschnitt-zaehler,
#view-novi-studio figcaption, :root[data-skin] #view-novi-studio figcaption { font-size: var(--nt-schrift-xs) !important; }                /* war 9,5–10,5 */
#view-novi-studio .nvhk-punkt, :root[data-skin] #view-novi-studio .nvhk-punkt,
#view-novi-studio .novi-phase-nav-btn, :root[data-skin] #view-novi-studio .novi-phase-nav-btn { font-size: var(--nt-schrift-s) !important; }        /* war 11,5–12,48 */
#view-novi-studio .novi-cwm-section-title, :root[data-skin] #view-novi-studio .novi-cwm-section-title,
#view-novi-studio .novi-section-sub, :root[data-skin] #view-novi-studio .novi-section-sub,
#view-novi-studio .novi-hero-btn, :root[data-skin] #view-novi-studio .novi-hero-btn { font-size: var(--nt-schrift-basis) !important; }         /* war 12,5–13,5 */

/* ── Jarvis-Startseite ──
   Dort stammen alle Ausreißer aus rem-Werten (.56rem = 8,96 px usw.).
   Die Kleinstlabels bleiben klein — dafür gibt es die Mikro-Stufe;
   sie auf 11 px zu ziehen hätte die Umlaufbahn der Satelliten
   gesprengt. Alle Sprünge hier sind unter einem Pixel. */
/* 19.08.: von micro (9 px) auf xs (11 px) — die Beschriftungen sind
   der Wegweiser der Startseite, keine Fussnote. */
#view-jarvis .jvs-mini span, :root[data-skin] #view-jarvis .jvs-mini span,
#view-jarvis .jvs-online, :root[data-skin] #view-jarvis .jvs-online { font-size: var(--nt-schrift-xs) !important; }
#view-jarvis .jvs-auth-konto, :root[data-skin] #view-jarvis .jvs-auth-konto { font-size: var(--nt-schrift-xs) !important; }                /* war 11,52 */
#view-jarvis .jvs-stumm, :root[data-skin] #view-jarvis .jvs-stumm,
#view-jarvis .back-btn, :root[data-skin] #view-jarvis .back-btn,
#view-jarvis .jvs-glocke, :root[data-skin] #view-jarvis .jvs-glocke { font-size: var(--nt-schrift-basis) !important; }                 /* war 13,12–13,6 */
#view-jarvis .jvs-glocke, :root[data-skin] #view-jarvis .jvs-glocke { border-radius: var(--nt-radius-mittel) !important; }             /* war 9 */

/* ══ Stufe 1: Studio-Übersicht auf die Skala (17.08.) ══════════════
   Chirurgisch statt flächendeckend: gemessen wurde, WELCHE Klassen die
   Ausreißer erzeugen (499 sichtbare Elemente). Nur die werden gezogen.
   SVG-Knoten (path, circle, svg) bleiben unangetastet — sie erben zwar
   eine Schriftgröße, zeichnen aber keinen Text. */

/* Radien: 15 Klassen lagen neben der Skala. */
#view-novi-studio .nvh2-kal-tag, :root[data-skin] #view-novi-studio .nvh2-kal-tag { border-radius: var(--nt-radius-klein) !important; }      /* war 3 */
#view-novi-studio .novi-nav-item, :root[data-skin] #view-novi-studio .novi-nav-item { border-radius: var(--nt-radius-klein) !important; }     /* war 4 */
#view-novi-studio .nvh-iconbtn, :root[data-skin] #view-novi-studio .nvh-iconbtn { border-radius: var(--nt-radius-klein) !important; }       /* war 4 */
#view-novi-studio .novi-split-btn, :root[data-skin] #view-novi-studio .novi-split-btn { border-radius: var(--nt-radius-klein) !important; }    /* war 4 */
#view-novi-studio .novi-userbtn, :root[data-skin] #view-novi-studio .novi-userbtn { border-radius: var(--nt-radius-klein) !important; }      /* war 4 */
#view-novi-studio .goal-forecast, :root[data-skin] #view-novi-studio .goal-forecast { border-radius: var(--nt-radius-mittel) !important; }    /* war 8 */
#view-novi-studio .novi-mark-img, :root[data-skin] #view-novi-studio .novi-mark-img { border-radius: var(--nt-radius-mittel) !important; }    /* war 8 */
#view-novi-studio .nvh2-kpi, :root[data-skin] #view-novi-studio .nvh2-kpi { border-radius: var(--nt-radius-gross) !important; }          /* war 12 */
#view-novi-studio .nvml-panel, :root[data-skin] #view-novi-studio .nvml-panel { border-radius: var(--nt-radius-gross) !important; }        /* war 12 */

/* Schrift: die benannten Klassen neben der Skala. Bare Tags (span, b)
   bleiben vorerst stehen — sie pauschal zu ziehen wäre der Holzhammer,
   den dieser Umbau gerade vermeiden soll. */
#view-novi-studio .nvh-label, :root[data-skin] #view-novi-studio .nvh-label { font-size: var(--nt-schrift-xs) !important; }               /* war 10 */
#view-novi-studio .nvh-kpi-sub, :root[data-skin] #view-novi-studio .nvh-kpi-sub { font-size: var(--nt-schrift-xs) !important; }             /* war 10,5 */
#view-novi-studio .nvh2-kal-kopf, :root[data-skin] #view-novi-studio .nvh2-kal-kopf { font-size: var(--nt-schrift-s) !important; }            /* war 11,5 */
#view-novi-studio .novi-breadcrumb-current, :root[data-skin] #view-novi-studio .novi-breadcrumb-current { font-size: var(--nt-schrift-basis) !important; } /* war 12,5 */
#view-novi-studio .nvh-kpi-num, :root[data-skin] #view-novi-studio .nvh-kpi-num { font-size: var(--nt-schrift-xl) !important; }             /* war 25 */

/* Reste des hellen Skins im dunklen Studio. Kein Geschmack, sondern
   ein Fehler: ein schwarzes Symbol auf dunkler Kachel ist unsichtbar. */
#view-novi-studio .nvh-kpi-icon, :root[data-skin] #view-novi-studio .nvh-kpi-icon { color: var(--nt-text-gedaempft) !important; }
#view-novi-studio .nvh-kpi-icon svg, :root[data-skin] #view-novi-studio .nvh-kpi-icon svg { stroke: currentColor !important; }
/* Die Spur des Balkens braucht Kontrast gegen die Karte. --nt-flaeche-hoch
   war im dunklen Studio richtig und ist auf dem hellen Skin #FFFFFF —
   also weiss auf weiss: der leere Teil des Balkens verschwand. */
/* ══ JARVIS: heller Auftritt mit rotem Akzent (24.08.) ════

   Ersetzt den dunklen Anstrich von heute Morgen vollstaendig - zwei
   uebereinanderliegende Themen waeren beim naechsten Umbau nicht mehr
   auseinanderzuhalten.

   Beide Farbangaben ueberall: die App setzt vielfach
   -webkit-text-fill-color, und das ueberstimmt color. Wer nur color
   setzt, sieht auf dem Bildschirm keinen Unterschied.

   Struktur, Knoepfe und Kachel-Logik bleiben unberuehrt. */

:root[data-skin] #view-jarvis, #view-jarvis {
  background:
    radial-gradient(900px 460px at 50% -160px, rgba(226, 0, 26, .07), transparent 70%),
    #F4F5F8 !important;
  background-attachment: fixed !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
  min-height: 100vh !important;
}

/* Das Layout: eine mittige Spalte mit festem Abstand zwischen den
   Bloecken. Vorher stand sie linksbuendig (margin 0) und war ein
   display:block - die Luft dazwischen entstand zufaellig. */
:root[data-skin] #view-jarvis #jvs-wurzel, #view-jarvis #jvs-wurzel {
  max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important;
  display: flex !important; flex-direction: column !important; gap: 18px !important;
  padding-top: 22px !important;
}

/* Der rote Balken bleibt die Marke. */
:root[data-skin] #view-jarvis .view-header, #view-jarvis .view-header {
  border-bottom: 0 !important;
  box-shadow: 0 0 0 100vmax var(--spk-rot, #E2001A), 0 6px 20px rgba(226, 0, 26, .22) !important;
}
:root[data-skin] #view-jarvis .view-header h1, #view-jarvis .view-header h1 {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
:root[data-skin] #view-jarvis .jvs-auth-ecke, #view-jarvis .jvs-auth-ecke,
:root[data-skin] #view-jarvis .jvs-auth-konto, #view-jarvis .jvs-auth-konto {
  color: rgba(255, 255, 255, .86) !important; -webkit-text-fill-color: rgba(255, 255, 255, .86) !important;
}
:root[data-skin] #view-jarvis .jvs-auth-ecke button, #view-jarvis .jvs-auth-ecke button {
  background: rgba(255, 255, 255, .16) !important; border: 1px solid rgba(255, 255, 255, .45) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-radius: 999px !important;
}
:root[data-skin] #view-jarvis .view-header .novi-hilfe-knopf, #view-jarvis .view-header .novi-hilfe-knopf,
:root[data-skin] #view-jarvis .view-header .back-btn, #view-jarvis .view-header .back-btn {
  background: rgba(255, 255, 255, .18) !important; border: 1px solid rgba(255, 255, 255, .45) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}

/* Karten: weiss, feine Kante, ruhiger Schatten. */
:root[data-skin] #view-jarvis .jvs-block, #view-jarvis .jvs-block,
:root[data-skin] #view-jarvis .jvs-uhrzeile, #view-jarvis .jvs-uhrzeile {
  background: #FFFFFF !important;
  border: 1px solid #E6E6EC !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(16, 17, 26, .04), 0 10px 28px rgba(16, 17, 26, .06) !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
  padding: 18px !important;
}
/* Der Rahmen um die Uhrzeile wird flach, sonst liegt Karte auf Karte. */
:root[data-skin] #view-jarvis #jvs-kopf, #view-jarvis #jvs-kopf {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}

/* Blocktitel: klein, gesperrt, mit rotem Strich davor. */
:root[data-skin] #view-jarvis .jvs-titel, #view-jarvis .jvs-titel {
  display: flex !important; align-items: center !important; gap: 9px !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
  margin: 0 0 13px !important;
}
:root[data-skin] #view-jarvis .jvs-titel::before, #view-jarvis .jvs-titel::before {
  content: "" !important; width: 3px !important; height: 13px !important;
  border-radius: 2px !important; background: var(--spk-rot, #E2001A) !important; flex: 0 0 auto !important;
}

/* Uhr und Datum. */
:root[data-skin] #view-jarvis #jvs-uhr, #view-jarvis #jvs-uhr {
  font-size: 34px !important; font-weight: 700 !important; letter-spacing: -.01em !important;
  font-variant-numeric: tabular-nums !important;
  color: #111117 !important; -webkit-text-fill-color: #111117 !important;
}
:root[data-skin] #view-jarvis #jvs-datum, #view-jarvis #jvs-datum {
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important; font-size: 12px !important;
}
:root[data-skin] #view-jarvis .jvs-glocke, #view-jarvis .jvs-glocke,
:root[data-skin] #view-jarvis .jvs-stumm, #view-jarvis .jvs-stumm {
  background: #F6F6F9 !important; border: 1px solid #E2E2E9 !important;
  color: #4A4A55 !important; -webkit-text-fill-color: #4A4A55 !important;
  border-radius: 12px !important;
}
:root[data-skin] #view-jarvis .jvs-glocke svg, #view-jarvis .jvs-glocke svg,
:root[data-skin] #view-jarvis .jvs-stumm svg, #view-jarvis .jvs-stumm svg { stroke: #4A4A55 !important; }
:root[data-skin] #view-jarvis .jvs-glocke em, #view-jarvis .jvs-glocke em {
  background: var(--spk-rot, #E2001A) !important; color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
:root[data-skin] #view-jarvis .jvs-online, #view-jarvis .jvs-online {
  color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
}

/* Die Bereichskacheln. Logik unangetastet - nur der Anzug ist neu.
   Vier je Zeile statt fuenf: bei sieben Kacheln sieht 4+3 nach Absicht
   aus, 5+2 nach Rest. */
:root[data-skin] #view-jarvis .novi-bk-raster, #view-jarvis .novi-bk-raster {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 14px !important;
}
:root[data-skin] #view-jarvis .novi-bk, #view-jarvis .novi-bk {
  background: #FFFFFF !important;
  border: 1px solid #E6E6EC !important; border-radius: 16px !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
  box-shadow: 0 1px 2px rgba(16, 17, 26, .04), 0 8px 22px rgba(16, 17, 26, .06) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  aspect-ratio: auto !important; min-height: 0 !important;
  padding: 15px 16px !important;
  display: flex !important; flex-direction: row !important; align-items: center !important;
  justify-content: flex-start !important; gap: 13px !important; cursor: pointer !important;
  text-align: left !important;
}
:root[data-skin] #view-jarvis .novi-bk:hover, #view-jarvis .novi-bk:hover,
:root[data-skin] #view-jarvis .novi-bk:focus-visible, #view-jarvis .novi-bk:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(226, 0, 26, .55) !important;
  box-shadow: 0 10px 26px rgba(226, 0, 26, .14), 0 2px 6px rgba(16, 17, 26, .06) !important;
}
:root[data-skin] #view-jarvis .novi-bk-ikon, #view-jarvis .novi-bk-ikon {
  width: 40px !important; height: 40px !important; border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(226, 0, 26, .08) !important;
  border: 1px solid rgba(226, 0, 26, .18) !important; flex: 0 0 auto !important;
}
:root[data-skin] #view-jarvis .novi-bk-ikon svg, #view-jarvis .novi-bk-ikon svg {
  width: 20px !important; height: 20px !important;
  stroke: var(--spk-rot, #E2001A) !important; fill: none !important;
}
:root[data-skin] #view-jarvis .novi-bk-name, #view-jarvis .novi-bk-name {
  font-size: 14px !important; font-weight: 650 !important; text-align: left !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
}

/* Command Deck. */
:root[data-skin] #view-jarvis .jvs-deck-raster button, #view-jarvis .jvs-deck-raster button {
  background: #FFFFFF !important; border: 1px solid #E2E2E9 !important;
  color: #33333D !important; -webkit-text-fill-color: #33333D !important;
  border-radius: 999px !important; padding: 8px 14px !important; font-size: 13px !important;
  transition: border-color .16s ease, color .16s ease, background .16s ease !important;
}
:root[data-skin] #view-jarvis .jvs-deck-raster button:hover, #view-jarvis .jvs-deck-raster button:hover {
  border-color: rgba(226, 0, 26, .55) !important; background: rgba(226, 0, 26, .05) !important;
  color: #111117 !important; -webkit-text-fill-color: #111117 !important;
}

/* Die Sprechleiste unten. */
:root[data-skin] #view-jarvis #jvs-sprech, #view-jarvis #jvs-sprech {
  background: #FFFFFF !important; border: 1px solid #E2E2E9 !important;
  border-radius: 999px !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
  box-shadow: 0 1px 2px rgba(16, 17, 26, .04) !important;
}
:root[data-skin] #view-jarvis #jvs-sprech input, #view-jarvis #jvs-sprech input {
  background: transparent !important; border: 0 !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
}
:root[data-skin] #view-jarvis #jvs-sprech ::placeholder, #view-jarvis #jvs-sprech ::placeholder {
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
}

/* Text in den Bloecken. */
:root[data-skin] #view-jarvis .jvs-block b, #view-jarvis .jvs-block b,
:root[data-skin] #view-jarvis .jvs-block strong, #view-jarvis .jvs-block strong {
  color: #111117 !important; -webkit-text-fill-color: #111117 !important;
}
:root[data-skin] #view-jarvis .jvs-block span, #view-jarvis .jvs-block span,
:root[data-skin] #view-jarvis .jvs-block p, #view-jarvis .jvs-block p,
:root[data-skin] #view-jarvis .jvs-block li, #view-jarvis .jvs-block li,
:root[data-skin] #view-jarvis .jvs-block td, #view-jarvis .jvs-block td {
  color: #55555F !important; -webkit-text-fill-color: #55555F !important;
}
:root[data-skin] #view-jarvis .jvs-block .jvs-titel, #view-jarvis .jvs-block .jvs-titel {
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
:root[data-skin] #view-jarvis .jvs-eins-karte, #view-jarvis .jvs-eins-karte {
  background: #FFFFFF !important; border: 1px solid #E6E6EC !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
}
:root[data-skin] #view-jarvis input, #view-jarvis input,
:root[data-skin] #view-jarvis select, #view-jarvis select,
:root[data-skin] #view-jarvis textarea, #view-jarvis textarea {
  background: #FFFFFF !important; border: 1px solid #E2E2E9 !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
}
:root[data-skin] #view-jarvis option, #view-jarvis option {
  background: #FFFFFF !important; color: #1B1B21 !important;
}
/* Ein Sicherheitsnetz nur fuer die drei Flaechen-Klassen der App -
   eine Sammelregel auf alle Elemente hat hier schon einmal die
   Fuellung aller Fortschrittsbalken geleert. */
:root[data-skin] #view-jarvis .jvs-block .novi-panel, #view-jarvis .jvs-block .novi-panel,
:root[data-skin] #view-jarvis .jvs-block .nvh-panel, #view-jarvis .jvs-block .nvh-panel,
:root[data-skin] #view-jarvis .jvs-block .novi-card, #view-jarvis .jvs-block .novi-card {
  background: #FBFBFD !important; border-color: #E6E6EC !important;
  color: #1B1B21 !important; -webkit-text-fill-color: #1B1B21 !important;
}
/* ══ Ruhigere Schritt-Karten (24.08., Wunsch) ══════

   Nur Aussehen. Kein Knopf, kein Feld, keine Kennung aendert sich.

   Der eigentliche Fehler, nachgemessen: .wk-promptzeile ist ein
   flex-Container OHNE Umbruch, in dem alle Kinder schrumpfen duerfen.
   Die Meta-Angabe landete dadurch auf 38px Breite und 84px Hoehe -
   vier Zeilen fuer einen Satz, die Zeile 102px hoch statt einer.
   Umbruch erlauben und festlegen, WER schrumpfen darf, loest das. */

#view-novi-studio .wk-promptzeile,
:root[data-skin] #view-novi-studio .wk-promptzeile {
  flex-wrap: wrap !important; row-gap: 8px !important;
  align-items: center !important;
  border-style: solid !important; border-color: #E6E6EC !important;
  background: #FAFAFC !important; padding: 9px 11px !important;
}
/* Die Beschriftung bleibt ganz, die Meta-Angabe nimmt den Rest der
   Zeile, Marke und Knoepfe rutschen geschlossen in die naechste. */
#view-novi-studio .wk-promptzeile > b,
:root[data-skin] #view-novi-studio .wk-promptzeile > b {
  flex: 0 0 auto !important; white-space: nowrap !important;
}
#view-novi-studio .wk-promptzeile > span:not(.wk-wo),
:root[data-skin] #view-novi-studio .wk-promptzeile > span:not(.wk-wo) {
  flex: 1 1 150px !important; min-width: 0 !important;
  line-height: 1.45 !important;
}
#view-novi-studio .wk-promptzeile > .wk-wo,
:root[data-skin] #view-novi-studio .wk-promptzeile > .wk-wo {
  flex: 0 0 auto !important; white-space: nowrap !important;
}
#view-novi-studio .wk-promptzeile > button,
:root[data-skin] #view-novi-studio .wk-promptzeile > button {
  flex: 0 0 auto !important; min-height: 32px !important;
  padding: 5px 12px !important;
}
/* Der erste Knopf schiebt die Gruppe nach rechts - auch wenn sie in
   der zweiten Zeile steht. */
#view-novi-studio .wk-promptzeile > button:first-of-type,
:root[data-skin] #view-novi-studio .wk-promptzeile > button:first-of-type {
  margin-left: auto !important;
}

/* Die Karte selbst: weniger Rahmen, mehr Ruhe. */
#view-novi-studio #novi-page-werk-lauf .wk-schritt,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-schritt {
  padding: 15px 17px !important; margin-bottom: 10px !important;
  border-color: #E6E6EC !important; border-radius: 14px !important;
}

/* Kopfzeile der Karte: Nummer dezent, Titel lesbar statt gesperrt. */
#view-novi-studio #novi-page-werk-lauf .wk-schritt-titel,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-schritt-titel {
  gap: 9px !important; margin-bottom: 12px !important;
  align-items: baseline !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-schritt-titel b,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-schritt-titel b {
  font-size: 14px !important; letter-spacing: 0 !important;
  text-transform: none !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-nr,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-nr {
  width: auto !important; height: auto !important; border: 0 !important;
  background: none !important; border-radius: 0 !important;
  min-width: 17px !important; font-size: 11px !important;
  font-weight: 600 !important; align-self: baseline !important;
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
}
/* Die Freigabe-Karten tragen ein Haken statt einer Zahl - der bleibt
   rund und farbig, sonst verliert er seine Bedeutung. */
#view-novi-studio #novi-page-werk-lauf .wk-frei .wk-nr,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-frei .wk-nr {
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  border: 1px solid #D8D8E0 !important; color: #4A4A55 !important;
  -webkit-text-fill-color: #4A4A55 !important;
}

/* Der Hinweis wird leiser. Der WORTLAUT bleibt unangetastet - er
   steht an ueber zehn Aufrufstellen und wird von Suiten geprueft. */
#view-novi-studio #novi-page-werk-lauf .wk-hinweis,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-hinweis {
  font-size: 12px !important; line-height: 1.5 !important;
  margin: 0 0 11px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}

/* Das Antwortfeld: hier landen 3.400 Woerter. Vier sichtbare Zeilen
   waren zu wenig. */
#view-novi-studio #novi-page-werk-lauf .wk-output,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-output {
  min-height: 132px !important; font-size: 13px !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-out-leiste,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-out-leiste {
  display: flex !important; align-items: center !important;
  gap: 10px !important; margin-top: 9px !important;
}

/* Das Ergebnis wird als eigener Block abgesetzt - eine Linie trennt
   das Eingeben vom Gespeicherten. */
#view-novi-studio #novi-page-werk-lauf .wk-themadrei,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-themadrei {
  margin-top: 14px !important; padding-top: 13px !important;
  border-top: 1px solid #EDEDF1 !important;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr) !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-themakarte,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-themakarte {
  border-color: #E9E9EE !important; background: #FCFCFD !important;
}
/* Dieselbe Absetzung fuer die anderen Ergebnis-Formen: die drei
   Thumbnail-Varianten und die Skript-Box. */
#view-novi-studio #novi-page-werk-lauf #wk-thumbkarten:not(:empty),
:root[data-skin] #view-novi-studio #novi-page-werk-lauf #wk-thumbkarten:not(:empty),
#view-novi-studio #novi-page-werk-lauf .wk-skriptkarte,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-skriptkarte {
  margin-top: 14px !important; padding-top: 13px !important;
  border-top: 1px solid #EDEDF1 !important;
}
/* ══ Schrittliste links (24.08., Wunsch) ════════

   Die Liste klebt und scrollt fuer sich. Bei vierzehn Punkten und
   einer langen Schritt-Karte muesste man sonst zum Wechseln erst
   wieder ganz nach oben.

   Steht VOR den Handy-Regeln, damit er dort nicht gegen sie
   gewinnt - gleiche Staerke, der spaetere Block entscheidet. */

#view-novi-studio #novi-page-werk-lauf .wk-liste,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-liste {
  display: flex !important; flex-direction: column !important;
  gap: 2px !important; position: sticky !important; top: 8px !important;
  max-height: calc(100vh - 90px) !important; overflow-y: auto !important;
  padding: 6px !important; border: 1px solid #E6E6EC !important;
  border-radius: 14px !important; background: #FFF !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp {
  display: flex !important; align-items: center !important;
  gap: 9px !important; width: 100% !important;
  padding: 8px 9px !important; border: 0 !important;
  border-radius: 9px !important; background: transparent !important;
  text-align: left !important; cursor: pointer !important;
  font-size: 13px !important; line-height: 1.3 !important;
  min-height: 38px !important; box-shadow: none !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp:hover,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp:hover {
  background: #F4F4F7 !important;
}
/* Die Nummer traegt die Kennzeichnung - so bleibt der ausgewaehlte
   Punkt auch ohne Farbe erkennbar. */
#view-novi-studio #novi-page-werk-lauf .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp-nr {
  flex: 0 0 auto !important; width: 24px !important; height: 24px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; border-radius: 7px !important;
  background: #F1F1F5 !important; font-size: 11px !important;
  font-weight: 700 !important; letter-spacing: .02em !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp-name,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp-name {
  flex: 1 1 auto !important; min-width: 0 !important;
}
/* Der Punkt rechts: gruen wenn erledigt, rot wenn gerade dran. */
#view-novi-studio #novi-page-werk-lauf .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp-punkt {
  flex: 0 0 auto !important; width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: #D5D5DD !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp.ist-ok .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp.ist-ok .wk-lp-punkt {
  background: #16A34A !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp.ist-jetzt .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp.ist-jetzt .wk-lp-punkt {
  background: var(--spk-rot, #E2001A) !important;
}
/* Der gewaehlte Punkt. */
#view-novi-studio #novi-page-werk-lauf .wk-lp.ist-aktiv,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp.ist-aktiv {
  background: var(--spk-rot, #E2001A) !important;
  color: #FFF !important; -webkit-text-fill-color: #FFF !important;
  font-weight: 600 !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp.ist-aktiv .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp.ist-aktiv .wk-lp-nr {
  background: rgba(255,255,255,.22) !important;
  color: #FFF !important; -webkit-text-fill-color: #FFF !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp.ist-aktiv .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp.ist-aktiv .wk-lp-punkt {
  background: rgba(255,255,255,.85) !important;
}

/* Ohne diese Zeile bliebe eine verborgene Karte stehen: das Attribut
   hidden setzt display:none nur, solange keine andere Regel display
   vorgibt - und mehrere tun das hier. */
#view-novi-studio #novi-page-werk-lauf .wk-schritt[hidden],
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-schritt[hidden] {
  display: none !important;
}

/* Die Zeile ueber der Karte: "Schritt 03 von 14". */
#view-novi-studio #novi-page-werk-lauf .wk-buehne-kopf,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-buehne-kopf {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  margin: 2px 0 9px 2px !important;
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
}

/* Auf dem Telefon liegt die Liste quer: eine Leiste, die man zur Seite
   schiebt. Senkrecht waeren es vierzehn Zeilen, an denen man sich bei
   jedem Aufruf vorbeiscrollen muesste. */
@media (max-width: 900px) {
  #view-novi-studio #novi-page-werk-lauf .wk-liste,
  :root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-liste {
    position: static !important; flex-direction: row !important;
    max-height: none !important; overflow-x: auto !important;
    overflow-y: hidden !important; gap: 6px !important;
    padding: 6px !important; margin-bottom: 2px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #view-novi-studio #novi-page-werk-lauf .wk-lp,
  :root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp {
    flex: 0 0 auto !important; width: auto !important;
    max-width: 190px !important; min-height: 40px !important;
  }
  /* Der Name wird auf einer Zeile gehalten - sonst waere die Leiste
     doppelt so hoch, nur wegen eines langen Titels. */
  #view-novi-studio #novi-page-werk-lauf .wk-lp-name,
  :root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp-name {
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* Es steht nur noch eine Karte da - der Abstand nach unten, der frueher
   die naechste trennte, ist jetzt Leere. */
#view-novi-studio #novi-page-werk-lauf .wk-abschnitt,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-abschnitt {
  margin: 0 !important;
}
/* ══ Schloesser in der Schrittliste (24.08., Wunsch) ═══

   Gesperrt heisst hier wirklich gesperrt: kein Zeiger, keine
   Hover-Farbe, gedaempfte Schrift. Ein Punkt, der sich anfuehlt wie
   ein Knopf, aber keiner ist, ist schlimmer als einer, der gar nicht
   erst danach aussieht. */

#view-novi-studio #novi-page-werk-lauf .wk-lp.ist-zu,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp.ist-zu {
  cursor: default !important; opacity: .55 !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp.ist-zu:hover,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp.ist-zu:hover {
  background: transparent !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp.ist-zu .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp.ist-zu .wk-lp-nr {
  background: #F1F1F5 !important;
  color: #A8A8B4 !important; -webkit-text-fill-color: #A8A8B4 !important;
}
/* Das Schloss steht dort, wo sonst der Zustandspunkt sitzt - gleiche
   Spalte, damit die Liste nicht wackelt, wenn eines aufgeht. */
#view-novi-studio #novi-page-werk-lauf .wk-lp-schloss,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp-schloss {
  flex: 0 0 auto !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  width: 13px !important; height: 13px !important;
  color: #A8A8B4 !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-lp-schloss svg,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-lp-schloss svg {
  display: block !important;
}

/* ══ Videos 2.0 (31.08., Wunsch): dieselbe Schrittleiste wie im
   Werk - der Block oben ist auf #novi-page-werk-lauf gescoped und
   griff auf den neuen Seiten nicht (die Leiste zerfiel zu grauen
   Kacheln). Dieser Block ist ZEILE FUER ZEILE aus dem Original
   erzeugt, nur der Seiten-Anker ist getauscht. Bei Aenderungen am
   Werk-Block diesen mitziehen. */
#view-novi-studio #novi-page-videos2-kanal .wk-liste,
#view-novi-studio #novi-page-videos2-video .wk-liste,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-liste,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-liste {
  display: flex !important; flex-direction: column !important;
  gap: 2px !important; position: sticky !important; top: 8px !important;
  max-height: calc(100vh - 90px) !important; overflow-y: auto !important;
  padding: 6px !important; border: 1px solid #E6E6EC !important;
  border-radius: 14px !important; background: #FFF !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp,
#view-novi-studio #novi-page-videos2-video .wk-lp,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp {
  display: flex !important; align-items: center !important;
  gap: 9px !important; width: 100% !important;
  padding: 8px 9px !important; border: 0 !important;
  border-radius: 9px !important; background: transparent !important;
  text-align: left !important; cursor: pointer !important;
  font-size: 13px !important; line-height: 1.3 !important;
  min-height: 38px !important; box-shadow: none !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp:hover,
#view-novi-studio #novi-page-videos2-video .wk-lp:hover,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp:hover,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp:hover {
  background: #F4F4F7 !important;
}
/* Die Nummer traegt die Kennzeichnung - so bleibt der ausgewaehlte
   Punkt auch ohne Farbe erkennbar. */
#view-novi-studio #novi-page-videos2-kanal .wk-lp-nr,
#view-novi-studio #novi-page-videos2-video .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp-nr {
  flex: 0 0 auto !important; width: 24px !important; height: 24px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; border-radius: 7px !important;
  background: #F1F1F5 !important; font-size: 11px !important;
  font-weight: 700 !important; letter-spacing: .02em !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp-name,
#view-novi-studio #novi-page-videos2-video .wk-lp-name,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp-name,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp-name {
  flex: 1 1 auto !important; min-width: 0 !important;
}
/* Der Punkt rechts: gruen wenn erledigt, rot wenn gerade dran. */
#view-novi-studio #novi-page-videos2-kanal .wk-lp-punkt,
#view-novi-studio #novi-page-videos2-video .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp-punkt {
  flex: 0 0 auto !important; width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: #D5D5DD !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-ok .wk-lp-punkt,
#view-novi-studio #novi-page-videos2-video .wk-lp.ist-ok .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-ok .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp.ist-ok .wk-lp-punkt {
  background: #16A34A !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-jetzt .wk-lp-punkt,
#view-novi-studio #novi-page-videos2-video .wk-lp.ist-jetzt .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-jetzt .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp.ist-jetzt .wk-lp-punkt {
  background: var(--spk-rot, #E2001A) !important;
}
/* Der gewaehlte Punkt. */
#view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-aktiv,
#view-novi-studio #novi-page-videos2-video .wk-lp.ist-aktiv,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-aktiv,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp.ist-aktiv {
  background: var(--spk-rot, #E2001A) !important;
  color: #FFF !important; -webkit-text-fill-color: #FFF !important;
  font-weight: 600 !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-aktiv .wk-lp-nr,
#view-novi-studio #novi-page-videos2-video .wk-lp.ist-aktiv .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-aktiv .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp.ist-aktiv .wk-lp-nr {
  background: rgba(255,255,255,.22) !important;
  color: #FFF !important; -webkit-text-fill-color: #FFF !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-aktiv .wk-lp-punkt,
#view-novi-studio #novi-page-videos2-video .wk-lp.ist-aktiv .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-aktiv .wk-lp-punkt,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp.ist-aktiv .wk-lp-punkt {
  background: rgba(255,255,255,.85) !important;
}

/* Ohne diese Zeile bliebe eine verborgene Karte stehen: das Attribut
   hidden setzt display:none nur, solange keine andere Regel display
   vorgibt - und mehrere tun das hier. */
#view-novi-studio #novi-page-videos2-kanal .wk-schritt[hidden],
#view-novi-studio #novi-page-videos2-video .wk-schritt[hidden],
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-schritt[hidden],
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-schritt[hidden] {
  display: none !important;
}

/* Die Zeile ueber der Karte: "Schritt 03 von 14". */
#view-novi-studio #novi-page-videos2-kanal .wk-buehne-kopf,
#view-novi-studio #novi-page-videos2-video .wk-buehne-kopf,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-buehne-kopf,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-buehne-kopf {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  margin: 2px 0 9px 2px !important;
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
}

/* Auf dem Telefon liegt die Liste quer: eine Leiste, die man zur Seite
   schiebt. Senkrecht waeren es vierzehn Zeilen, an denen man sich bei
   jedem Aufruf vorbeiscrollen muesste. */
@media (max-width: 900px) {
  #view-novi-studio #novi-page-videos2-kanal .wk-liste,
  #view-novi-studio #novi-page-videos2-video .wk-liste,
  :root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-liste,
  :root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-liste {
    position: static !important; flex-direction: row !important;
    max-height: none !important; overflow-x: auto !important;
    overflow-y: hidden !important; gap: 6px !important;
    padding: 6px !important; margin-bottom: 2px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #view-novi-studio #novi-page-videos2-kanal .wk-lp,
  #view-novi-studio #novi-page-videos2-video .wk-lp,
  :root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp,
  :root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp {
    flex: 0 0 auto !important; width: auto !important;
    max-width: 190px !important; min-height: 40px !important;
  }
  /* Der Name wird auf einer Zeile gehalten - sonst waere die Leiste
     doppelt so hoch, nur wegen eines langen Titels. */
  #view-novi-studio #novi-page-videos2-kanal .wk-lp-name,
  #view-novi-studio #novi-page-videos2-video .wk-lp-name,
  :root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp-name,
  :root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp-name {
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* Es steht nur noch eine Karte da - der Abstand nach unten, der frueher
   die naechste trennte, ist jetzt Leere. */
#view-novi-studio #novi-page-videos2-kanal .wk-abschnitt,
#view-novi-studio #novi-page-videos2-video .wk-abschnitt,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-abschnitt,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-abschnitt {
  margin: 0 !important;
}
/* ══ Schloesser in der Schrittliste (24.08., Wunsch) ═══

   Gesperrt heisst hier wirklich gesperrt: kein Zeiger, keine
   Hover-Farbe, gedaempfte Schrift. Ein Punkt, der sich anfuehlt wie
   ein Knopf, aber keiner ist, ist schlimmer als einer, der gar nicht
   erst danach aussieht. */

#view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-zu,
#view-novi-studio #novi-page-videos2-video .wk-lp.ist-zu,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-zu,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp.ist-zu {
  cursor: default !important; opacity: .55 !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-zu:hover,
#view-novi-studio #novi-page-videos2-video .wk-lp.ist-zu:hover,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-zu:hover,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp.ist-zu:hover {
  background: transparent !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-zu .wk-lp-nr,
#view-novi-studio #novi-page-videos2-video .wk-lp.ist-zu .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp.ist-zu .wk-lp-nr,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp.ist-zu .wk-lp-nr {
  background: #F1F1F5 !important;
  color: #A8A8B4 !important; -webkit-text-fill-color: #A8A8B4 !important;
}
/* Das Schloss steht dort, wo sonst der Zustandspunkt sitzt - gleiche
   Spalte, damit die Liste nicht wackelt, wenn eines aufgeht. */
#view-novi-studio #novi-page-videos2-kanal .wk-lp-schloss,
#view-novi-studio #novi-page-videos2-video .wk-lp-schloss,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp-schloss,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp-schloss {
  flex: 0 0 auto !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  width: 13px !important; height: 13px !important;
  color: #A8A8B4 !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-lp-schloss svg,
#view-novi-studio #novi-page-videos2-video .wk-lp-schloss svg,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .wk-lp-schloss svg,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .wk-lp-schloss svg {
  display: block !important;
}
/* ══ Projektkachel: Kanal, Thema, vier Fortschritte (25.08.) ══

   Name links und Zahl rechts in FESTER Breite - sonst haette jeder
   Balken eine andere Laenge, weil "Vertonung" laenger ist als
   "Video", und man koennte die vier nicht mehr vergleichen. */

#view-novi-studio .wk-kachel-kanal,
:root[data-skin] #view-novi-studio .wk-kachel-kanal {
  display: block !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: .09em !important;
  text-transform: uppercase !important; margin-bottom: 3px !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio .wk-projektkachel b,
:root[data-skin] #view-novi-studio .wk-projektkachel b {
  display: block !important; font-size: 14px !important;
  line-height: 1.35 !important; margin: 0 0 3px !important;
  color: #1E1E26 !important; -webkit-text-fill-color: #1E1E26 !important;
}
#view-novi-studio .wk-kachel-thema,
:root[data-skin] #view-novi-studio .wk-kachel-thema {
  display: block !important; font-size: 11px !important;
  line-height: 1.4 !important; margin-bottom: 4px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
#view-novi-studio .wk-kachel-stand,
:root[data-skin] #view-novi-studio .wk-kachel-stand {
  display: block !important; font-size: 11px !important;
  margin-bottom: 10px !important;
  color: #5A5A66 !important; -webkit-text-fill-color: #5A5A66 !important;
}

#view-novi-studio .wk-kachel-balken,
:root[data-skin] #view-novi-studio .wk-kachel-balken {
  display: flex !important; flex-direction: column !important;
  gap: 5px !important; margin-top: 2px !important;
}
#view-novi-studio .wk-kb,
:root[data-skin] #view-novi-studio .wk-kb {
  display: flex !important; align-items: center !important; gap: 8px !important;
}
#view-novi-studio .wk-kb-name,
:root[data-skin] #view-novi-studio .wk-kb-name {
  flex: 0 0 62px !important; font-size: 10px !important;
  letter-spacing: .04em !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
#view-novi-studio .wk-kb-bahn,
:root[data-skin] #view-novi-studio .wk-kb-bahn {
  flex: 1 1 auto !important; height: 5px !important; min-width: 0 !important;
  border-radius: 3px !important; background: #ECECF1 !important;
  overflow: hidden !important;
}
#view-novi-studio .wk-kb-fuell,
:root[data-skin] #view-novi-studio .wk-kb-fuell {
  display: block !important; height: 100% !important;
  border-radius: 3px !important; background: var(--spk-rot, #E2001A) !important;
  transition: width .25s ease !important;
}
/* Volle Balken gruen - so sieht man auf einen Blick, was fertig ist,
   ohne die Zahl zu lesen. */
#view-novi-studio .wk-kb-fuell[style*="width:100%"],
:root[data-skin] #view-novi-studio .wk-kb-fuell[style*="width:100%"] {
  background: #16A34A !important;
}
#view-novi-studio .wk-kb-zahl,
:root[data-skin] #view-novi-studio .wk-kb-zahl {
  flex: 0 0 34px !important; text-align: right !important;
  font-size: 10px !important; font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: #4A4A55 !important; -webkit-text-fill-color: #4A4A55 !important;
}




















/* ══ Achievements nach Entwurf (26.08.) ═══════════════════════════

   NUR Aussehen. Kein Element, keine Zahl, keine Verdrahtung. */

/* Seitenkopf mit Pokal im Ring. */
:root[data-skin] #novi-page-achievements .novi-page-header,
#novi-page-achievements .novi-page-header {
  display: flex !important; align-items: flex-start !important; gap: 20px !important;
  margin-bottom: 22px !important;
}
:root[data-skin] #novi-page-achievements .novi-page-header::before,
#novi-page-achievements .novi-page-header::before {
  content: "" !important; flex: none !important; order: -1 !important;
  width: 72px !important; height: 72px !important; border-radius: 50% !important;
  border: 1.5px solid rgba(226,0,26,.26) !important;
  box-shadow: 0 0 0 5px rgba(226,0,26,.045) !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M17 5h2.5a2.5 2.5 0 0 1 0 5H18M7 5H4.5a2.5 2.5 0 0 0 0 5H6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 32px 32px !important;
}
:root[data-skin] #novi-page-achievements .novi-page-header h2,
#novi-page-achievements .novi-page-header h2 {
  margin: 0 !important; font-size: 30px !important; font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}

/* Die Kachel je Kennzahl. */
:root[data-skin] .novi-ach-metric,
.novi-ach-metric {
  padding: 22px !important; border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 38px -28px rgba(20,20,30,.35) !important;
}
:root[data-skin] .novi-ach-metric-kopf,
.novi-ach-metric-kopf {
  display: flex !important; align-items: center !important; gap: 13px !important;
  margin-bottom: 16px !important;
}
:root[data-skin] .novi-ach-metric-kopf::before,
.novi-ach-metric-kopf::before {
  content: "" !important; flex: none !important;
  width: 40px !important; height: 40px !important; border-radius: 13px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19v-1a4.5 4.5 0 0 1 4.5-4.5h2A4.5 4.5 0 0 1 14.5 18v1'/%3E%3Ccircle cx='17' cy='9.5' r='2.4'/%3E%3Cpath d='M16 19v-.8a4 4 0 0 1 4.5-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 20px 20px !important;
  box-shadow: 0 6px 16px -8px rgba(226,0,26,.5) !important;
}
/* Ein eigenes Zeichen je Kennzahl.

   ACHTUNG: ueber die Reihenfolge zugeordnet (Abonnenten, Long Views,
   Short Views, Umsatz). Die vier Kacheln entstehen an EINER Stelle im
   Code; wer sie dort umsortiert, muss die Zeichen hier mitziehen.
   Faellt eine weg, bleibt bei den uebrigen das Personen-Zeichen von
   oben stehen - falsch waere das nicht, nur unspezifisch. */
:root[data-skin] .novi-ach-metric[data-novi-kennzahl="longViews"] .novi-ach-metric-kopf::before,
.novi-ach-metric[data-novi-kennzahl="longViews"] .novi-ach-metric-kopf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-6'/%3E%3C/svg%3E") !important;
}
:root[data-skin] .novi-ach-metric[data-novi-kennzahl="shortViews"] .novi-ach-metric-kopf::before,
.novi-ach-metric[data-novi-kennzahl="shortViews"] .novi-ach-metric-kopf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='M10.5 9.5v5l4.5-2.5z'/%3E%3C/svg%3E") !important;
}
:root[data-skin] .novi-ach-metric[data-novi-kennzahl="revenue28d"] .novi-ach-metric-kopf::before,
.novi-ach-metric[data-novi-kennzahl="revenue28d"] .novi-ach-metric-kopf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M16.5 7.5a3.5 3.5 0 0 0-3.5-2.5h-1.6a3.4 3.4 0 0 0 0 6.8h1.2a3.4 3.4 0 0 1 0 6.8H11a3.5 3.5 0 0 1-3.5-2.6'/%3E%3C/svg%3E") !important;
}
/* 26.08.: Hier standen drei Regeln, die ein Hintergrundbild auf
   .novi-ach-row-title::before setzten. Ein ::before entsteht aber
   nur mit content — und das steht fuer diesen Titel nirgends. Die
   Regeln haben nie etwas gezeichnet und sind entfallen. */
/* Und die "noch X"-Zeile im Naechstes-Ziel-Kasten. */
:root[data-skin] .novi-ach-metric[data-novi-kennzahl="longViews"] .novi-ach-next-remaining::before,
.novi-ach-metric[data-novi-kennzahl="longViews"] .novi-ach-next-remaining::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-6'/%3E%3C/svg%3E") !important; }
:root[data-skin] .novi-ach-metric[data-novi-kennzahl="shortViews"] .novi-ach-next-remaining::before,
.novi-ach-metric[data-novi-kennzahl="shortViews"] .novi-ach-next-remaining::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='M10.5 9.5v5l4.5-2.5z'/%3E%3C/svg%3E") !important; }
:root[data-skin] .novi-ach-metric[data-novi-kennzahl="revenue28d"] .novi-ach-next-remaining::before,
.novi-ach-metric[data-novi-kennzahl="revenue28d"] .novi-ach-next-remaining::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M16.5 7.5a3.5 3.5 0 0 0-3.5-2.5h-1.6a3.4 3.4 0 0 0 0 6.8h1.2a3.4 3.4 0 0 1 0 6.8H11a3.5 3.5 0 0 1-3.5-2.6'/%3E%3C/svg%3E") !important; }
:root[data-skin] .novi-ach-metric-name,
.novi-ach-metric-name {
  font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.01em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] .novi-ach-metric-stand,
.novi-ach-metric-stand {
  margin-left: auto !important;
  padding: 8px 15px !important; border-radius: 999px !important;
  background: rgba(226,0,26,.07) !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}

/* "Naechstes Ziel" als eigener heller Kasten mit Zielscheibe. */
:root[data-skin] .novi-ach-next,
.novi-ach-next {
  position: relative !important;
  padding: 20px 22px 20px 82px !important;
  border-radius: 17px !important;
  background: linear-gradient(100deg, rgba(226,0,26,.055), rgba(226,0,26,.02)) !important;
  border: 1px solid rgba(226,0,26,.14) !important;
}
:root[data-skin] .novi-ach-next::before,
.novi-ach-next::before {
  content: "" !important; position: absolute !important;
  left: 20px !important; top: 20px !important;
  width: 46px !important; height: 46px !important; border-radius: 50% !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 23px 23px !important;
  border: 1px solid rgba(226,0,26,.16) !important;
  box-shadow: 0 5px 14px -7px rgba(226,0,26,.5) !important;
}
:root[data-skin] .novi-ach-next-label,
.novi-ach-next-label {
  font-size: 11.5px !important; font-weight: 800 !important;
  letter-spacing: .11em !important; text-transform: uppercase !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] .novi-ach-next-value,
.novi-ach-next-value {
  margin-top: 4px !important; font-size: 40px !important; font-weight: 800 !important;
  letter-spacing: -.03em !important; line-height: 1.05 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] .novi-ach-next-value span,
.novi-ach-next-value span {
  font-size: .45em !important; font-weight: 700 !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}
:root[data-skin] .novi-ach-bar,
.novi-ach-bar {
  height: 8px !important; border-radius: 999px !important;
  background: #E9E9EF !important; overflow: hidden !important;
}
:root[data-skin] .novi-ach-bar.big,
.novi-ach-bar.big { height: 11px !important; margin-top: 14px !important; }
:root[data-skin] .novi-ach-bar > span,
.novi-ach-bar > span {
  display: block !important; height: 100% !important; border-radius: 999px !important;
  background: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] .novi-ach-next-row,
.novi-ach-next-row {
  display: flex !important; align-items: center !important;
  gap: 14px !important; margin-top: 14px !important; flex-wrap: wrap !important;
}
:root[data-skin] .novi-ach-next-remaining,
.novi-ach-next-remaining {
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  font-size: 14.5px !important; font-weight: 600 !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
:root[data-skin] .novi-ach-next-remaining::before,
.novi-ach-next-remaining::before {
  content: "" !important; flex: none !important;
  width: 17px !important; height: 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19v-1a4.5 4.5 0 0 1 4.5-4.5h2A4.5 4.5 0 0 1 14.5 18v1'/%3E%3Ccircle cx='17' cy='9.5' r='2.4'/%3E%3Cpath d='M16 19v-.8a4 4 0 0 1 4.5-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 17px 17px !important;
}
:root[data-skin] .novi-ach-next-eta,
.novi-ach-next-eta {
  margin-left: auto !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 9px 16px !important; border-radius: 999px !important;
  background: rgba(226,0,26,.08) !important; border: 0 !important;
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] .novi-ach-next-eta::before,
.novi-ach-next-eta::before {
  content: "" !important; flex: none !important;
  width: 15px !important; height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.4l3.4 2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 15px 15px !important;
}
:root[data-skin] .novi-ach-next-sub,
.novi-ach-next-sub {
  display: flex !important; align-items: center !important; gap: 9px !important;
  margin-top: 10px !important; font-size: 12.5px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
:root[data-skin] .novi-ach-next-sub::before,
.novi-ach-next-sub::before {
  content: "" !important; flex: none !important;
  width: 15px !important; height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 15px 15px !important;
}

/* Die Listen. */
:root[data-skin] .novi-ach-liste-kopf,
.novi-ach-liste-kopf {
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 20px 0 10px !important;
  font-size: 11.5px !important; font-weight: 800 !important;
  letter-spacing: .11em !important; text-transform: uppercase !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}
/* Zielscheibe vor "Offene Ziele", Stern vor "Erreicht" - ueber die
   Reihenfolge der beiden Listen, die im Code fest so gebaut werden. */
:root[data-skin] .novi-ach-liste-kopf::before,
.novi-ach-liste-kopf::before {
  content: "" !important; flex: none !important;
  width: 16px !important; height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 16px 16px !important;
}
:root[data-skin] .novi-ach-liste:last-of-type .novi-ach-liste-kopf::before,
.novi-ach-liste:last-of-type .novi-ach-liste-kopf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5l2.3 4.7 5.2.8-3.8 3.7.9 5.2-4.6-2.4-4.6 2.4.9-5.2L4.5 10l5.2-.8z'/%3E%3C/svg%3E") !important;
}
:root[data-skin] .novi-ach-metric-stand::before,
.novi-ach-metric-stand::before {
  content: "" !important; display: inline-block !important;
  width: 14px !important; height: 14px !important;
  margin-right: 7px !important; vertical-align: -2px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5V4.5A1.5 1.5 0 0 1 4.5 3h8l8.5 8.5-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 14px 14px !important;
}
:root[data-skin] .novi-ach-count,
.novi-ach-count {
  min-width: 22px !important; padding: 3px 8px !important; border-radius: 999px !important;
  background: #F2F2F6 !important; text-align: center !important;
  font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  color: #4A4A55 !important; -webkit-text-fill-color: #4A4A55 !important;
}
:root[data-skin] .novi-ach-row,
.novi-ach-row {
  display: flex !important; align-items: center !important; gap: 14px !important;
  padding: 13px 16px !important; margin-bottom: 9px !important;
  border-radius: 15px !important;
  background: #FFFFFF !important; border: 1px solid #EFEFF3 !important;
}
:root[data-skin] .novi-ach-badge,
.novi-ach-badge {
  flex: none !important;
  width: 34px !important; height: 34px !important; border-radius: 11px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: #F4F4F8 !important; background-image: none !important; border: 0 !important;
  font-size: 14px !important; font-weight: 800 !important;
  color: #4A4A55 !important; -webkit-text-fill-color: #4A4A55 !important;
}
/* Titel UEBER dem Balken, Notiz rechts und senkrecht mittig - so
   zeigt es der Entwurf, und so liegt es auch im Markup. Die Notiz
   steckt dort allerdings mit dem Titel in einem Kasten; display:
   contents loest den auf, dann lassen sich beide im Raster frei
   setzen. Kein Markup angefasst. */
:root[data-skin] .novi-ach-row-main,
.novi-ach-row-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 22px !important; row-gap: 7px !important;
  flex: 1 1 auto !important; min-width: 0 !important;
}
:root[data-skin] .novi-ach-row-head,
.novi-ach-row-head { display: contents !important; }
:root[data-skin] .novi-ach-row-title,
.novi-ach-row-title {
  grid-column: 1 !important; grid-row: 1 !important;
  font-size: 15px !important; font-weight: 700 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] .novi-ach-row .novi-ach-bar,
.novi-ach-row .novi-ach-bar {
  grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important;
}
:root[data-skin] .novi-ach-row-note,
.novi-ach-row-note {
  grid-column: 2 !important; grid-row: 1 / span 2 !important;
  align-self: center !important; white-space: nowrap !important;
  font-size: 13px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
/* Erreichte Marken bleiben gruen - das ist ihre Bedeutung, nicht ihre
   Farbe. */
:root[data-skin] .novi-ach-row.is-done .novi-ach-bar > span,
.novi-ach-row.is-done .novi-ach-bar > span {
  background: #16A34A !important;
}

/* Die Leerzeile mit Stern im gestrichelten Kreis. */
:root[data-skin] .novi-ach-leerzeile,
.novi-ach-leerzeile {
  display: flex !important; align-items: center !important; gap: 15px !important;
  margin: 0 !important; padding: 16px 18px !important;
  border-radius: 15px !important;
  background: #FFFFFF !important; border: 1px solid #EFEFF3 !important;
  font-size: 14px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
:root[data-skin] .novi-ach-leerzeile::before,
.novi-ach-leerzeile::before {
  content: "" !important; flex: none !important;
  width: 38px !important; height: 38px !important; border-radius: 50% !important;
  border: 1.5px dashed #D8D8E0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6C6D0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5l2.3 4.7 5.2.8-3.8 3.7.9 5.2-4.6-2.4-4.6 2.4.9-5.2L4.5 10l5.2-.8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 19px 19px !important;
}

/* ══ "Geplante Uploads" nach Entwurf (26.08.) ══════════════════════

   NUR Aussehen. Kein Knopf, keine Zeile, keine Verdrahtung.

   Der Monatskalender aus dem Entwurf ist NICHT dabei - er existiert
   auf dieser Seite nicht, und ihn zu bauen waere eine Funktion, kein
   Aussehen. */

/* Der Seitenkopf mit Wolken-Zeichen im Ring. */
:root[data-skin] #novi-page-geplant .novi-page-header,
#novi-page-geplant .novi-page-header {
  display: flex !important; align-items: center !important; gap: 20px !important;
  margin-bottom: 22px !important;
}
:root[data-skin] #novi-page-geplant .novi-page-header::before,
#novi-page-geplant .novi-page-header::before {
  content: "" !important; flex: none !important; order: -1 !important;
  width: 76px !important; height: 76px !important; border-radius: 50% !important;
  border: 1.5px solid rgba(226,0,26,.26) !important;
  box-shadow: 0 0 0 5px rgba(226,0,26,.045) !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5a4.2 4.2 0 0 1 .6-8.4 5.6 5.6 0 0 1 10.8 1.6A3.6 3.6 0 0 1 17.6 18.5z'/%3E%3Cpath d='M12 15.5v-5.5M9.5 12.5 12 10l2.5 2.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 33px 33px !important;
}
:root[data-skin] #novi-page-geplant .novi-page-header h2,
#novi-page-geplant .novi-page-header h2 {
  margin: 0 !important; font-size: 30px !important; font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-geplant .novi-page-header p,
#novi-page-geplant .novi-page-header p {
  margin: 6px 0 0 !important; font-size: 14px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}

/* Der Auto-Upload-Kasten. */
:root[data-skin] #novi-geplant-server,
#novi-geplant-server {
  padding: 22px !important; border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 38px -28px rgba(20,20,30,.35) !important;
}
:root[data-skin] #novi-geplant-server .novi-cwm-section-title,
#novi-geplant-server .novi-cwm-section-title {
  display: flex !important; align-items: center !important; gap: 12px !important;
  margin-bottom: 18px !important;
  font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-geplant-server .novi-cwm-section-title::before,
#novi-geplant-server .novi-cwm-section-title::before {
  content: "" !important; flex: none !important;
  width: 40px !important; height: 40px !important; border-radius: 13px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3Ccircle cx='16' cy='15.5' r='2.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 20px 20px !important;
  box-shadow: 0 6px 16px -8px rgba(226,0,26,.5) !important;
}

/* Die Tabelle: Kopf hell abgesetzt, Zeilen als Karten. */
:root[data-skin] #novi-geplant-server-body table,
#novi-geplant-server-body table {
  width: 100% !important; border-collapse: separate !important; border-spacing: 0 8px !important;
}
:root[data-skin] #novi-geplant-server-body thead th,
#novi-geplant-server-body thead th {
  padding: 12px 16px !important; text-align: left !important;
  background: #FAFAFC !important;
  font-size: 11.5px !important; font-weight: 800 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
  border: 0 !important; white-space: nowrap !important;
}
:root[data-skin] #novi-geplant-server-body thead th:first-child,
#novi-geplant-server-body thead th:first-child { border-radius: 12px 0 0 12px !important; }
:root[data-skin] #novi-geplant-server-body thead th:last-child,
#novi-geplant-server-body thead th:last-child { border-radius: 0 12px 12px 0 !important; }
:root[data-skin] #novi-geplant-server-body tbody td,
#novi-geplant-server-body tbody td {
  padding: 16px !important; font-size: 14px !important;
  background: #FFFFFF !important;
  border-top: 1px solid #F0F0F4 !important; border-bottom: 1px solid #F0F0F4 !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
  vertical-align: middle !important;
}
:root[data-skin] #novi-geplant-server-body tbody td:first-child,
#novi-geplant-server-body tbody td:first-child {
  border-left: 1px solid #F0F0F4 !important; border-radius: 14px 0 0 14px !important;
  font-weight: 600 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-geplant-server-body tbody td:last-child,
#novi-geplant-server-body tbody td:last-child {
  border-right: 1px solid #F0F0F4 !important; border-radius: 0 14px 14px 0 !important;
}
/* Zeichen in den ersten beiden Spalten - Uhrzeit und Kanal.

   ACHTUNG: ueber die Reihenfolge zugeordnet. Die Spalten entstehen an
   EINER Stelle im Code; wer sie dort umsortiert, muss die Zeichen hier
   mitziehen. Die uebrigen Spalten bekommen bewusst keines: ein Zeichen
   ohne klare Bedeutung ist nur Farbe. */
:root[data-skin] #novi-geplant-server-body tbody td:nth-child(1)::before,
#novi-geplant-server-body tbody td:nth-child(1)::before,
:root[data-skin] #novi-geplant-server-body tbody td:nth-child(2)::before,
#novi-geplant-server-body tbody td:nth-child(2)::before {
  content: "" !important; display: inline-block !important;
  width: 26px !important; height: 26px !important; border-radius: 8px !important;
  margin-right: 10px !important; vertical-align: -8px !important;
  background-color: rgba(226,0,26,.06) !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 15px 15px !important;
}
:root[data-skin] #novi-geplant-server-body tbody td:nth-child(1)::before,
#novi-geplant-server-body tbody td:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.4l3.4 2'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-geplant-server-body tbody td:nth-child(2)::before,
#novi-geplant-server-body tbody td:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='M10.5 9.5v5l4.5-2.5z'/%3E%3C/svg%3E") !important; }
/* Eine Zeile ohne Daten ("Noch keine Server-Uploads") traegt kein
   Zeichen - sonst stuende dort eine Uhr neben einer Absage. */
:root[data-skin] #novi-geplant-server-body tbody td[colspan]::before,
#novi-geplant-server-body tbody td[colspan]::before { content: none !important; }
:root[data-skin] #novi-geplant-server-body tbody td[colspan],
#novi-geplant-server-body tbody td[colspan] {
  text-align: center !important; padding: 34px 16px !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
  border-radius: 14px !important; border: 1px solid #F0F0F4 !important;
}

/* Die Leermeldung ueber dem Kasten. */
:root[data-skin] #novi-geplant-body .nvh2-plan-leer,
#novi-geplant-body .nvh2-plan-leer {
  margin: 0 !important; padding: 18px 20px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important; border: 1px solid #EFEFF3 !important;
  font-size: 14px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}

/* ══ Umsatzrechner: Kanalauswahl kompakter (26.08.) ════════════════

   NUR Aussehen. Kein Knopf, keine Kennung, keine Verdrahtung.

   Der Unterschied zum Entwurf war die Dichte: neben der
   "Alle Kanaele"-Spalte wurden die Karten rund 300 px breit, es passten
   nur zwei je Reihe. Im Entwurf stehen fuenf nebeneinander. */

:root[data-skin] .nvur-kanalraster,
.nvur-kanalraster {
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)) !important;
  gap: 10px !important;
}
:root[data-skin="spk"] .nvur-kanal,
:root[data-skin] .nvur-kanal,
.nvur-kanal {
  gap: 8px !important;
  padding: 13px 9px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important; background-image: none !important;
  border: 1px solid #ECECF1 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
:root[data-skin] .nvur-kanal:hover,
.nvur-kanal:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(226,0,26,.28) !important;
  box-shadow: 0 4px 14px -8px rgba(226,0,26,.45) !important;
}
:root[data-skin="spk"] .nvur-kanal.aktiv,
:root[data-skin] .nvur-kanal.aktiv,
.nvur-kanal.aktiv {
  border: 1.5px solid var(--spk-rot, #E2001A) !important;
  box-shadow: 0 0 0 3px rgba(226,0,26,.10) !important;
}
:root[data-skin] .nvur-kanal img,
:root[data-skin] .nvur-kanal-fallback,
.nvur-kanal img,
.nvur-kanal-fallback {
  width: 42px !important; height: 42px !important;
  border: 1px solid #E7E7EE !important;
}
:root[data-skin="spk"] .nvur-kanal-fallback,
:root[data-skin] .nvur-kanal-fallback,
.nvur-kanal-fallback {
  background: #F2F2F6 !important;
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
  font-size: .82rem !important;
}
/* Die kleine Fassung (in Listen) bleibt klein - sie wird von der
   Regel oben sonst mitvergroessert. */
:root[data-skin] .nvur-kanal-fallback.klein,
.nvur-kanal-fallback.klein {
  width: 26px !important; height: 26px !important; font-size: .72rem !important;
}
:root[data-skin="spk"] .nvur-kanal b,
:root[data-skin] .nvur-kanal b,
.nvur-kanal b {
  font-size: .78rem !important; line-height: 1.3 !important; font-weight: 700 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}

/* ══ Clips Upload, Schritt 3 "Auf YouTube hochladen" (26.08.) ══════

   NUR Aussehen. #novi-cu-push und #novi-cu-clear behalten Kennungen
   und Verdrahtung. */

:root[data-skin] #novi-page-clipsupload .novi-cwm-section:nth-of-type(4) .novi-cwm-section-title::before,
#novi-page-clipsupload .novi-cwm-section:nth-of-type(4) .novi-cwm-section-title::before {
  width: 42px !important; height: 42px !important; border-radius: 13px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5a4.2 4.2 0 0 1 .6-8.4 5.6 5.6 0 0 1 10.8 1.6A3.6 3.6 0 0 1 17.6 18.5z'/%3E%3Cpath d='M12 15.5v-5.5M9.5 12.5 12 10l2.5 2.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 21px 21px !important;
  box-shadow: 0 6px 16px -8px rgba(226,0,26,.5) !important;
}
/* Die Knopfreihe steht abgesetzt unter einer Linie, wie im Entwurf.
   Der Rahmen traegt kein eigenes Markup - es ist die vorhandene
   Flex-Reihe, die nur Abstand und eine Kante bekommt. */
:root[data-skin] #novi-page-clipsupload #novi-cu-push,
#novi-page-clipsupload #novi-cu-push {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 12px !important; max-width: none !important;
  padding: 16px 30px !important; border-radius: 14px !important;
  background-color: var(--spk-rot, #E2001A) !important; background-image: none !important;
  border: 1px solid var(--spk-rot, #E2001A) !important;
  font-size: 15px !important; font-weight: 800 !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 8px 22px -10px rgba(226,0,26,.7) !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-push:hover,
#novi-page-clipsupload #novi-cu-push:hover {
  background-color: #C40017 !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-push::before,
#novi-page-clipsupload #novi-cu-push::before {
  content: "" !important; flex: none !important;
  width: 21px !important; height: 21px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5a4.2 4.2 0 0 1 .6-8.4 5.6 5.6 0 0 1 10.8 1.6A3.6 3.6 0 0 1 17.6 18.5z'/%3E%3Cpath d='M12 15.5v-5.5M9.5 12.5 12 10l2.5 2.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 21px 21px !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-clear,
#novi-page-clipsupload #novi-cu-clear {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 11px !important; max-width: none !important;
  padding: 16px 26px !important; border-radius: 14px !important;
  background: #FFFFFF !important; background-image: none !important;
  border: 1px solid #DEDEE6 !important;
  font-size: 15px !important; font-weight: 700 !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
  box-shadow: none !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-clear:hover,
#novi-page-clipsupload #novi-cu-clear:hover {
  border-color: rgba(226,0,26,.35) !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-clear::before,
#novi-page-clipsupload #novi-cu-clear::before {
  content: "" !important; flex: none !important;
  width: 19px !important; height: 19px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Cpath d='M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 19px 19px !important;
}
/* Die Reihe, in der beide Knoepfe stehen, bekommt Luft und eine Kante
   nach oben. Sie traegt ihre Masse inline, deshalb !important. */
:root[data-skin] #novi-page-clipsupload #novi-cu-push,
#novi-page-clipsupload #novi-cu-push,
:root[data-skin] #novi-page-clipsupload #novi-cu-clear,
#novi-page-clipsupload #novi-cu-clear {
  margin-top: 6px !important;
}

/* ══ Clips Upload: der Prompt-Bereich (26.08.) ═════════════════════

   NUR Aussehen. Prompt-Box, Kopieren-Knopf, Antwortfeld und
   "Antwort uebernehmen" behalten Kennungen und Verdrahtung. */

/* Der Abschnittstitel bekommt das Zauberstab-Zeichen. */
:root[data-skin] #novi-page-clipsupload .novi-cwm-section:nth-of-type(3) .novi-cwm-section-title::before,
#novi-page-clipsupload .novi-cwm-section:nth-of-type(3) .novi-cwm-section-title::before {
  width: 42px !important; height: 42px !important; border-radius: 13px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 15 9'/%3E%3Cpath d='M14 4.5 15.5 3 17 4.5 15.5 6z'/%3E%3Cpath d='M18.5 8 20 6.5 21.5 8 20 9.5z'/%3E%3Cpath d='M6 5.5 7 4.5l1 1-1 1z'/%3E%3Cpath d='M16 10.5 13.5 8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 21px 21px !important;
  box-shadow: 0 6px 16px -8px rgba(226,0,26,.5) !important;
}
:root[data-skin] #novi-page-clipsupload .novi-section-sub,
#novi-page-clipsupload .novi-section-sub {
  margin: 10px 0 0 54px !important; font-size: 13.5px !important; line-height: 1.55 !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}

/* Der Prompt als eigene Karte mit Ueberschrift - die Ueberschrift
   entsteht als ::before an der Box, ohne neues Element. */
:root[data-skin] #novi-page-clipsupload #novi-cu-prompt-box,
#novi-page-clipsupload #novi-cu-prompt-box {
  position: relative !important;
  margin-top: 18px !important;
  padding: 62px 18px 18px !important;
  border-radius: 17px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  max-height: 380px !important; overflow: auto !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12.5px !important; line-height: 1.6 !important; white-space: pre-wrap !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-prompt-box::before,
#novi-page-clipsupload #novi-cu-prompt-box::before {
  content: "PROMPT" !important;
  position: sticky !important; top: -18px !important;
  display: flex !important; align-items: center !important; gap: 11px !important;
  margin: -62px -18px 16px !important; padding: 14px 18px !important;
  background: #FAFAFC !important;
  border-bottom: 1px solid #F0F0F4 !important;
  border-radius: 17px 17px 0 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: .11em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}

/* Der Kopieren-Knopf. */
:root[data-skin] #novi-page-clipsupload #novi-cu-prompt-copy,
#novi-page-clipsupload #novi-cu-prompt-copy {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 9px !important; max-width: none !important;
  padding: 11px 20px !important; border-radius: 12px !important;
  background: rgba(226,0,26,.05) !important; background-image: none !important;
  border: 1px solid rgba(226,0,26,.28) !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
  box-shadow: none !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-prompt-copy:hover,
#novi-page-clipsupload #novi-cu-prompt-copy:hover {
  background: rgba(226,0,26,.10) !important; border-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-prompt-copy svg,
#novi-page-clipsupload #novi-cu-prompt-copy svg {
  width: 16px !important; height: 16px !important; stroke: currentColor !important;
}
:root[data-skin] #novi-page-clipsupload .novi-cwm-actions,
#novi-page-clipsupload .novi-cwm-actions {
  display: flex !important; gap: 10px !important; flex-wrap: wrap !important;
  margin-top: 14px !important;
}

/* Das Antwortfeld als eigene Karte mit Ueberschrift. */
:root[data-skin] #novi-page-clipsupload #novi-cu-antwort,
#novi-page-clipsupload #novi-cu-antwort {
  width: 100% !important; min-height: 190px !important;
  margin-top: 18px !important;
  padding: 16px 18px !important; border-radius: 17px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important; line-height: 1.6 !important; resize: vertical !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-antwort:focus,
#novi-page-clipsupload #novi-cu-antwort:focus {
  outline: none !important;
  border-color: rgba(226,0,26,.40) !important;
  box-shadow: 0 0 0 3px rgba(226,0,26,.10) !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-antwort::placeholder,
#novi-page-clipsupload #novi-cu-antwort::placeholder {
  color: #A8A8B4 !important; -webkit-text-fill-color: #A8A8B4 !important;
}

/* "Antwort uebernehmen" als voller roter Knopf - im Entwurf der
   deutlichste Knopf der Seite, und das ist er auch: hier landen die
   Werte in der Tabelle. */
:root[data-skin] #novi-page-clipsupload #novi-cu-antwort-btn,
#novi-page-clipsupload #novi-cu-antwort-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 11px !important; max-width: none !important;
  padding: 14px 28px !important; border-radius: 13px !important;
  background-color: var(--spk-rot, #E2001A) !important; background-image: none !important;
  border: 1px solid var(--spk-rot, #E2001A) !important;
  font-size: 14px !important; font-weight: 800 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 6px 18px -8px rgba(226,0,26,.6) !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-antwort-btn:hover,
#novi-page-clipsupload #novi-cu-antwort-btn:hover {
  background-color: #C40017 !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-antwort-btn::before,
#novi-page-clipsupload #novi-cu-antwort-btn::before {
  content: "" !important; flex: none !important;
  width: 18px !important; height: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 13.6 9l5.4 1.6-5.4 1.6L12 17.6l-1.6-5.4L5 10.6 10.4 9z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 18px 18px !important;
}

/* ══ Clips Upload, Schritt 2 "Clips hochladen" (26.08.) ════════════

   NUR Aussehen. #novi-cu-pick, das versteckte
   Dateifeld, die Fortschrittsanzeige und die Tabelle bleiben. */

/* 27.08. (Wunsch): Das Wolken-Zeichen hing am Titel "3 - Clips
   hochladen", der entfallen ist; die Titel-Basis-Regeln beschrieben
   ein Feld, das es nicht mehr gibt. Beides zeigte ins Leere und ist
   deshalb hier entfallen - Regeln ohne Ziel sind stiller Ballast. */

/* Videovorschau in Schritt 12: der Player fuellt die Karte, dunkler
   Grund hinter dem Bild, runde Ecken wie die Karten drumherum. */
:root[data-skin] #view-novi-studio .wk-videovorschau video,
#view-novi-studio .wk-videovorschau video {
  display: block; width: 100%; max-width: 780px;
  border-radius: 14px; border: 1px solid #E3E3E8;
  background: #000; margin: 12px 0 4px;
}

/* Der "Generate Clips"-Knopf: gross und mittig, allein auf seiner
   Karte. Nur Groesse und Lage - Farbe und Form kommen weiter aus dem
   Skin, damit er wie jeder andere Hauptknopf aussieht. */
:root[data-skin] #novi-page-clipsupload .novi-cu-opus-btn,
#novi-page-clipsupload .novi-cu-opus-btn {
  /* Gemessen: der Skin macht den Knopf zu inline-flex - dabei bleibt
     "margin: 0 auto" wirkungslos und er klebte links. Erst als Block
     im Fluss (flex) zentriert die Auto-Aussenluft wirklich. */
  display: flex !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 20px 30px !important;
  font-size: 17px !important;
  gap: 10px !important;
}
:root[data-skin] #novi-page-clipsupload .novi-cu-opus-btn svg,
#novi-page-clipsupload .novi-cu-opus-btn svg {
  width: 18px !important; height: 18px !important;
}
:root[data-skin] #novi-page-clipsupload .novi-cu-warnung,
#novi-page-clipsupload .novi-cu-warnung {
  color: var(--spk-rot, #E2001A) !important;
  -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
  font-weight: 600 !important;
}

/* "Videos auswaehlen" als gestrichelte Ablage-Flaeche. */
:root[data-skin] #novi-page-clipsupload #novi-cu-pick,
#novi-page-clipsupload #novi-cu-pick {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 12px !important; max-width: none !important; min-width: 280px !important;
  padding: 18px 26px !important; border-radius: 16px !important;
  background: rgba(226,0,26,.03) !important; background-image: none !important;
  border: 1.5px dashed rgba(226,0,26,.45) !important;
  font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
  box-shadow: none !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-pick:hover,
#novi-page-clipsupload #novi-cu-pick:hover {
  background: rgba(226,0,26,.07) !important;
  border-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-pick::before,
#novi-page-clipsupload #novi-cu-pick::before {
  content: "" !important; flex: none !important;
  width: 22px !important; height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='M10.5 9.5v5l4.5-2.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 22px 22px !important;
}

/* Die Tabelle. */
:root[data-skin] #novi-page-clipsupload .kz-table,
#novi-page-clipsupload .kz-table {
  width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
  border-radius: 16px !important; overflow: hidden !important;
  border: 1px solid #EFEFF3 !important;
}
:root[data-skin] #novi-page-clipsupload .kz-table thead th,
#novi-page-clipsupload .kz-table thead th {
  padding: 14px 16px !important; text-align: left !important;
  background: rgba(226,0,26,.045) !important;
  border-bottom: 1px solid rgba(226,0,26,.14) !important;
  font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
  white-space: nowrap !important;
}
/* Ein Zeichen je Spaltenkopf.

   ACHTUNG: die Zuordnung laeuft ueber die REIHENFOLGE. Die sechs
   Koepfe stehen an genau EINER Stelle im Code untereinander - wer sie
   dort umsortiert, muss die Zeichen hier mitziehen. */
:root[data-skin] #novi-page-clipsupload .kz-table thead th::before,
#novi-page-clipsupload .kz-table thead th::before {
  content: "" !important; display: inline-block !important;
  width: 15px !important; height: 15px !important;
  margin-right: 9px !important; vertical-align: -3px !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 15px 15px !important;
}
:root[data-skin] #novi-page-clipsupload .kz-table thead th:nth-child(1)::before,
#novi-page-clipsupload .kz-table thead th:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/%3E%3Cpath d='M13.5 3v5.5H19'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-clipsupload .kz-table thead th:nth-child(2)::before,
#novi-page-clipsupload .kz-table thead th:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5V5h14v1.5M12 5v14M9 19h6'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-clipsupload .kz-table thead th:nth-child(3)::before,
#novi-page-clipsupload .kz-table thead th:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-clipsupload .kz-table thead th:nth-child(4)::before,
#novi-page-clipsupload .kz-table thead th:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5V4.5A1.5 1.5 0 0 1 4.5 3h8l8.5 8.5-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-clipsupload .kz-table thead th:nth-child(5)::before,
#novi-page-clipsupload .kz-table thead th:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-clipsupload .kz-table thead th:nth-child(6)::before,
#novi-page-clipsupload .kz-table thead th:nth-child(6)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V12M12 20V5M19 20v-5'/%3E%3C/svg%3E") !important; }
/* Die letzte Spalte traegt keine Beschriftung - sie bekommt auch kein
   Zeichen, sonst stuende dort eines ohne Wort. */
:root[data-skin] #novi-page-clipsupload .kz-table thead th:nth-child(7)::before,
#novi-page-clipsupload .kz-table thead th:nth-child(7)::before { content: none !important; }

:root[data-skin] #novi-page-clipsupload .kz-table tbody td,
#novi-page-clipsupload .kz-table tbody td {
  padding: 16px !important; font-size: 14px !important;
  border-bottom: 1px solid #F4F4F8 !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
/* Die Leermeldung mittig und mit Gewicht - im Entwurf ist sie eine
   Aussage, kein Nebensatz. */
:root[data-skin] #novi-page-clipsupload .kz-table tbody td[colspan],
#novi-page-clipsupload .kz-table tbody td[colspan] {
  padding: 42px 16px !important; text-align: center !important;
  font-size: 15px !important; font-weight: 700 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
  border-bottom: 0 !important;
}
:root[data-skin] #novi-page-clipsupload .kz-table tbody td[colspan]::before,
#novi-page-clipsupload .kz-table tbody td[colspan]::before {
  content: "" !important; display: block !important;
  width: 62px !important; height: 62px !important; margin: 0 auto 16px !important;
  border-radius: 18px !important;
  background-color: rgba(226,0,26,.06) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='M10.5 9.5v5l4.5-2.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 28px 28px !important;
}

/* ══ Clips Upload: Kanalauswahl (26.08., nach Entwurf) ═════════════

   NUR Aussehen. data-cu-prof, der Klickweg, der Akzentstreifen je Kanal
   und die Warnung fuer Kanaele ohne Datenbank-Kennung bleiben. */

:root[data-skin] #novi-page-clipsupload .novi-profiles-grid,
#novi-page-clipsupload .novi-profiles-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)) !important;
  gap: 14px !important;
}
:root[data-skin] #novi-page-clipsupload .novi-profile-card,
#novi-page-clipsupload .novi-profile-card {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-start !important;
  text-align: center !important;
  padding: 16px 16px 14px !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  border: 1px solid #ECECF1 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 8px 22px -16px rgba(20,20,30,.4) !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
:root[data-skin] #novi-page-clipsupload .novi-profile-card:hover,
#novi-page-clipsupload .novi-profile-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(226,0,26,.28) !important;
  box-shadow: 0 2px 4px rgba(20,20,30,.05), 0 14px 32px -18px rgba(226,0,26,.4) !important;
}
:root[data-skin] #novi-page-clipsupload .novi-profile-card-bild,
#novi-page-clipsupload .novi-profile-card-bild {
  width: 76px !important; height: 76px !important; flex: none !important;
  border-radius: 50% !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #F2F2F6 !important; border: 1px solid #E7E7EE !important;
}
:root[data-skin] #novi-page-clipsupload .novi-profile-card-bild img,
#novi-page-clipsupload .novi-profile-card-bild img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
:root[data-skin] #novi-page-clipsupload .novi-profile-card-bild > i,
#novi-page-clipsupload .novi-profile-card-bild > i {
  font-style: normal !important; font-size: 22px !important; font-weight: 700 !important;
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
}
:root[data-skin] #novi-page-clipsupload .novi-profile-card-name,
#novi-page-clipsupload .novi-profile-card-name {
  margin-top: 12px !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-clipsupload .novi-profile-card-meta,
#novi-page-clipsupload .novi-profile-card-meta {
  margin-top: 5px !important;
}
:root[data-skin] #novi-page-clipsupload .novi-profile-card-meta > span:first-child,
#novi-page-clipsupload .novi-profile-card-meta > span:first-child {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  font-size: 12.5px !important; line-height: 1.4 !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}

/* ══ Clips Upload: die Kanal- und Einstellungszeile ════════════════ */
:root[data-skin] #novi-page-clipsupload .novi-cwm-section,
#novi-page-clipsupload .novi-cwm-section {
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 38px -28px rgba(20,20,30,.35) !important;
}
:root[data-skin] #novi-page-clipsupload .novi-cwm-section-title,
#novi-page-clipsupload .novi-cwm-section-title {
  display: flex !important; align-items: center !important; gap: 10px !important;
  font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-clipsupload .novi-cwm-section-title::before,
#novi-page-clipsupload .novi-cwm-section-title::before {
  content: "" !important; flex: none !important;
  width: 4px !important; height: 17px !important; border-radius: 2px !important;
  background: var(--spk-rot, #E2001A) !important;
}

/* Die Kanalzeile: Name mit Zeichen, Verbindung gruen, Datum mit
   Kalenderzeichen, "Kanal wechseln" abgesetzt rechts. */
:root[data-skin] #novi-page-clipsupload .novi-gd-row,
#novi-page-clipsupload .novi-gd-row {
  display: flex !important; align-items: center !important;
  gap: 14px !important; flex-wrap: wrap !important;
}
:root[data-skin] #novi-page-clipsupload .novi-gd-row > .novi-status-pill.active,
#novi-page-clipsupload .novi-gd-row > .novi-status-pill.active {
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  padding: 11px 18px !important; border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E4EC !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-clipsupload .novi-gd-row > .novi-status-pill.active::before,
#novi-page-clipsupload .novi-gd-row > .novi-status-pill.active::before {
  content: "" !important; flex: none !important;
  width: 17px !important; height: 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19v-1a4.5 4.5 0 0 1 4.5-4.5h2A4.5 4.5 0 0 1 14.5 18v1'/%3E%3Ccircle cx='17' cy='9.5' r='2.4'/%3E%3Cpath d='M16 19v-.8a4 4 0 0 1 4.5-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 17px 17px !important;
}
/* Die Verbindungspille traegt ihre Farben INLINE (helles Gruen auf
   dunklem Grund, noch aus der dunklen Fassung) - auf weiss war sie
   kaum lesbar. Aussage bleibt, Farben werden lesbar. */
:root[data-skin] #novi-page-clipsupload #novi-cu-verbindung .novi-status-pill.ok,
#novi-page-clipsupload #novi-cu-verbindung .novi-status-pill.ok {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 11px 17px !important; border-radius: 999px !important;
  background: rgba(22,163,74,.10) !important;
  border: 1px solid rgba(22,163,74,.24) !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  color: #15803D !important; -webkit-text-fill-color: #15803D !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-verbindung .novi-field-hint,
#novi-page-clipsupload #novi-cu-verbindung .novi-field-hint {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  margin-left: 10px !important; font-size: 13px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-verbindung .novi-field-hint::before,
#novi-page-clipsupload #novi-cu-verbindung .novi-field-hint::before {
  content: "" !important; flex: none !important;
  width: 16px !important; height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 16px 16px !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-wechseln,
#novi-page-clipsupload #novi-cu-wechseln {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 10px !important; margin-left: auto !important;
  padding: 12px 22px !important; border-radius: 13px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(226,0,26,.35) !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
  box-shadow: 0 4px 14px -8px rgba(226,0,26,.5) !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-wechseln:hover,
#novi-page-clipsupload #novi-cu-wechseln:hover {
  background: rgba(226,0,26,.05) !important; border-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-wechseln::before,
#novi-page-clipsupload #novi-cu-wechseln::before {
  content: "" !important; flex: none !important;
  width: 17px !important; height: 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 0-13.7-5.2L4 8.5'/%3E%3Cpath d='M4 4.5v4h4'/%3E%3Cpath d='M4 12.5a8 8 0 0 0 13.7 5.2L20 15.5'/%3E%3Cpath d='M20 19.5v-4h-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 17px 17px !important;
}

/* Die Einstellungszeile darunter. */
:root[data-skin] #novi-page-clipsupload #novi-cu-einst,
#novi-page-clipsupload #novi-cu-einst {
  display: flex !important; align-items: center !important;
  gap: 18px !important; flex-wrap: wrap !important;
  margin-top: 18px !important; padding-top: 18px !important;
  border-top: 1px solid #F0F0F4 !important;
}
:root[data-skin] #novi-page-clipsupload .novi-cu-serie-titel,
#novi-page-clipsupload .novi-cu-serie-titel {
  display: flex !important; align-items: center !important; gap: 12px !important;
  font-size: 12.5px !important; font-weight: 800 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-clipsupload .novi-cu-serie-titel::before,
#novi-page-clipsupload .novi-cu-serie-titel::before {
  content: "" !important; flex: none !important;
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M21.5 12h-3M5.5 12h-3M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1M18.7 18.7l-2.1-2.1M7.4 7.4L5.3 5.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 19px 19px !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-einst > label,
#novi-page-clipsupload #novi-cu-einst > label {
  display: flex !important; flex-direction: column !important; gap: 6px !important;
  font-size: 12.5px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-kategorie,
#novi-page-clipsupload #novi-cu-kategorie {
  padding: 12px 15px !important; border-radius: 13px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(226,0,26,.32) !important;
  font-size: 14.5px !important; font-weight: 500 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
  cursor: pointer !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-einst > .novi-field-hint,
#novi-page-clipsupload #novi-cu-einst > .novi-field-hint {
  margin-left: auto !important; font-size: 13px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
:root[data-skin] #novi-page-clipsupload #novi-cu-einst > .novi-field-hint b,
#novi-page-clipsupload #novi-cu-einst > .novi-field-hint b {
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}

/* ══ J.A.R.V.I.S.-Kopfleiste nach Entwurf (26.08.) ═════════════════

   NUR Aussehen. Bereichswechsler, Zahnrad, Hilfe, "Abmelden" und die
   Kontoanzeige behalten Kennungen und Verdrahtung. */

:root[data-skin] #view-jarvis > .view-header,
#view-jarvis > .view-header {
  position: relative !important;
  align-items: center !important;
  gap: 16px !important;
  /* 26.08.: auto statt fester Raender - mit max-width 1040px klebte
     die Leiste in breiten Fenstern links, waehrend die Kacheln
     darunter zentrieren. calc haelt die 16px Randluft von vorher. */
  margin: 14px auto 22px !important;
  width: calc(100% - 32px) !important;
  padding: 12px 16px !important;
  border-radius: 22px !important;
  background: linear-gradient(100deg, #C40017, #E2001A 42%, #F2273F) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 34px -14px rgba(226,0,26,.65) !important;
  overflow: hidden !important;
}

/* Der Bereichswechsler links als helles Kaestchen. */
:root[data-skin] #view-jarvis > .view-header .back-btn,
#view-jarvis > .view-header .back-btn {
  width: 44px !important; height: 44px !important; padding: 0 !important; flex: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.17) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.35) !important;
  font-size: 0 !important;
}
:root[data-skin] #view-jarvis > .view-header .back-btn svg,
#view-jarvis > .view-header .back-btn svg {
  width: 21px !important; height: 21px !important; stroke: #FFFFFF !important;
}

/* Das Zeiger-Zeichen entfaellt im Entwurf. Ausgeblendet, NICHT
   entfernt - es traegt aria-hidden, also keine Auskunft, und laesst
   sich jederzeit zurueckholen. Die Farbe steht im style-Attribut,
   deshalb braucht es !important. */
:root[data-skin] #view-jarvis > .view-header .nvds-kopf-ikon,
#view-jarvis > .view-header .nvds-kopf-ikon {
  display: none !important;
}

:root[data-skin] #view-jarvis > .view-header h1,
#view-jarvis > .view-header h1 {
  margin: 0 !important; font-size: 23px !important; font-weight: 800 !important;
  letter-spacing: .06em !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}

/* Konto und "Abmelden" ruecken zusammen in die Mitte. */
:root[data-skin] #view-jarvis > .view-header .jvs-auth-ecke,
#view-jarvis > .view-header .jvs-auth-ecke {
  margin-left: auto !important; margin-right: auto !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  flex-wrap: wrap !important;
}
:root[data-skin] #view-jarvis > .view-header .jvs-auth-konto,
#view-jarvis > .view-header .jvs-auth-konto {
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  padding: 9px 17px 9px 14px !important; border-radius: 999px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  font-size: 13.5px !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
:root[data-skin] #view-jarvis > .view-header .jvs-auth-konto::before,
#view-jarvis > .view-header .jvs-auth-konto::before {
  content: "" !important; flex: none !important;
  width: 17px !important; height: 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 20v-1a5 5 0 0 1 5-5h3a5 5 0 0 1 5 5v1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 17px 17px !important;
}
:root[data-skin] #view-jarvis > .view-header .jvs-auth-ecke button,
#view-jarvis > .view-header .jvs-auth-ecke button {
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  padding: 10px 20px 10px 16px !important; border-radius: 999px !important;
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  font-size: 13.5px !important; font-weight: 700 !important; cursor: pointer !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.35) !important;
}
:root[data-skin] #view-jarvis > .view-header .jvs-auth-ecke button:hover,
#view-jarvis > .view-header .jvs-auth-ecke button:hover {
  background: rgba(255,255,255,.34) !important;
}
/* 26.08.: NUR am Abmelden-Knopf. Die Ecke wird zustandsabhaengig
   gefuellt: angemeldet steht dort "Abmelden", abgemeldet "Anmelden"
   und "Konto erstellen". Vorher traf die Regel jeden Knopf — auf dem
   Anmeldebildschirm trug "Anmelden" also ein Abmelde-Symbol. */
:root[data-skin] #view-jarvis > .view-header .jvs-auth-ecke button[data-jvs-auth="logout"]::before,
#view-jarvis > .view-header .jvs-auth-ecke button[data-jvs-auth="logout"]::before {
  content: "" !important; flex: none !important;
  width: 17px !important; height: 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8'/%3E%3Cpath d='M16 15l4-3-4-3M20 12H9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 17px 17px !important;
}
/* "Anmelden" bekommt denselben Rahmen, aber den Pfeil HINEIN — das
   ist die Gegenbewegung, nicht dasselbe Zeichen. */
:root[data-skin] #view-jarvis > .view-header .jvs-auth-ecke button[data-jvs-auth="login"]::before,
#view-jarvis > .view-header .jvs-auth-ecke button[data-jvs-auth="login"]::before {
  content: "" !important; flex: none !important;
  width: 17px !important; height: 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-8'/%3E%3Cpath d='M8 15l4-3-4-3M12 12H3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 17px 17px !important;
}

/* Zahnrad und Hilfe als runde Knoepfe rechts. */
:root[data-skin] #view-jarvis > .view-header .novi-hilfe-knopf,
#view-jarvis > .view-header .novi-hilfe-knopf {
  width: 42px !important; height: 42px !important; padding: 0 !important; flex: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  font-size: 16px !important; font-weight: 700 !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
:root[data-skin] #view-jarvis > .view-header .novi-hilfe-knopf:hover,
#view-jarvis > .view-header .novi-hilfe-knopf:hover {
  background: rgba(255,255,255,.26) !important;
  border-color: rgba(255,255,255,.75) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
:root[data-skin] #view-jarvis > .view-header .novi-hilfe-knopf svg,
#view-jarvis > .view-header .novi-hilfe-knopf svg {
  width: 19px !important; height: 19px !important; stroke: #FFFFFF !important;
}

/* ══ Sprech-Zeile der Startseite (26.08.) ══════════════════════════ */
:root[data-skin] #view-jarvis .jvs-sprech,
#view-jarvis .jvs-sprech {
  display: flex !important; align-items: center !important;
  gap: 18px !important; flex-wrap: wrap !important;
  margin-top: 22px !important; padding: 16px 22px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 14px 34px -26px rgba(20,20,30,.35) !important;
}
:root[data-skin="spk"] #view-jarvis .jvs-sprech-kopf,
:root[data-skin] #view-jarvis .jvs-sprech-kopf,
#view-jarvis .jvs-sprech-kopf {
  display: flex !important; align-items: center !important; gap: 9px !important;
  font-size: 15px !important; font-weight: 800 !important; letter-spacing: .02em !important;
  margin: 0 !important; padding-right: 18px !important;
  border-right: 1px solid #EDEDF2 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
/* Der Trennpunkt wird zum roten Punkt, wie im Entwurf. */
:root[data-skin] #view-jarvis .jvs-sprech-kopf > span,
#view-jarvis .jvs-sprech-kopf > span {
  font-size: 0 !important; width: 8px !important; height: 8px !important;
  border-radius: 50% !important; flex: none !important;
  background: var(--spk-rot, #E2001A) !important;
}
/* Der Zustand gruen - das ist eine echte Auskunft der Zeile selbst. */
:root[data-skin="spk"] #view-jarvis .jvs-sprech-kopf b,
:root[data-skin] #view-jarvis .jvs-sprech-kopf b,
#view-jarvis .jvs-sprech-kopf b {
  font-size: 14px !important; font-weight: 800 !important; letter-spacing: .06em !important;
  color: #16A34A !important; -webkit-text-fill-color: #16A34A !important;
}
:root[data-skin] #view-jarvis .jvs-sprech-reihe,
#view-jarvis .jvs-sprech-reihe {
  display: flex !important; align-items: center !important; gap: 14px !important;
  flex: 1 1 auto !important; min-width: 0 !important;
}
:root[data-skin] #view-jarvis .jvs-sprech-mik,
#view-jarvis .jvs-sprech-mik {
  width: 44px !important; height: 44px !important; flex: none !important;
  border-radius: 50% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(226,0,26,.06) !important;
  border: 1px solid rgba(226,0,26,.14) !important;
  color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #view-jarvis .jvs-sprech-mik svg,
#view-jarvis .jvs-sprech-mik svg {
  width: 20px !important; height: 20px !important;
  stroke: var(--spk-rot, #E2001A) !important;
}

/* ══ J.A.R.V.I.S.-Startseite nach Entwurf (26.08.) ═════════════════

   Es faellt nichts weg: kein Knopf, kein Datenattribut, keine
   Verdrahtung. data-jvs-mini und data-jvs bleiben unveraendert - an
   ihnen haengt die ganze Klick- und Tastaturlogik. */

/* ── Die Uhrkarte ──────────────────────────────────────────────── */
:root[data-skin] #view-jarvis .jvs-uhrzeile,
#view-jarvis .jvs-uhrzeile {
  position: relative !important;
  display: flex !important; align-items: center !important;
  gap: 18px !important; flex-wrap: wrap !important;
  padding: 20px 24px 20px 30px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 38px -26px rgba(20,20,30,.35) !important;
  overflow: hidden !important;
}
/* Der rote Balken links, wie im Entwurf. */
:root[data-skin] #view-jarvis .jvs-uhrzeile::after,
#view-jarvis .jvs-uhrzeile::after {
  content: "" !important; position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important; width: 6px !important;
  background: var(--spk-rot, #E2001A) !important;
}
/* Das Zeigersymbol im Kreis - ohne ein einziges neues Element. */
:root[data-skin] #view-jarvis .jvs-uhrzeile::before,
#view-jarvis .jvs-uhrzeile::before {
  content: "" !important; flex: none !important; order: -1 !important;
  width: 62px !important; height: 62px !important; border-radius: 50% !important;
  border: 1.5px solid rgba(226,0,26,.30) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.4l3.4 2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 28px 28px !important;
}
:root[data-skin] #view-jarvis .jvs-uhrzeile > div:first-of-type,
#view-jarvis .jvs-uhrzeile > div:first-of-type {
  display: flex !important; flex-direction: column !important; line-height: 1.15 !important;
}
:root[data-skin="spk"] #view-jarvis #jvs-uhr,
:root[data-skin] #view-jarvis #jvs-uhr,
#view-jarvis #jvs-uhr {
  font-size: 42px !important; font-weight: 800 !important;
  letter-spacing: -.02em !important; font-variant-numeric: tabular-nums !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #view-jarvis #jvs-datum,
#view-jarvis #jvs-datum {
  font-size: 13.5px !important; margin-top: 4px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}

/* Glocke und Stummschalter als runde Zeichenknoepfe. */
:root[data-skin="spk"] #view-jarvis .jvs-glocke,
:root[data-skin="spk"] #view-jarvis .jvs-stumm,
:root[data-skin] #view-jarvis .jvs-glocke,
:root[data-skin] #view-jarvis .jvs-stumm,
#view-jarvis .jvs-glocke,
#view-jarvis .jvs-stumm {
  position: relative !important;
  width: 46px !important; height: 46px !important; padding: 0 !important; flex: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(226,0,26,.06) !important; background-image: none !important;
  border: 1px solid rgba(226,0,26,.14) !important;
  color: var(--spk-rot, #E2001A) !important;
  /* Der Text bleibt im Markup und fuer Vorleseprogramme lesbar - er
     wird nur nicht mehr gedruckt. Im Entwurf tragen beide Knoepfe
     ausschliesslich ihr Zeichen. */
  font-size: 0 !important; line-height: 0 !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease !important;
}
:root[data-skin] #view-jarvis .jvs-glocke:hover,
:root[data-skin] #view-jarvis .jvs-stumm:hover,
#view-jarvis .jvs-glocke:hover,
#view-jarvis .jvs-stumm:hover {
  background: rgba(226,0,26,.12) !important;
  border-color: rgba(226,0,26,.30) !important;
}
:root[data-skin="spk"] #view-jarvis .jvs-glocke svg,
:root[data-skin="spk"] #view-jarvis .jvs-stumm svg,
:root[data-skin] #view-jarvis .jvs-glocke svg,
:root[data-skin] #view-jarvis .jvs-stumm svg,
#view-jarvis .jvs-glocke svg,
#view-jarvis .jvs-stumm svg {
  width: 20px !important; height: 20px !important;
  stroke: var(--spk-rot, #E2001A) !important; fill: none !important;
}
/* Die Zahl an der Glocke bleibt sichtbar - sie ist eine Auskunft, kein
   Schmuck. Sie braucht ihre Schriftgroesse zurueck. */
:root[data-skin] #view-jarvis .jvs-glocke em,
#view-jarvis .jvs-glocke em {
  font-size: 10px !important; line-height: 1 !important;
}
/* Ist der Ton aus, faerbt sich der Knopf grau - so sieht man den
   Zustand, den frueher das Wort trug. */
:root[data-skin] #view-jarvis .jvs-stumm.ist-stumm,
#view-jarvis .jvs-stumm.ist-stumm {
  background: #F2F2F6 !important; border-color: #E4E4EC !important;
}
:root[data-skin="spk"] #view-jarvis .jvs-stumm.ist-stumm svg,
:root[data-skin] #view-jarvis .jvs-stumm.ist-stumm svg,
#view-jarvis .jvs-stumm.ist-stumm svg {
  stroke: #9A9AA6 !important;
}

/* SYSTEM ONLINE rechts. */
:root[data-skin] #view-jarvis .jvs-puls,
#view-jarvis .jvs-puls {
  margin-left: auto !important;
  width: 10px !important; height: 10px !important; border-radius: 50% !important; flex: none !important;
  background: var(--spk-rot, #E2001A) !important;
}
:root[data-skin="spk"] #view-jarvis .jvs-online,
:root[data-skin] #view-jarvis .jvs-online,
#view-jarvis .jvs-online {
  margin-left: 0 !important;
  font-size: 13px !important; font-weight: 800 !important; letter-spacing: .09em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}

/* ── Die Bereichskacheln ───────────────────────────────────────── */
:root[data-skin] #view-jarvis .novi-bk-buehne,
#view-jarvis .novi-bk-buehne {
  margin: 26px 0 8px !important;
}
/* "BEREICHE" als Ueberschrift mit rotem Strich - ohne neues Element. */
:root[data-skin] #view-jarvis .novi-bk-buehne::before,
#view-jarvis .novi-bk-buehne::before {
  content: "BEREICHE" !important; display: flex !important; align-items: center !important;
  gap: 10px !important; margin-bottom: 14px !important;
  font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: .13em !important;
  color: #4A4A55 !important; -webkit-text-fill-color: #4A4A55 !important;
  border-left: 4px solid var(--spk-rot, #E2001A) !important;
  padding-left: 11px !important; line-height: 1.1 !important;
}
:root[data-skin] #view-jarvis .novi-bk-raster,
#view-jarvis .novi-bk-raster {
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)) !important;
  gap: 16px !important;
}
:root[data-skin] #view-jarvis .novi-bk,
:root[data-skin] #view-novi-studio #view-jarvis .novi-bk,
#view-jarvis .novi-bk {
  position: relative !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; justify-content: flex-start !important;
  gap: 0 !important; text-align: left !important;
  padding: 20px 46px 18px 20px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 14px 34px -26px rgba(20,20,30,.35) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
:root[data-skin] #view-jarvis .novi-bk:hover,
#view-jarvis .novi-bk:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(226,0,26,.26) !important;
  box-shadow: 0 2px 4px rgba(20,20,30,.05), 0 18px 40px -22px rgba(226,0,26,.35) !important;
}
:root[data-skin] #view-jarvis .novi-bk-ikon,
:root[data-skin="spk"] #view-jarvis .novi-bk-ikon,
#view-jarvis .novi-bk-ikon {
  width: 56px !important; height: 56px !important; flex: none !important;
  border-radius: 17px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(226,0,26,.07) !important; background-image: none !important;
  border: 1px solid rgba(226,0,26,.13) !important;
  box-shadow: 0 6px 18px -8px rgba(226,0,26,.5) !important;
  margin-bottom: 16px !important;
}
:root[data-skin] #view-jarvis .novi-bk-ikon svg,
:root[data-skin="spk"] #view-jarvis .novi-bk-ikon svg,
#view-jarvis .novi-bk-ikon svg {
  width: 26px !important; height: 26px !important;
  stroke: var(--spk-rot, #E2001A) !important; fill: none !important;
}
:root[data-skin] #view-jarvis .novi-bk-name,
:root[data-skin="spk"] #view-jarvis .novi-bk-name,
#view-jarvis .novi-bk-name {
  font-size: 17px !important; font-weight: 800 !important; line-height: 1.25 !important;
  letter-spacing: -.01em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #view-jarvis .novi-bk-sub,
#view-jarvis .novi-bk-sub {
  display: block !important; margin-top: 5px !important;
  font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.45 !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}
/* Der Winkel rechts - reine Zierde, die Flaeche IST schon der Knopf. */
:root[data-skin] #view-jarvis .novi-bk::after,
#view-jarvis .novi-bk::after {
  content: "" !important; position: absolute !important;
  right: 18px !important; top: 50% !important; margin-top: -8px !important;
  width: 10px !important; height: 16px !important; pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: contain !important;
}
:root[data-skin] #view-jarvis .novi-bk:hover::after,
#view-jarvis .novi-bk:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

/* ══ "Deine Woche": Kacheln etwas breiter (26.08.) ═════════════════
   In der Vorschau gesehen: bei sechs Kacheln wurde jede so schmal,
   dass eine lange Beschriftung auf drei Zeilen brach. Lieber
   umbrechen als Beschriftungen zerlegen. (Seit 06.09. sind es
   fuenf; die spaetere Regel weiter unten gewinnt ohnehin.) */
:root[data-skin] #novi-page-overview #novi-woche-panel .nvwr-reihe,
#novi-page-overview #novi-woche-panel .nvwr-reihe {
  grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)) !important;
}
:root[data-skin] #novi-page-overview .nvwr-fakt span,
#novi-page-overview .nvwr-fakt span {
  line-height: 1.3 !important; hyphens: auto !important;
}
/* Das Sinnbild etwas kleiner - der gewonnene Platz geht an die
   Beschriftung, die sonst dreizeilig bricht. */
:root[data-skin] #novi-page-overview .nvwr-fakt::before,
#novi-page-overview .nvwr-fakt::before {
  width: 30px !important; height: 30px !important; border-radius: 10px !important;
  background-size: 16px 16px !important;
}

/* ══ "Monatsziel Verfolger" nach Entwurf (26.08.) ══════════════════

   NUR Aussehen. Am Markup aendert sich nichts - keine Zahl, kein
   Balken, kein Klickziel. Die ganze Kachel bleibt der Knopf ins
   Archiv. */

:root[data-skin] #novi-page-overview #nvh2-ziel-panel,
#novi-page-overview #nvh2-ziel-panel {
  padding: 22px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 38px -26px rgba(20,20,30,.35) !important;
}

/* Kopfzeile: Zeichen links, "Archiv oeffnen" als Knopf rechts. */
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .nvarch-labelzeile,
#novi-page-overview #nvh2-ziel-panel .nvarch-labelzeile {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 14px !important;
  margin-bottom: 18px !important;
  font-size: 14px !important; font-weight: 800 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .nvarch-labelzeile::before,
#novi-page-overview #nvh2-ziel-panel .nvarch-labelzeile::before {
  content: "" !important; flex: none !important; order: -1 !important;
  width: 44px !important; height: 44px !important; border-radius: 14px !important;
  margin-right: 2px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5 9 11l3.5 3.5L20 7'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 22px 22px !important;
  box-shadow: 0 6px 18px -7px rgba(226,0,26,.55) !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .nvarch-hint,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .nvarch-hint,
#novi-page-overview #nvh2-ziel-panel .nvarch-hint {
  margin-left: auto !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 10px 15px !important; border-radius: 12px !important;
  background: #FFFFFF !important; border: 1px solid #E7E7EE !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; opacity: 1 !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel:hover .nvarch-hint,
#novi-page-overview #nvh2-ziel-panel:hover .nvarch-hint {
  border-color: rgba(226,0,26,.32) !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .nvarch-hint::before,
#novi-page-overview #nvh2-ziel-panel .nvarch-hint::before {
  content: "" !important; flex: none !important;
  width: 16px !important; height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1.5'/%3E%3Cpath d='M5 9v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9M10 13h4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 16px 16px !important;
}

/* Der eingebettete Rahmen traegt kein eigenes Kleid mehr. */
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .perf-panel,
#novi-page-overview #nvh2-ziel-panel .perf-panel {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}

/* Die Monatsleiste - der Balken jetzt rot. */
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-monatsleiste,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-monatsleiste {
  font-size: 13px !important; gap: 14px !important; margin-bottom: 18px !important;
  color: #4A4A55 !important; -webkit-text-fill-color: #4A4A55 !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-monatsbalken,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-monatsbalken {
  height: 7px !important; width: 300px !important; max-width: 42vw !important;
  background: #EDEDF2 !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-monatsbalken > i,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-monatsbalken > i {
  background: var(--spk-rot, #E2001A) !important;
}

/* Die beiden Zielkarten. */
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-paar,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-paar {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 14px !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .novi-ziel-block,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-block,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-block {
  padding: 18px 18px 16px !important; border-radius: 17px !important;
  background: #FFFFFF !important; background-image: none !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.03) !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-name,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-name {
  font-size: 13px !important; font-weight: 800 !important; letter-spacing: .09em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
/* Die Prozent-Pille traegt die Farbe des ZUSTANDS, nicht immer gruen:
   die Karte sagt selbst "ist-hinten", und Gruen wuerde dort Erfolg
   behaupten, wo der Code das Gegenteil meint. */
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .novi-ziel-pct,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-pct,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-pct {
  padding: 5px 11px !important; border-radius: 999px !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  background: rgba(22,163,74,.10) !important;
  color: #16A34A !important; -webkit-text-fill-color: #16A34A !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .ist-hinten .novi-ziel-pct,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .ist-hinten .novi-ziel-pct,
#novi-page-overview #nvh2-ziel-panel .ist-hinten .novi-ziel-pct {
  background: rgba(226,0,26,.09) !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-zahlen,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-zahlen {
  margin-top: 10px !important; font-size: 15px !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .novi-ziel-zahlen b,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-zahlen b,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-zahlen b {
  font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.03em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-balken,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-balken {
  height: 9px !important; margin: 12px 0 10px !important; background: #EDEDF2 !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-balken > i,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-balken > i {
  background: var(--spk-rot, #E2001A) !important; min-width: 9px !important;
}
/* "Noch X" links, die Abweichung als rote Pille daneben. */
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-rest,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-rest {
  display: flex !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 10px !important;
  margin-top: 8px !important; font-size: 13px !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-rest i,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-rest i {
  display: inline-block !important; opacity: 1 !important;
  padding: 5px 11px !important; border-radius: 999px !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  background: rgba(226,0,26,.08) !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-fuss,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-fuss {
  margin-top: 10px !important; font-size: 12px !important; opacity: 1 !important;
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
}
/* Der Tempo-Nachsatz als eigener heller Kasten mit Zeichen. */
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .goal-forecast,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .goal-forecast,
#novi-page-overview #nvh2-ziel-panel .goal-forecast {
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
  margin-top: 14px !important; padding: 13px 14px !important;
  border: 1px solid #F0F0F4 !important; border-top: 1px solid #F0F0F4 !important;
  border-radius: 13px !important; background: #FAFAFC !important;
  font-size: 12.5px !important; line-height: 1.45 !important;
}
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .goal-forecast::before,
#novi-page-overview #nvh2-ziel-panel .goal-forecast::before {
  content: "" !important; flex: none !important;
  width: 34px !important; height: 34px !important; border-radius: 11px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5 9 11l3.5 3.5L20 7'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 17px 17px !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .goal-forecast b,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .goal-forecast b {
  font-size: 13.5px !important; font-weight: 700 !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .goal-forecast span,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .goal-forecast span {
  opacity: 1 !important; margin-top: 3px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
/* Abschnittszeile ("Dieser Monat", "Kanaele einzeln"). */
:root[data-skin="spk"] #novi-page-overview #nvh2-ziel-panel .novi-ziel-abschnitt,
:root[data-skin] #novi-page-overview #nvh2-ziel-panel .novi-ziel-abschnitt,
#novi-page-overview #nvh2-ziel-panel .novi-ziel-abschnitt {
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: .11em !important; text-transform: uppercase !important;
  margin: 4px 0 12px !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}

/* ══ Upload-Kalender nach Entwurf (26.08.) ═════════════════════════

   NUR Aussehen. Am Markup aendert sich nichts - kein Tag, kein Knopf,
   keine Legende. Beide Pfeilknoepfe, "Heute" und alle Zustandsklassen
   (leer / gruen / violett / heute / plan) bleiben unberuehrt. */

:root[data-skin] #novi-page-overview #nvh2-kal,
#novi-page-overview #nvh2-kal {
  padding: 22px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 38px -26px rgba(20,20,30,.35) !important;
}

/* Kopfzeile mit Kalender-Zeichen. */
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-head,
#novi-page-overview #nvh2-kal .nvh2-kal-head {
  align-items: center !important; gap: 14px !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh-label,
#novi-page-overview #nvh2-kal .nvh-label {
  display: flex !important; align-items: center !important; gap: 13px !important;
  margin-bottom: 0 !important;
  font-size: 14px !important; font-weight: 800 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh-label::before,
#novi-page-overview #nvh2-kal .nvh-label::before {
  content: "" !important; flex: none !important;
  width: 44px !important; height: 44px !important; border-radius: 14px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 22px 22px !important;
  box-shadow: 0 6px 18px -7px rgba(226,0,26,.55) !important;
}

/* Die beiden Pfeile als helle Quadrate, "Heute" gefuellt rot. */
:root[data-skin] #novi-page-overview #nvh2-kal .nvh-iconbtn,
#novi-page-overview #nvh2-kal .nvh-iconbtn {
  width: 38px !important; height: 38px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 11px !important;
  background: #FFFFFF !important; border: 1px solid #E7E7EE !important;
  color: #4A4A55 !important;
  transition: border-color .15s ease, color .15s ease !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh-iconbtn:hover,
#novi-page-overview #nvh2-kal .nvh-iconbtn:hover {
  border-color: rgba(226,0,26,.35) !important; color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh-iconbtn svg,
#novi-page-overview #nvh2-kal .nvh-iconbtn svg {
  width: 15px !important; height: 15px !important; stroke: currentColor !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-kal .nvh2-kal-heute,
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-heute,
#novi-page-overview #nvh2-kal .nvh2-kal-heute {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 10px 16px !important; border-radius: 11px !important;
  font-size: 13px !important; font-weight: 700 !important;
  background-color: var(--spk-rot, #E2001A) !important; background-image: none !important;
  border: 1px solid var(--spk-rot, #E2001A) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 5px 16px -6px rgba(226,0,26,.6) !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-kal .nvh2-kal-heute:hover,
#novi-page-overview #nvh2-kal .nvh2-kal-heute:hover {
  background-color: #C40017 !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-heute::before,
#novi-page-overview #nvh2-kal .nvh2-kal-heute::before {
  content: "" !important; flex: none !important;
  width: 15px !important; height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 15px 15px !important;
}

/* Monatszeile mit rotem Winkel davor. */
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-monat,
#novi-page-overview #nvh2-kal .nvh2-kal-monat {
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin-top: 20px !important; font-size: 21px !important; font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-monat::before,
#novi-page-overview #nvh2-kal .nvh2-kal-monat::before {
  content: "" !important; flex: none !important;
  width: 11px !important; height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: contain !important;
}

/* Das Raster. */
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-grid,
#novi-page-overview #nvh2-kal .nvh2-kal-grid {
  gap: 8px !important; margin-top: 16px !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-kopf,
#novi-page-overview #nvh2-kal .nvh2-kal-kopf {
  font-size: 12px !important; font-weight: 600 !important; padding: 4px 0 6px !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-kal .nvh2-kal-tag,
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag,
#novi-page-overview #nvh2-kal .nvh2-kal-tag {
  position: relative !important;
  flex-direction: column !important; gap: 0 !important;
  padding-top: 2px !important;
  font-size: 15px !important; font-weight: 700 !important;
  border-radius: 13px !important;
  background: #FFFFFF !important; border: 1px solid #EFEFF3 !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
/* Tage mit Inhalt: zarter roter Grund, gruene Zahl - dieselben
   Zustandsklassen wie bisher, nur anders gezeichnet. */
:root[data-skin="spk"] #novi-page-overview #nvh2-kal .nvh2-kal-tag.gruen,
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag.gruen,
#novi-page-overview #nvh2-kal .nvh2-kal-tag.gruen {
  background: rgba(226,0,26,.05) !important;
  border-color: rgba(226,0,26,.12) !important;
  color: #16733A !important; -webkit-text-fill-color: #16733A !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-kal .nvh2-kal-tag.violett,
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag.violett,
#novi-page-overview #nvh2-kal .nvh2-kal-tag.violett {
  background: rgba(226,0,26,.08) !important;
  border-color: rgba(226,0,26,.18) !important;
  color: #B3161E !important; -webkit-text-fill-color: #B3161E !important;
}
:root[data-skin="spk"] #novi-page-overview #nvh2-kal .nvh2-kal-tag.leer,
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag.leer,
#novi-page-overview #nvh2-kal .nvh2-kal-tag.leer {
  opacity: 1 !important;
  background: #FFFFFF !important; border-color: #F2F2F6 !important;
  color: #C6C6D0 !important; -webkit-text-fill-color: #C6C6D0 !important;
}
/* Heute: weiss mit kraeftigem rotem Rahmen. */
:root[data-skin="spk"] #novi-page-overview #nvh2-kal .nvh2-kal-tag.heute,
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag.heute,
#novi-page-overview #nvh2-kal .nvh2-kal-tag.heute {
  background: #FFFFFF !important;
  border: 2px solid var(--spk-rot, #E2001A) !important;
  box-shadow: 0 4px 14px -6px rgba(226,0,26,.5) !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
/* Geplant bleibt gestrichelt - dieselbe Bedeutung wie bisher. */
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag.plan,
#novi-page-overview #nvh2-kal .nvh2-kal-tag.plan {
  border: 1.5px dashed rgba(226,0,26,.55) !important;
}
/* Der Punkt unter der Zahl - NUR an Tagen mit Inhalt. An einem leeren
   Tag behauptete er etwas, das nicht da ist. */
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag.gruen::after,
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag.violett::after,
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-tag.plan::after,
#novi-page-overview #nvh2-kal .nvh2-kal-tag.gruen::after,
#novi-page-overview #nvh2-kal .nvh2-kal-tag.violett::after,
#novi-page-overview #nvh2-kal .nvh2-kal-tag.plan::after {
  content: "" !important;
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  margin-top: 5px !important;
  background: var(--spk-rot, #E2001A) !important;
}

/* Die Legende. */
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-legende,
#novi-page-overview #nvh2-kal .nvh2-kal-legende {
  gap: 20px !important; margin-top: 20px !important;
  padding-top: 16px !important; border-top: 1px solid #F2F2F6 !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-legende span,
#novi-page-overview #nvh2-kal .nvh2-kal-legende span {
  gap: 8px !important; font-size: 12.5px !important;
  color: #4A4A55 !important; -webkit-text-fill-color: #4A4A55 !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-legende i,
#novi-page-overview #nvh2-kal .nvh2-kal-legende i {
  width: 12px !important; height: 12px !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-legende i.violett,
#novi-page-overview #nvh2-kal .nvh2-kal-legende i.violett {
  background: #C40017 !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-legende i.gruen,
#novi-page-overview #nvh2-kal .nvh2-kal-legende i.gruen {
  background: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-overview #nvh2-kal .nvh2-kal-legende i.ohne,
#novi-page-overview #nvh2-kal .nvh2-kal-legende i.ohne {
  background: #A8A8B4 !important;
}

/* ══ "Content Performance" nach Entwurf (26.08.) ═══════════════════

   NUR Aussehen. Am Markup aendert sich nichts - kein Element, keine
   Kennzahl, kein Auswahlfeld, kein Knopf.

   Nebenbei behoben: die Reihe stand auf "nowrap + overflow-x: auto"
   und war rechts abgeschnitten - genau das seitliche Schieben, das
   zuletzt weg sollte. Jetzt bricht sie um, wie im Entwurf. */

:root[data-skin] #novi-page-overview .nvh2-perf,
#novi-page-overview .nvh2-perf {
  position: relative !important;
  padding: 22px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 38px -26px rgba(20,20,30,.35) !important;
  overflow: hidden !important;
}

/* Kopfzeile */
:root[data-skin] #novi-page-overview .nvh2-perf .nvh-mod-head,
#novi-page-overview .nvh2-perf .nvh-mod-head {
  align-items: center !important; gap: 16px !important; flex-wrap: wrap !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .nvh-label,
#novi-page-overview .nvh2-perf .nvh-label {
  display: flex !important; align-items: center !important; gap: 12px !important;
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: .15em !important; margin-bottom: 4px !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .nvh-label::before,
#novi-page-overview .nvh2-perf .nvh-label::before {
  content: "" !important; flex: none !important;
  width: 44px !important; height: 44px !important; border-radius: 14px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5 9 11l3.5 3.5L20 7'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 22px 22px !important;
  box-shadow: 0 6px 18px -7px rgba(226,0,26,.55) !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .nvh-mod-head h3,
#novi-page-overview .nvh2-perf .nvh-mod-head h3 {
  margin: 0 0 0 56px !important; font-size: 22px !important; font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}

/* Das Auswahlfeld als Chip - es behaelt seine echten Zeitraeume. */
:root[data-skin] #novi-page-overview .nvh2-perf .nvh-range,
#novi-page-overview .nvh2-perf .nvh-range {
  gap: 10px !important; flex-wrap: wrap !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .novi-kpi-range,
#novi-page-overview .nvh2-perf .novi-kpi-range {
  gap: 9px !important; padding: 9px 13px !important;
  border-radius: 13px !important;
  background: #FFFFFF !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.03) !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .novi-kpi-range-label,
#novi-page-overview .nvh2-perf .novi-kpi-range-label {
  order: 2 !important;
  font-size: 9.5px !important; font-weight: 800 !important;
  letter-spacing: .11em !important; text-transform: uppercase !important;
  padding: 3px 7px !important; border-radius: 6px !important;
  background: rgba(226,0,26,.08) !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .novi-kpi-range select,
#novi-page-overview .nvh2-perf .novi-kpi-range select {
  order: 1 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  padding: 0 !important; font-size: 13px !important; font-weight: 600 !important;
  color: #1E1E26 !important; -webkit-text-fill-color: #1E1E26 !important;
  cursor: pointer !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .nvh-abruf,
#novi-page-overview .nvh2-perf .nvh-abruf {
  font-size: 11.5px !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}

/* Die Kennzahlen: umbrechendes Raster statt seitlichem Schieben. */
:root[data-skin] #novi-page-overview .nvh2-perf .nvh2-kpigrid,
#novi-page-overview .nvh2-perf .nvh2-kpigrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)) !important;
  gap: 12px !important; margin-top: 18px !important;
  overflow-x: visible !important; padding-bottom: 0 !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .nvh2-kpi,
#novi-page-overview .nvh2-perf .nvh2-kpi {
  min-width: 0 !important; max-width: none !important;
  gap: 4px !important; padding: 14px 15px !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.03) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .nvh2-kpi:hover,
#novi-page-overview .nvh2-perf .nvh2-kpi:hover {
  border-color: rgba(226,0,26,.24) !important;
  box-shadow: 0 3px 14px -6px rgba(226,0,26,.4) !important;
}
/* Die Zielzeile oben in Rot, wie im Entwurf. */
:root[data-skin] #novi-page-overview .nvh2-perf .nvh2-zielzeit,
#novi-page-overview .nvh2-perf .nvh2-zielzeit {
  font-size: 10.5px !important; font-weight: 600 !important; line-height: 1.35 !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
/* Die Beschriftung als kleine gesperrte Zeile. */
:root[data-skin] #novi-page-overview .nvh2-perf .nvh2-kpi > span:not(.nvh2-zielzeit),
#novi-page-overview .nvh2-perf .nvh2-kpi > span:not(.nvh2-zielzeit) {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .09em !important; text-transform: uppercase !important;
  margin-top: 2px !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}
:root[data-skin] #novi-page-overview .nvh2-perf .nvh2-kpi > b,
#novi-page-overview .nvh2-perf .nvh2-kpi > b {
  font-size: 25px !important; font-weight: 800 !important; line-height: 1.1 !important;
  letter-spacing: -.025em !important; margin-top: 3px !important;
  font-variant-numeric: tabular-nums !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}

/* ══ "Deine Woche" nach Entwurf (26.08.) ═══════════════════════════

   NUR Aussehen. Am Markup aendert sich nichts - kein Element, keine
   Zahl, keine Verdrahtung. */

:root[data-skin] #novi-page-overview #novi-woche-panel,
#novi-page-overview #novi-woche-panel {
  position: relative !important;
  padding: 20px 22px 18px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 38px -26px rgba(20,20,30,.35) !important;
  overflow: hidden !important;
}
/* Die rote Linie ueber der ganzen Breite, aussen auslaufend. */
:root[data-skin] #novi-page-overview #novi-woche-panel::before,
#novi-page-overview #novi-woche-panel::before {
  content: "" !important; position: absolute !important;
  left: 0 !important; right: 0 !important; top: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, rgba(226,0,26,0), var(--spk-rot, #E2001A) 22%,
    var(--spk-rot, #E2001A) 78%, rgba(226,0,26,0)) !important;
}
/* Der weiche rote Schein oben rechts. */
:root[data-skin] #novi-page-overview #novi-woche-panel::after,
#novi-page-overview #novi-woche-panel::after {
  content: "" !important; position: absolute !important; pointer-events: none !important;
  top: -70px !important; right: -50px !important; width: 260px !important; height: 190px !important;
  background: radial-gradient(ellipse, rgba(226,0,26,.13), rgba(226,0,26,0) 68%) !important;
}

/* Kopfzeile: Sinnbild, gesperrte Beschriftung, Unterzeile. */
:root[data-skin] #novi-page-overview #novi-woche-panel .nvh-label,
#novi-page-overview #novi-woche-panel .nvh-label {
  position: relative !important; z-index: 1 !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: .13em !important; text-transform: uppercase !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-overview #novi-woche-panel .nvh-label::before,
#novi-page-overview #novi-woche-panel .nvh-label::before {
  content: "" !important; flex: none !important;
  width: 30px !important; height: 30px !important; border-radius: 10px !important;
  background: rgba(226,0,26,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  box-shadow: 0 5px 14px -6px rgba(226,0,26,.5) !important;
}
:root[data-skin] #novi-page-overview #novi-woche-panel .novi-section-sub,
#novi-page-overview #novi-woche-panel .novi-section-sub {
  position: relative !important; z-index: 1 !important;
  margin: 6px 0 0 40px !important; font-size: 12.5px !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}

/* Die fuenf Kacheln (bis 06.09. sechs - Short Views ist entfallen). */
:root[data-skin] #novi-page-overview #novi-woche-panel .nvwr-reihe,
#novi-page-overview #novi-woche-panel .nvwr-reihe {
  position: relative !important; z-index: 1 !important;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  gap: 12px !important; margin-top: 16px !important;
}
:root[data-skin] #novi-page-overview .nvwr-fakt,
#novi-page-overview .nvwr-fakt {
  display: flex !important; align-items: center !important; gap: 11px !important;
  padding: 12px 14px !important; min-width: 0 !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.03) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
:root[data-skin] #novi-page-overview .nvwr-fakt:hover,
#novi-page-overview .nvwr-fakt:hover {
  border-color: rgba(226,0,26,.24) !important;
  box-shadow: 0 3px 14px -6px rgba(226,0,26,.4) !important;
}
/* Das Sinnbild je Kachel.

   ACHTUNG: die Zuordnung laeuft ueber die REIHENFOLGE. Die sechs
   Kacheln entstehen an genau EINER Stelle im Code (sechsmal fakt(...)
   hintereinander) - wer sie dort umsortiert, muss die Bilder hier
   mitziehen. Ein Markup-Merkmal je Kachel gaebe es nicht, ohne das
   Markup anzufassen, und genau das war zugesagt. */
:root[data-skin] #novi-page-overview .nvwr-fakt::before,
#novi-page-overview .nvwr-fakt::before {
  content: "" !important; flex: none !important;
  width: 34px !important; height: 34px !important; border-radius: 11px !important;
  background-color: rgba(226,0,26,.07) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}
:root[data-skin] #novi-page-overview .nvwr-fakt:nth-child(1)::before,
#novi-page-overview .nvwr-fakt:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-overview .nvwr-fakt:nth-child(2)::before,
#novi-page-overview .nvwr-fakt:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 0 1 .6-8 5.5 5.5 0 0 1 10.5 1.6A3.5 3.5 0 0 1 17.5 18z'/%3E%3Cpath d='M12 15v-5M9.6 12.4 12 10l2.4 2.4'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-overview .nvwr-fakt:nth-child(3)::before,
#novi-page-overview .nvwr-fakt:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-overview .nvwr-fakt:nth-child(4)::before,
#novi-page-overview .nvwr-fakt:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 20v-1a5 5 0 0 1 5-5h3a5 5 0 0 1 5 5v1'/%3E%3C/svg%3E") !important; }
:root[data-skin] #novi-page-overview .nvwr-fakt:nth-child(5)::before,
#novi-page-overview .nvwr-fakt:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5 9 11l3.5 3.5L20 7'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E") !important; }

:root[data-skin] #novi-page-overview .nvwr-fakt b,
#novi-page-overview .nvwr-fakt b {
  font-size: 22px !important; font-weight: 800 !important; line-height: 1.1 !important;
  letter-spacing: -.02em !important; font-variant-numeric: tabular-nums !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-overview .nvwr-fakt span,
#novi-page-overview .nvwr-fakt span {
  display: block !important; font-size: 11.5px !important; margin-top: 2px !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
/* Die Zuwachs-Zahl in Rot - ueber ihre KENNUNG, nicht ueber die
   Reihenfolge. Der stabilere Griff, und er stand ohnehin schon da.
   Bis zum 06.09. stand die Short-View-Zahl hier mit drin. */
:root[data-skin] #novi-page-overview #nvwr-views,
#novi-page-overview #nvwr-views {
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}

/* Die Fusszeile mit Kalender-Zeichen. */
:root[data-skin] #novi-page-overview #nvwr-hint,
#novi-page-overview #nvwr-hint {
  position: relative !important; z-index: 1 !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  margin-top: 14px !important; font-size: 11.5px !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}
:root[data-skin] #novi-page-overview #nvwr-hint::before,
#novi-page-overview #nvwr-hint::before {
  content: "" !important; flex: none !important;
  width: 15px !important; height: 15px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2001A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 15px 15px !important;
  opacity: .85 !important;
}

/* ══ Kennzahlen-Karten nach Entwurf (26.08.) ═══════════════════════

   NUR Aussehen. Am Markup aendert sich nichts.

   Roter Strich oben, Symbol in weicher Kachel mit rotem Schein, grosse
   Zahl, Trennlinie mit drei roten Punkten unten - alles ueber
   ::before/::after, ohne ein einziges neues Element. */

:root[data-skin] #novi-page-overview .nvh-kpis,
#novi-page-overview .nvh-kpis {
  gap: 16px !important;
}

:root[data-skin] #novi-page-overview .nvh-kpi,
#novi-page-overview .nvh-kpi {
  position: relative !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 22px 20px 34px !important;   /* unten Platz fuer die Linie */
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #EFEFF3 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 14px 34px -22px rgba(20,20,30,.35) !important;
  overflow: hidden !important;
  transition: box-shadow .18s ease, transform .18s ease !important;
}
:root[data-skin] #novi-page-overview .nvh-kpi:hover,
#novi-page-overview .nvh-kpi:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 4px rgba(20,20,30,.05), 0 18px 40px -20px rgba(226,0,26,.30) !important;
}

/* Der rote Strich oben. */
:root[data-skin] #novi-page-overview .nvh-kpi::before,
#novi-page-overview .nvh-kpi::before {
  content: "" !important; position: absolute !important;
  top: 0 !important; left: 20px !important;
  width: 46px !important; height: 5px !important;
  border-radius: 0 0 4px 4px !important;
  background: var(--spk-rot, #E2001A) !important;
}

/* Nur noch die Trennlinie. Die drei roten Punkte, die hier bis zum
   03.09. daneben standen, sahen aus wie ein Menue-Knopf - und waren
   reines CSS ohne Funktion. Ein Element, das wie ein Bedienelement
   aussieht und keines ist, ist schlechter als keines. */
:root[data-skin] #novi-page-overview .nvh-kpi::after,
#novi-page-overview .nvh-kpi::after {
  content: "" !important; position: absolute !important;
  left: 20px !important; right: 20px !important; bottom: 17px !important;
  height: 1px !important;
  background: #EDEDF2 !important;
}

/* Das Symbol: weiche Kachel mit rotem Schein. Die Haut setzt hier
   border-radius 6px mit !important - deshalb steht data-skin im
   Waehler, sonst waere davon nichts zu sehen. */
:root[data-skin] #novi-page-overview .nvh-kpi-icon,
:root[data-skin="spk"] #novi-page-overview .nvh-kpi-icon,
#novi-page-overview .nvh-kpi-icon {
  flex: none !important; width: 52px !important; height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(150deg, rgba(226,0,26,.10), rgba(226,0,26,.03)) !important;
  background-image: linear-gradient(150deg, rgba(226,0,26,.10), rgba(226,0,26,.03)) !important;
  border: 1px solid rgba(226,0,26,.14) !important;
  box-shadow: 0 6px 18px -6px rgba(226,0,26,.45) !important;
}
:root[data-skin] #novi-page-overview .nvh-kpi-icon svg,
:root[data-skin="spk"] #novi-page-overview .nvh-kpi-icon svg,
#novi-page-overview .nvh-kpi-icon svg {
  width: 24px !important; height: 24px !important;
  stroke: var(--spk-rot, #E2001A) !important; stroke-width: 1.7 !important;
}

/* Zahl, Beschriftung, Unterzeile. */
:root[data-skin] #novi-page-overview .nvh-kpi-num,
#novi-page-overview .nvh-kpi-num {
  font-size: 30px !important; font-weight: 800 !important;
  line-height: 1.05 !important; letter-spacing: -.02em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
:root[data-skin] #novi-page-overview .nvh-kpi-label,
#novi-page-overview .nvh-kpi-label {
  font-size: 13px !important; font-weight: 700 !important; margin-top: 5px !important;
  color: #1E1E26 !important; -webkit-text-fill-color: #1E1E26 !important;
}
:root[data-skin] #novi-page-overview .nvh-kpi-sub,
#novi-page-overview .nvh-kpi-sub {
  font-size: 11.5px !important; margin-top: 3px !important;
  color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
}

/* ══ Seitenleiste nach Entwurf (25.08.) ════════════════════════════

   NUR Aussehen. Am Markup aendert sich nichts - kein Knopf, kein
   Datenattribut, keine Verdrahtung.

   Nur ueber 760 px: darunter wird die Leiste zur unteren Bedienleiste
   und "Mehr" klappt die Punkte als Dreier-Raster auf. Kartenoptik
   wuerde dort alles zerreissen. */
@media (min-width: 761px) {

  :root[data-skin="spk"] #novi-sidebar {
    width: 272px !important;
    padding: 18px 14px 16px !important;
    background: #FCFCFD !important;
    border-right: 1px solid #ECECF1 !important;
  }

  /* ── Kopf: Zeichen, Trennstrich, gesperrte Wortmarke ───────────── */
  :root[data-skin="spk"] #novi-sidebar .novi-sidebar-logo {
    align-items: center !important; gap: 12px !important;
    padding: 4px 4px 16px !important;
    border-bottom: 1px solid #EEEEF2 !important;
    margin-bottom: 14px !important;
  }
  /* Der rote Ring um das Zeichen - im Entwurf die auffaelligste
     Neuerung am Kopf. Als Rahmen am vorhandenen Element, ohne ein
     einziges neues Markup-Stueck. */
  :root[data-skin="spk"] #novi-sidebar .novi-sidebar-logo .novi-mark {
    flex: none !important;
    padding: 7px !important; border-radius: 50% !important;
    border: 1.5px solid rgba(226,0,26,.28) !important;
    box-shadow: 0 0 0 4px rgba(226,0,26,.05) !important;
    background: #FFFFFF !important;
  }
  /* Der senkrechte Strich zwischen Zeichen und Wortmarke. */
  :root[data-skin="spk"] #novi-sidebar .novi-sidebar-logo-text {
    padding-left: 12px !important;
    border-left: 1px solid #E7E7EE !important;
  }
  :root[data-skin="spk"] #novi-sidebar .novi-sidebar-logo-text b {
    font-size: 16px !important; font-weight: 800 !important;
    letter-spacing: .10em !important; line-height: 1.1 !important;
    color: #14141C !important; -webkit-text-fill-color: #14141C !important;
  }
  :root[data-skin="spk"] #novi-sidebar .novi-sidebar-logo-text span {
    font-size: 9.5px !important; letter-spacing: .01em !important;
    margin-top: 3px !important;
    color: #8A8A96 !important; -webkit-text-fill-color: #8A8A96 !important;
  }

  /* ── Die Punkte als Karten ─────────────────────────────────────── */
  :root[data-skin="spk"] #novi-nav-list:not(.zeige-alle) {
    gap: 7px !important;
  }
  :root[data-skin="spk"] #novi-nav-list:not(.zeige-alle) .novi-nav-item {
    position: relative !important;
    gap: 11px !important;
    padding: 9px 12px !important;
    border-radius: 13px !important;
    border: 1px solid #EDEDF2 !important;
    background: #FFFFFF !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: #23232C !important; -webkit-text-fill-color: #23232C !important;
    box-shadow: 0 1px 2px rgba(20,20,30,.03) !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
    overflow: hidden !important;
  }
  :root[data-skin="spk"] #novi-nav-list:not(.zeige-alle) .novi-nav-item:hover {
    background: #FFFFFF !important;
    border-color: rgba(226,0,26,.28) !important;
    box-shadow: 0 2px 10px rgba(226,0,26,.09) !important;
    transform: translateX(2px) !important;
    color: #14141C !important; -webkit-text-fill-color: #14141C !important;
  }
  /* Das Zeichen sitzt in einem eigenen Kaestchen - ohne zusaetzliches
     Markup, indem das vorhandene svg selbst zum Kaestchen wird. */
  :root[data-skin="spk"] #novi-nav-list:not(.zeige-alle) .novi-nav-item svg {
    box-sizing: content-box !important;
    width: 16px !important; height: 16px !important;
    padding: 7px !important; border-radius: 10px !important;
    background: #FAFAFC !important; border: 1px solid #EFEFF3 !important;
    stroke: #3A3A46 !important;
    transition: background .15s ease, border-color .15s ease !important;
  }
  :root[data-skin="spk"] #novi-nav-list:not(.zeige-alle) .novi-nav-item:hover svg {
    background: rgba(226,0,26,.06) !important;
    border-color: rgba(226,0,26,.20) !important;
    stroke: var(--spk-rot, #E2001A) !important;
  }

  /* ── Der aktive Punkt ──────────────────────────────────────────── */
  :root[data-skin="spk"] #novi-nav-list:not(.zeige-alle) .novi-nav-item.active {
    background: linear-gradient(90deg, rgba(226,0,26,.10), rgba(226,0,26,.045)) !important;
    border-color: rgba(226,0,26,.24) !important;
    box-shadow: 0 2px 12px rgba(226,0,26,.10) !important;
    font-weight: 700 !important;
    color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
  }
  /* Der kraeftige rote Balken links. Als ::before am vorhandenen Knopf -
     die alte Regel setzte ihn als inset-Schatten, der laesst sich
     nicht abrunden. */
  :root[data-skin="spk"] #novi-nav-list:not(.zeige-alle) .novi-nav-item.active::before {
    content: "" !important; position: absolute !important;
    left: 0 !important; top: 7px !important; bottom: 7px !important;
    width: 4px !important; border-radius: 0 4px 4px 0 !important;
    background: var(--spk-rot, #E2001A) !important;
  }
  :root[data-skin="spk"] #novi-nav-list:not(.zeige-alle) .novi-nav-item.active svg {
    background: #FFFFFF !important;
    border-color: rgba(226,0,26,.22) !important;
    stroke: var(--spk-rot, #E2001A) !important;
    box-shadow: 0 1px 4px rgba(226,0,26,.14) !important;
  }

  /* ── Der Profil-Knopf unten ────────────────────────────────────── */
  :root[data-skin="spk"] #novi-sidebar #novi-userbtn {
    gap: 11px !important;
    padding: 11px !important;
    border-radius: 15px !important;
    border: 1px solid #EDEDF2 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(20,20,30,.03) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  :root[data-skin="spk"] #novi-sidebar #novi-userbtn:hover {
    border-color: rgba(226,0,26,.26) !important;
    box-shadow: 0 3px 14px rgba(226,0,26,.10) !important;
  }
  :root[data-skin="spk"] #novi-sidebar #novi-userbtn-avatar {
    position: relative !important;
    width: 42px !important; height: 42px !important; flex: none !important;
    border-radius: 50% !important; border: 0 !important;
    background-image: linear-gradient(140deg, #FF4D3D, #E2001A) !important;
    color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 800 !important; font-size: 14px !important;
    letter-spacing: .02em !important;
    box-shadow: 0 4px 12px rgba(226,0,26,.28) !important;
    overflow: visible !important;
  }
  /* Der kleine Punkt am Rand - im Entwurf das Zeichen "angemeldet". */
  :root[data-skin="spk"] #novi-sidebar #novi-userbtn-avatar::after {
    content: "" !important; position: absolute !important;
    right: -1px !important; bottom: -1px !important;
    width: 11px !important; height: 11px !important; border-radius: 50% !important;
    background: var(--spk-rot, #E2001A) !important;
    border: 2px solid #FFFFFF !important;
  }
  /* Ein hochgeladenes Profilbild fuellt den Kreis weiterhin ganz aus. */
  :root[data-skin="spk"] #novi-sidebar #novi-userbtn-avatar img {
    width: 100% !important; height: 100% !important;
    border-radius: 50% !important; object-fit: cover !important; display: block !important;
  }
  :root[data-skin="spk"] #novi-sidebar .novi-userbtn-name {
    font-size: 13.5px !important; font-weight: 700 !important;
    color: #14141C !important; -webkit-text-fill-color: #14141C !important;
  }
  :root[data-skin="spk"] #novi-sidebar .novi-userbtn-sub {
    font-size: 11px !important; margin-top: 1px !important;
    display: block !important; max-width: 150px !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  :root[data-skin="spk"] #novi-sidebar .novi-userbtn-arrow {
    stroke: #B4B4C0 !important;
  }
}

/* ══ Die beiden Character Sheets in Schritt 08 (25.08.) ════════════ */
#view-novi-studio .wk-sheetpaar,
:root[data-skin] #view-novi-studio .wk-sheetpaar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important; margin: 12px 0 4px !important;
}
#view-novi-studio .wk-sheetkasten,
:root[data-skin] #view-novi-studio .wk-sheetkasten {
  margin: 0 !important; padding: 12px !important;
  border: 1px solid #E7E7EE !important; border-radius: 14px !important;
  background: #FFFFFF !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
}
#view-novi-studio .wk-sheetkasten.ist-belegt,
:root[data-skin] #view-novi-studio .wk-sheetkasten.ist-belegt {
  border-color: rgba(22,163,74,.30) !important;
}
/* "contain", nicht "cover": ein Character Sheet ist hoch und schmal -
   zugeschnitten waere genau das weg, was man sehen will. */
#view-novi-studio .wk-sheetbild,
:root[data-skin] #view-novi-studio .wk-sheetbild {
  height: 168px !important; border-radius: 10px !important;
  background: #F6F6F9 !important; border: 1px solid #EFEFF3 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important;
}
#view-novi-studio .wk-sheetbild img,
:root[data-skin] #view-novi-studio .wk-sheetbild img {
  max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important; display: block !important;
}
#view-novi-studio .wk-sheetleer,
:root[data-skin] #view-novi-studio .wk-sheetleer {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 6px !important;
  font-size: 11px !important;
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
}
#view-novi-studio .wk-sheetleer-zeichen,
:root[data-skin] #view-novi-studio .wk-sheetleer-zeichen {
  width: 22px !important; height: 22px !important; color: #C2C2CC !important;
}
#view-novi-studio .wk-sheetkasten figcaption,
:root[data-skin] #view-novi-studio .wk-sheetkasten figcaption {
  font-size: 12.5px !important; font-weight: 700 !important;
  color: #1E1E26 !important; -webkit-text-fill-color: #1E1E26 !important;
}
#view-novi-studio .wk-sheetkasten figcaption em,
:root[data-skin] #view-novi-studio .wk-sheetkasten figcaption em {
  font-style: normal !important; font-weight: 500 !important; font-size: 11px !important;
  color: #B8860B !important; -webkit-text-fill-color: #B8860B !important;
}
#view-novi-studio .wk-sheeterklaerung,
:root[data-skin] #view-novi-studio .wk-sheeterklaerung {
  margin: 0 !important; font-size: 11.5px !important; line-height: 1.4 !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
#view-novi-studio .wk-sheetwege,
:root[data-skin] #view-novi-studio .wk-sheetwege {
  display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
  margin-top: auto !important;
}
#view-novi-studio .wk-sheetwege .wk-rl-weg,
:root[data-skin] #view-novi-studio .wk-sheetwege .wk-rl-weg {
  flex: 1 1 auto !important; text-align: center !important;
  padding: 7px 10px !important; border-radius: 9px !important;
  border: 1px solid #E2E2EA !important; background: #FAFAFC !important;
  font-size: 11.5px !important; cursor: pointer !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
#view-novi-studio .wk-sheetwege .wk-rl-weg:hover,
:root[data-skin] #view-novi-studio .wk-sheetwege .wk-rl-weg:hover {
  border-color: var(--spk-rot, #E2001A) !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio .wk-sheetwege .wk-rl-weg.ist-gefahr:hover,
:root[data-skin] #view-novi-studio .wk-sheetwege .wk-rl-weg.ist-gefahr:hover {
  border-color: #D32029 !important;
  color: #D32029 !important; -webkit-text-fill-color: #D32029 !important;
  background: rgba(211,32,41,.06) !important;
}

/* ══ Kanal waehlen: Kachel nach Entwurf (25.08.) ═══════════════════

   Die Huelle traegt jetzt das Aussehen, nicht mehr der innere Knopf -
   nur so koennen Fusszeile und Bild-Plus mit auf der Karte liegen.
   Der innere Knopf wird dadurch flaechig und randlos. */
#view-novi-studio .wk-kanalraster,
:root[data-skin] #view-novi-studio .wk-kanalraster {
  /* 26.08.: von 196 auf 236 - die Kacheln waren schmal und hoch, im
     Entwurf sind sie breit und kompakt. */
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)) !important;
  gap: 14px !important;
}
#view-novi-studio .wk-kanal-huelle,
:root[data-skin] #view-novi-studio .wk-kanal-huelle {
  position: relative !important;
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #ECECF1 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 8px 22px rgba(20,20,30,.05) !important;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease !important;
}
#view-novi-studio .wk-kanal-huelle:hover,
:root[data-skin] #view-novi-studio .wk-kanal-huelle:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 4px rgba(20,20,30,.05), 0 14px 32px rgba(226,0,26,.10) !important;
}
#view-novi-studio .wk-kanal-huelle.ist-gewaehlt,
:root[data-skin] #view-novi-studio .wk-kanal-huelle.ist-gewaehlt {
  border-color: var(--spk-rot, #E2001A) !important;
  box-shadow: 0 0 0 3px rgba(226,0,26,.12), 0 10px 26px rgba(226,0,26,.14) !important;
}
/* 26.08.: Der rote Schimmer in der Ecke ist RAUS. Er stammte aus dem
   ersten Entwurf; im zweiten gibt es ihn nicht, und auf der echten
   Seite sah er aus wie ein Fleck auf der Karte statt wie Absicht. Eine
   ruhige weisse Karte traegt die runden Bilder besser. */

/* Der innere Knopf traegt kein eigenes Kleid mehr - er ist die Flaeche. */
#view-novi-studio .wk-kanal-huelle .wk-kanal,
:root[data-skin] #view-novi-studio .wk-kanal-huelle .wk-kanal {
  aspect-ratio: auto !important;
  position: relative !important; z-index: 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-start !important;
  gap: 0 !important; width: 100% !important; flex: 1 1 auto !important;
  /* 26.08.: flacher - im Entwurf sitzen Bild, Name und Nische enger
     beieinander. */
  padding: 16px 16px 12px !important; text-align: center !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; cursor: pointer !important; font: inherit !important;
}
#view-novi-studio .wk-kanal-bild,
:root[data-skin] #view-novi-studio .wk-kanal-bild {
  /* 26.08.: 64 -> 76 wie im Entwurf. Die Figuren sind das
     Erkennungsmerkmal der Kanaele und sollen wirken. */
  width: 76px !important; height: 76px !important; flex: none !important;
  border-radius: 50% !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #F2F2F6 !important; border: 1px solid #E7E7EE !important;
}
#view-novi-studio .wk-kanal-bild img,
:root[data-skin] #view-novi-studio .wk-kanal-bild img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
#view-novi-studio .wk-kanal-bild > i,
:root[data-skin] #view-novi-studio .wk-kanal-bild > i {
  font-style: normal !important; font-size: 20px !important; font-weight: 700 !important;
  color: #9A9AA6 !important; -webkit-text-fill-color: #9A9AA6 !important;
}
#view-novi-studio .wk-kanal-leer,
:root[data-skin] #view-novi-studio .wk-kanal-leer {
  width: 24px !important; height: 24px !important; color: #B4B4C0 !important;
}
/* Die "+ Neuer Kanal"-Kachel: gestrichelter Kreis mit rotem Plus. */
#view-novi-studio .wk-kanal-bild.ist-leer,
:root[data-skin] #view-novi-studio .wk-kanal-bild.ist-leer {
  background: rgba(226,0,26,.05) !important;
  border: 2px dashed rgba(226,0,26,.42) !important;
}
#view-novi-studio .wk-kanal-bild.ist-leer > i,
:root[data-skin] #view-novi-studio .wk-kanal-bild.ist-leer > i {
  font-size: 27px !important; line-height: 1 !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio .wk-kanal-huelle .wk-kanal > b,
:root[data-skin] #view-novi-studio .wk-kanal-huelle .wk-kanal > b {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important;
  margin: 12px 0 5px !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
/* Die Klammer auf zwei Zeilen bleibt ausdruecklich: eine lange Nische
   wuerde sonst jede Kachel der Reihe hochziehen. */
#view-novi-studio .wk-kanal-huelle .wk-kanal > span,
:root[data-skin] #view-novi-studio .wk-kanal-huelle .wk-kanal > span {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  font-size: 12.5px !important; line-height: 1.4 !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}

/* 27.08. (Wunsch): Der rote Plus-Punkt am Bild ist entfallen -
   seine Regeln zeigten ins Leere und sind mit entfernt. */
/* Nur fuer Vorleseprogramme - sichtbar waere es doppelt. */
#view-novi-studio .wk-nurlesen,
:root[data-skin] #view-novi-studio .wk-nurlesen {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Die Fusszeile: Profilbild hochladen. */
#view-novi-studio .wk-kanal-fuss,
:root[data-skin] #view-novi-studio .wk-kanal-fuss {
  position: relative !important; z-index: 1 !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 9px 11px !important; border-top: 1px solid #F0F0F4 !important;
}
#view-novi-studio .wk-kanal-hoch,
:root[data-skin] #view-novi-studio .wk-kanal-hoch {
  flex: 1 1 auto !important; min-width: 0 !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
  font-size: 11px !important; cursor: pointer !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
#view-novi-studio .wk-kanal-hoch:hover,
:root[data-skin] #view-novi-studio .wk-kanal-hoch:hover {
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio .wk-kanal-hoch-zeichen,
:root[data-skin] #view-novi-studio .wk-kanal-hoch-zeichen {
  width: 13px !important; height: 13px !important; flex: none !important;
  color: var(--spk-rot, #E2001A) !important;
}
/* 27.08. (Wunsch): Der Bearbeiten-Stift ist entfallen - seine
   Regeln zeigten ins Leere und sind mit entfernt. */

/* Der Use-Knopf erscheint wie bisher erst beim gewaehlten Kanal -
   an dieser Regel wird NICHTS geaendert, nur der Platz angepasst. */
#view-novi-studio .wk-kanal-huelle .wk-kanal-wege,
:root[data-skin] #view-novi-studio .wk-kanal-huelle .wk-kanal-wege {
  position: relative !important; z-index: 1 !important;
  padding: 0 11px 11px !important;
}

/* ══ Kopf der Projekt-Sektion (25.08., nach Entwurf) ═══════════════ */
#view-novi-studio .wk-projektkopf,
:root[data-skin] #view-novi-studio .wk-projektkopf {
  display: flex !important; align-items: flex-start !important;
  justify-content: space-between !important; gap: 16px !important;
  margin-bottom: 16px !important;
}
#view-novi-studio .wk-pk-marke,
:root[data-skin] #view-novi-studio .wk-pk-marke {
  display: flex !important; align-items: center !important; gap: 7px !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .11em !important; text-transform: uppercase !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio .wk-pk-marke i,
:root[data-skin] #view-novi-studio .wk-pk-marke i {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: var(--spk-rot, #E2001A) !important; flex: none !important;
}
#view-novi-studio .wk-projektkopf h3,
:root[data-skin] #view-novi-studio .wk-projektkopf h3 {
  margin: 5px 0 2px !important; font-size: 27px !important;
  font-weight: 800 !important; line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  color: #14141C !important; -webkit-text-fill-color: #14141C !important;
}
#view-novi-studio .wk-projektkopf h3 em,
:root[data-skin] #view-novi-studio .wk-projektkopf h3 em {
  font-style: normal !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio .wk-pk-unter,
:root[data-skin] #view-novi-studio .wk-pk-unter {
  display: block !important; font-size: 12px !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
#view-novi-studio .wk-pk-zaehler,
:root[data-skin] #view-novi-studio .wk-pk-zaehler {
  flex: none !important; text-align: center !important;
  padding: 11px 18px !important; border-radius: 14px !important;
  background: linear-gradient(150deg, rgba(226,0,26,.07), rgba(226,0,26,.02)) !important;
  border: 1px solid rgba(226,0,26,.16) !important;
}
#view-novi-studio .wk-pk-zaehler b,
:root[data-skin] #view-novi-studio .wk-pk-zaehler b {
  display: block !important; font-size: 26px !important; font-weight: 800 !important;
  line-height: 1 !important; font-variant-numeric: tabular-nums !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio .wk-pk-zaehler span,
:root[data-skin] #view-novi-studio .wk-pk-zaehler span {
  display: block !important; margin-top: 3px !important; font-size: 11px !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
@media (max-width: 620px) {
  #view-novi-studio .wk-projektkopf h3,
  :root[data-skin] #view-novi-studio .wk-projektkopf h3 { font-size: 21px !important; }
}


/* ── Symbole der Karte (25.08., nach Entwurf) ────────────────────── */
#view-novi-studio .wk-kw-kopf,
:root[data-skin] #view-novi-studio .wk-kw-kopf {
  display: flex !important; align-items: center !important; gap: 5px !important;
  min-width: 0 !important;
}
#view-novi-studio .wk-kw-zeichen,
:root[data-skin] #view-novi-studio .wk-kw-zeichen {
  width: 12px !important; height: 12px !important; flex: none !important;
  color: var(--spk-rot, #E2001A) !important; opacity: .85 !important;
}
#view-novi-studio .wk-kw.ist-voll .wk-kw-zeichen,
:root[data-skin] #view-novi-studio .wk-kw.ist-voll .wk-kw-zeichen {
  color: #16A34A !important;
}
#view-novi-studio .wk-stand-zeichen,
:root[data-skin] #view-novi-studio .wk-stand-zeichen {
  width: 12px !important; height: 12px !important; flex: none !important;
  display: inline-block !important; vertical-align: -2px !important;
  margin-right: 6px !important;
  color: var(--spk-rot, #E2001A) !important; opacity: .8 !important;
}
#view-novi-studio .wk-pk-zeichen,
:root[data-skin] #view-novi-studio .wk-pk-zeichen {
  width: 17px !important; height: 17px !important; display: block !important;
  margin: 0 auto 5px !important;
  color: var(--spk-rot, #E2001A) !important;
}

/* ══ Laufende Projekte: breite Karte nach Entwurf (25.08.) ══════════

   Die Projektkachel lag in der Quadrat-Regel der Kanalkacheln
   (aspect-ratio 1/1) und in der Zwei-Zeilen-Klammer. Beides schnitt
   Titel und Standzeile mitten im Wort ab. Eine breite Karte kann darin
   nicht existieren - also wird sie hier ausdruecklich befreit, statt
   mit weiteren !important dagegen anzuarbeiten. */
#view-novi-studio .wk-projektkachel,
:root[data-skin] #view-novi-studio .wk-projektkachel {
  aspect-ratio: auto !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  position: relative !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  border: 1px solid #ECECF1 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 8px 24px rgba(20,20,30,.05) !important;
  transition: box-shadow .18s ease, transform .18s ease !important;
}
#view-novi-studio .wk-projektkachel:hover,
:root[data-skin] #view-novi-studio .wk-projektkachel:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 4px rgba(20,20,30,.05), 0 14px 34px rgba(226,0,26,.10) !important;
}
/* Die rote Kante unten - im Entwurf das Zeichen, dass die Karte lebt. */
#view-novi-studio .wk-projektkachel::after,
:root[data-skin] #view-novi-studio .wk-projektkachel::after {
  content: "" !important; position: absolute !important;
  left: 18px !important; right: 18px !important; bottom: 0 !important;
  height: 2px !important; border-radius: 2px !important;
  background: linear-gradient(90deg, rgba(226,0,26,0), var(--spk-rot, #E2001A), rgba(226,0,26,0)) !important;
  opacity: .55 !important;
}

/* Die Klammer auf zwei Zeilen gilt fuer Kanalkacheln - hier nicht.
   Der Titel darf zwei Zeilen brauchen, aber er wird nicht mehr mitten
   im Wort gekappt. */
#view-novi-studio .wk-kachel-flaeche > b,
#view-novi-studio .wk-kachel-flaeche > span:not(.wk-punktreihe),
:root[data-skin] #view-novi-studio .wk-kachel-flaeche > b,
:root[data-skin] #view-novi-studio .wk-kachel-flaeche > span:not(.wk-punktreihe) {
  -webkit-line-clamp: none !important; overflow: visible !important;
}
/* Die drei Layout-Container bekommen ihr display mit 'span' im
   Selektor - sonst gewinnt die Klammer-Regel der Kanalkacheln
   (1 Id, 2 Klassen, 1 Element) gegen eine Regel ohne Element, und
   !important aendert daran nichts: das entscheidet erst NACH der
   Spezifitaet. Genau daran klappte die Karte zusammen. */
#view-novi-studio .wk-kachel-flaeche > span.wk-kachel-kopf,
:root[data-skin] #view-novi-studio .wk-kachel-flaeche > span.wk-kachel-kopf {
  display: flex !important;
}
#view-novi-studio .wk-kachel-flaeche > span.wk-kachel-gesamt,
:root[data-skin] #view-novi-studio .wk-kachel-flaeche > span.wk-kachel-gesamt {
  display: block !important;
}
#view-novi-studio .wk-kachel-flaeche > span.wk-kachel-fuss,
:root[data-skin] #view-novi-studio .wk-kachel-flaeche > span.wk-kachel-fuss {
  display: flex !important;
}

#view-novi-studio .wk-kachel-flaeche,
:root[data-skin] #view-novi-studio .wk-kachel-flaeche {
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; justify-content: flex-start !important;
  gap: 14px !important; width: 100% !important; height: auto !important;
  text-align: left !important; padding: 18px 18px 16px !important;
  border: 0 !important; background: none !important; color: inherit !important;
  cursor: pointer !important; font: inherit !important;
}

/* ── Kopf: Rundbild links, Text rechts ───────────────────────────── */
#view-novi-studio .wk-kachel-kopf,
:root[data-skin] #view-novi-studio .wk-kachel-kopf {
  display: flex !important; align-items: flex-start !important;
  gap: 14px !important; padding-right: 26px !important;
}
#view-novi-studio .wk-kachel-bild,
:root[data-skin] #view-novi-studio .wk-kachel-bild {
  flex: 0 0 58px !important; width: 58px !important; height: 58px !important;
  border-radius: 50% !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: linear-gradient(140deg, #2A2A33, #4A4A58) !important;
}
#view-novi-studio .wk-kachel-bild img,
:root[data-skin] #view-novi-studio .wk-kachel-bild img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
#view-novi-studio .wk-kachel-bild i,
:root[data-skin] #view-novi-studio .wk-kachel-bild i {
  font-style: normal !important; font-size: 18px !important; font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
#view-novi-studio .wk-kachel-text,
:root[data-skin] #view-novi-studio .wk-kachel-text {
  flex: 1 1 auto !important; min-width: 0 !important; display: block !important;
}

/* ── Gesamtfortschritt ───────────────────────────────────────────── */
#view-novi-studio .wk-kachel-gesamt,
:root[data-skin] #view-novi-studio .wk-kachel-gesamt {
  display: block !important;
}
#view-novi-studio .wk-kg-kopf,
:root[data-skin] #view-novi-studio .wk-kg-kopf {
  display: flex !important; align-items: baseline !important;
  justify-content: space-between !important; margin-bottom: 7px !important;
}
#view-novi-studio .wk-kg-kopf > span,
:root[data-skin] #view-novi-studio .wk-kg-kopf > span {
  font-size: 12px !important;
  color: #6E6E7A !important; -webkit-text-fill-color: #6E6E7A !important;
}
#view-novi-studio .wk-kg-kopf > b,
:root[data-skin] #view-novi-studio .wk-kg-kopf > b {
  font-size: 15px !important; font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio .wk-kg-bahn,
:root[data-skin] #view-novi-studio .wk-kg-bahn {
  display: block !important; height: 6px !important; border-radius: 4px !important;
  background: #F0F0F4 !important; overflow: hidden !important;
}
#view-novi-studio .wk-kg-fuell,
:root[data-skin] #view-novi-studio .wk-kg-fuell {
  display: block !important; height: 100% !important; border-radius: 4px !important;
  background: linear-gradient(90deg, #FF4D5E, var(--spk-rot, #E2001A)) !important;
  transition: width .3s ease !important;
}

/* ── Fuss: vier Kennzahlen + Pfeil ───────────────────────────────── */
#view-novi-studio .wk-kachel-fuss,
:root[data-skin] #view-novi-studio .wk-kachel-fuss {
  display: flex !important; align-items: center !important; gap: 10px !important;
}
#view-novi-studio .wk-kachel-werte,
:root[data-skin] #view-novi-studio .wk-kachel-werte {
  flex: 1 1 auto !important; min-width: 0 !important;
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}
#view-novi-studio .wk-kw,
:root[data-skin] #view-novi-studio .wk-kw {
  display: block !important; min-width: 0 !important;
  padding: 7px 8px !important; border-radius: 10px !important;
  background: #FAFAFC !important; border: 1px solid #EFEFF3 !important;
}
#view-novi-studio .wk-kw-name,
:root[data-skin] #view-novi-studio .wk-kw-name {
  display: block !important; font-size: 10px !important; letter-spacing: .03em !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  color: #7A7A87 !important; -webkit-text-fill-color: #7A7A87 !important;
}
#view-novi-studio .wk-kw > b,
:root[data-skin] #view-novi-studio .wk-kw > b {
  display: block !important; font-size: 14px !important; font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important; margin-top: 1px !important;
  color: #1E1E26 !important; -webkit-text-fill-color: #1E1E26 !important;
}
/* Fertig ist gruen - so sieht man es, ohne die Zahl zu lesen. */
#view-novi-studio .wk-kw.ist-voll,
:root[data-skin] #view-novi-studio .wk-kw.ist-voll {
  background: rgba(22,163,74,.07) !important; border-color: rgba(22,163,74,.22) !important;
}
#view-novi-studio .wk-kw.ist-voll > b,
:root[data-skin] #view-novi-studio .wk-kw.ist-voll > b {
  color: #16A34A !important; -webkit-text-fill-color: #16A34A !important;
}
#view-novi-studio .wk-kachel-pfeil,
:root[data-skin] #view-novi-studio .wk-kachel-pfeil {
  flex: 0 0 40px !important; width: 40px !important; height: 40px !important;
  border-radius: 12px !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  background: var(--spk-rot, #E2001A) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  font-size: 17px !important; line-height: 1 !important;
  box-shadow: 0 4px 12px rgba(226,0,26,.28) !important;
}

/* ── Drei-Punkte-Menue (loest das Loesch-x ab) ───────────────────── */
#view-novi-studio .wk-kachel-menue-huelle,
:root[data-skin] #view-novi-studio .wk-kachel-menue-huelle {
  position: absolute !important; top: 12px !important; right: 12px !important; z-index: 5 !important;
}
#view-novi-studio .wk-kachel-punkte,
:root[data-skin] #view-novi-studio .wk-kachel-punkte {
  width: 26px !important; height: 26px !important; padding: 0 !important;
  border: 0 !important; background: none !important; cursor: pointer !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 3px !important;
  border-radius: 8px !important;
}
#view-novi-studio .wk-kachel-punkte span,
:root[data-skin] #view-novi-studio .wk-kachel-punkte span {
  display: block !important; width: 3px !important; height: 3px !important;
  border-radius: 50% !important; background: #9A9AA6 !important;
}
#view-novi-studio .wk-kachel-punkte:hover,
:root[data-skin] #view-novi-studio .wk-kachel-punkte:hover { background: #F2F2F6 !important; }
#view-novi-studio .wk-kachel-punkte:hover span,
:root[data-skin] #view-novi-studio .wk-kachel-punkte:hover span { background: #4A4A55 !important; }
#view-novi-studio .wk-kachel-menue,
:root[data-skin] #view-novi-studio .wk-kachel-menue {
  position: absolute !important; top: 30px !important; right: 0 !important;
  min-width: 176px !important; padding: 5px !important; z-index: 6 !important;
  border-radius: 12px !important; background: #FFFFFF !important;
  border: 1px solid #E7E7EE !important;
  box-shadow: 0 10px 30px rgba(20,20,30,.14) !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
}
#view-novi-studio .wk-kachel-menue[hidden],
:root[data-skin] #view-novi-studio .wk-kachel-menue[hidden] { display: none !important; }
#view-novi-studio .wk-kachel-menue button,
:root[data-skin] #view-novi-studio .wk-kachel-menue button {
  display: block !important; width: 100% !important; text-align: left !important;
  padding: 8px 10px !important; border: 0 !important; border-radius: 8px !important;
  background: none !important; cursor: pointer !important;
  font: inherit !important; font-size: 13px !important;
  color: #2A2A33 !important; -webkit-text-fill-color: #2A2A33 !important;
}
#view-novi-studio .wk-kachel-menue button:hover,
:root[data-skin] #view-novi-studio .wk-kachel-menue button:hover { background: #F4F4F8 !important; }
#view-novi-studio .wk-kachel-menue button.ist-gefahr,
:root[data-skin] #view-novi-studio .wk-kachel-menue button.ist-gefahr {
  color: #D32029 !important; -webkit-text-fill-color: #D32029 !important;
}
#view-novi-studio .wk-kachel-menue button.ist-gefahr:hover,
:root[data-skin] #view-novi-studio .wk-kachel-menue button.ist-gefahr:hover {
  background: rgba(211,32,41,.08) !important;
}

/* ── Der pulsende Punkt: hier laeuft gerade etwas ────────────────── */
#view-novi-studio .wk-punkt-live,
:root[data-skin] #view-novi-studio .wk-punkt-live {
  display: inline-block !important; width: 7px !important; height: 7px !important;
  border-radius: 50% !important; margin-right: 7px !important;
  background: var(--spk-rot, #E2001A) !important;
  box-shadow: 0 0 0 0 rgba(226,0,26,.55) !important;
  animation: wkPuls 1.7s ease-out infinite !important;
}
@keyframes wkPuls {
  70% { box-shadow: 0 0 0 7px rgba(226,0,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,0,26,0); }
}
/* Waehrend ein Render laeuft, traegt die ganze Karte einen roten Saum -
   auf einen Blick sichtbar, welches der Projekte gerade arbeitet. */
#view-novi-studio .wk-projektkachel.ist-laeuft,
:root[data-skin] #view-novi-studio .wk-projektkachel.ist-laeuft {
  border-color: rgba(226,0,26,.30) !important;
}

/* ── Das Raster: breite Karten, nicht mehr die 210px-Quadrate ────── */
#view-novi-studio .wk-projektraster,
:root[data-skin] #view-novi-studio .wk-projektraster {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 820px) {
  #view-novi-studio .wk-projektraster,
  :root[data-skin] #view-novi-studio .wk-projektraster {
    grid-template-columns: 1fr !important;
  }
  #view-novi-studio .wk-kachel-werte,
  :root[data-skin] #view-novi-studio .wk-kachel-werte {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ── Nachtrag aus der Gegenpruefung (25.08.) ─────────────────────── */

/* Der Titel braucht wieder eine Grenze - nur nicht die alte. Ohne
   jede Grenze zieht eine lange Ueberschrift die ganze Rasterzeile
   hoch; im breiten Format passen zwei Zeilen fuer fast jeden Titel. */
#view-novi-studio .wk-kachel-text > b,
:root[data-skin] #view-novi-studio .wk-kachel-text > b {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  font-size: 15px !important; line-height: 1.3 !important;
  margin: 0 0 3px !important;
}
#view-novi-studio .wk-kachel-thema,
:root[data-skin] #view-novi-studio .wk-kachel-thema {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
}
/* Die alte Randregel der Kachel-<b> trifft sonst auch die NEUEN <b>
   in Gesamtzahl und Kennzahl-Kaestchen. */
#view-novi-studio .wk-kg-kopf > b,
#view-novi-studio .wk-kw > b,
:root[data-skin] #view-novi-studio .wk-kg-kopf > b,
:root[data-skin] #view-novi-studio .wk-kw > b {
  margin: 0 !important;
}
/* Der alte Aussenabstand der Standzeile addiert sich auf den neuen
   Flex-Abstand der Karte. */
#view-novi-studio .wk-kachel-text .wk-kachel-stand,
:root[data-skin] #view-novi-studio .wk-kachel-text .wk-kachel-stand {
  margin-bottom: 0 !important; line-height: 1.45 !important;
}

/* Weisse Karte auf weisser Flaeche war kaum als Karte zu erkennen -
   die Sektion bekommt einen leicht getoenten Grund. */
#view-novi-studio .wk-projektsektion,
:root[data-skin] #view-novi-studio .wk-projektsektion {
  background: #F7F7FA !important;
  border-color: #E9E9EF !important;
}

/* Im Entwurf ist der Pfeil RUND. */
#view-novi-studio .wk-kachel-pfeil,
:root[data-skin] #view-novi-studio .wk-kachel-pfeil {
  border-radius: 50% !important;
}

/* ── Der Fehler-Zustand (neu) ────────────────────────────────────── */
#view-novi-studio .wk-punkt-fehler,
:root[data-skin] #view-novi-studio .wk-punkt-fehler {
  display: inline-block !important; width: 7px !important; height: 7px !important;
  border-radius: 50% !important; margin-right: 7px !important;
  vertical-align: 1px !important;
  background: #D32029 !important;
}
/* Kein Pulsieren: ein Fehler ist ein Zustand, keine Taetigkeit. */
#view-novi-studio .wk-projektkachel.ist-fehler,
:root[data-skin] #view-novi-studio .wk-projektkachel.ist-fehler {
  border-color: rgba(211,32,41,.40) !important;
  background: #FFFBFB !important;
}
#view-novi-studio .wk-projektkachel.ist-fehler .wk-kachel-stand,
:root[data-skin] #view-novi-studio .wk-projektkachel.ist-fehler .wk-kachel-stand {
  color: #B3161E !important; -webkit-text-fill-color: #B3161E !important;
  font-weight: 600 !important;
}
#view-novi-studio .wk-projektkachel.ist-fehler::after,
:root[data-skin] #view-novi-studio .wk-projektkachel.ist-fehler::after {
  background: linear-gradient(90deg, rgba(211,32,41,0), #D32029, rgba(211,32,41,0)) !important;
  opacity: .8 !important;
}

/* ══ Handy-Ansicht (24.08., Wunsch) ═══════

   Nur die Stellen, die wirklich brechen. Die groesste ist Punkt 1:
   ein einziger Prompt-Kasten mit 200-Zeichen-Zeilen schiebt die
   ganze Seite waagerecht auf, und danach sitzt kein Tippziel mehr
   dort, wo es aussieht. */

@media (max-width: 760px) {

  /* 1 - Kein waagerechtes Schieben. Breite Inhalte scrollen in ihrem
     EIGENEN Kasten, nicht die Seite. */
  #view-novi-studio, :root[data-skin] #view-novi-studio { overflow-x: hidden !important; }
  #view-novi-studio .wk-promptbox, :root[data-skin] #view-novi-studio .wk-promptbox,
  #view-novi-studio .wk-skript-text, :root[data-skin] #view-novi-studio .wk-skript-text,
  #view-novi-studio .wk-dash-vor, :root[data-skin] #view-novi-studio .wk-dash-vor {
    white-space: pre-wrap !important; word-break: break-word !important;
    overflow-wrap: anywhere !important; overflow-x: auto !important;
    font-size: 11px !important; line-height: 1.5 !important;
  }
  #view-novi-studio table, :root[data-skin] #view-novi-studio table { display: block !important; overflow-x: auto !important; }

  /* 2 - Knopfreihen umbrechen statt hinausschieben. */
  #view-novi-studio .wk-promptzeile, :root[data-skin] #view-novi-studio .wk-promptzeile,
  #view-novi-studio .wk-out-leiste, :root[data-skin] #view-novi-studio .wk-out-leiste,
  #view-novi-studio .wk-dash-kopf, :root[data-skin] #view-novi-studio .wk-dash-kopf,
  #view-novi-studio .wk-dash-wege, :root[data-skin] #view-novi-studio .wk-dash-wege {
    flex-wrap: wrap !important; gap: 8px !important;
  }
  #view-novi-studio .wk-promptzeile > button, :root[data-skin] #view-novi-studio .wk-promptzeile > button,
  #view-novi-studio .wk-promptzeile > a, :root[data-skin] #view-novi-studio .wk-promptzeile > a {
    margin-left: 0 !important;
  }

  /* 3 - Tippziele. Alles Antippbare mindestens 40px hoch. */
  #view-novi-studio .wk-knopf, :root[data-skin] #view-novi-studio .wk-knopf,
  #view-novi-studio .wk-promptzeile button, :root[data-skin] #view-novi-studio .wk-promptzeile button,
  #view-novi-studio .wk-dash-kopie, :root[data-skin] #view-novi-studio .wk-dash-kopie,
  #view-novi-studio .wk-rl-weg, :root[data-skin] #view-novi-studio .wk-rl-weg {
    min-height: 40px !important; padding-top: 9px !important; padding-bottom: 9px !important;
    font-size: 13px !important;
  }
  #view-novi-studio .wk-output, :root[data-skin] #view-novi-studio .wk-output,
  #view-novi-studio .wk-eingabe, :root[data-skin] #view-novi-studio .wk-eingabe {
    width: 100% !important; min-height: 44px !important; font-size: 15px !important;
  }
  /* 15px oder mehr: darunter zoomt der Browser beim Antippen von
     selbst hinein, und danach steht die Seite verschoben. */
  #view-novi-studio audio, :root[data-skin] #view-novi-studio audio { width: 100% !important; }

  /* 4 - Das Dashboard steht oben. Seine Bildkacheln bleiben klein,
     damit die erste Bildschirmseite nicht nur aus Bildern besteht. */
  #view-novi-studio #wk-dash, :root[data-skin] #view-novi-studio #wk-dash {
    padding: 12px !important; gap: 10px !important;
  }
  /* Zwei Bilder je Zeile statt drei: bei drei blieben je Bild rund
     100px, und die drei Knoepfe darunter brachen ungleichmaessig um
     (zwei oben, einer unten). Mit zwei Spalten passen zwei Knoepfe
     nebeneinander und der dritte darunter in voller Breite - das
     sieht nach Absicht aus statt nach Zufall. */
  #view-novi-studio #wk-dash .wk-leiste, :root[data-skin] #view-novi-studio #wk-dash .wk-leiste {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #view-novi-studio #wk-dash .wk-rl-weg, :root[data-skin] #view-novi-studio #wk-dash .wk-rl-weg {
    flex: 1 1 46% !important; font-size: 11px !important;
  }
  #view-novi-studio #wk-dash .wk-dash-vor, :root[data-skin] #view-novi-studio #wk-dash .wk-dash-vor {
    max-height: 90px !important;
  }

  /* 5 - Platz fuer die Leiste unten, damit sie nichts verdeckt. */
  #view-novi-studio .novi-content, :root[data-skin] #view-novi-studio .novi-content {
    padding-bottom: 128px !important;
  }
  #view-novi-studio .wk-abschnitt, :root[data-skin] #view-novi-studio .wk-abschnitt {
    scroll-margin-top: 12px !important;
  }

  /* Der Phasenkopf braucht auf dem Handy weniger Luft. */
  #view-novi-studio #novi-page-werk-lauf .wk-kopf,
  :root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-kopf {
    margin: 18px 0 8px !important;
  }

  /* ─── JARVIS auf dem Handy ─── */
  /* Zwei Kacheln je Zeile passen auf 360px (2 x 156 + 12 Abstand).
     Drei waeren 100px breit - der Name bricht dann mitten im Wort. */
  /* 24.08.: Die Kacheln liegen jetzt grundsaetzlich als Zeile
     (Ikon neben Name). Auf dem Handy passt dazu eine je Zeile;
     zwei halbe Namen wie "AI Dropship..." sind unlesbar. */
  :root[data-skin] #view-jarvis .novi-bk-raster, #view-jarvis .novi-bk-raster {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  :root[data-skin] #view-jarvis .novi-bk, #view-jarvis .novi-bk {
    min-height: 62px !important; padding: 12px 14px !important; gap: 12px !important;
    aspect-ratio: auto !important;
  }
  :root[data-skin] #view-jarvis .novi-bk-ikon, #view-jarvis .novi-bk-ikon {
    width: 36px !important; height: 36px !important;
  }
  :root[data-skin] #view-jarvis .novi-bk-name, #view-jarvis .novi-bk-name {
    font-size: 13px !important; line-height: 1.25 !important;
  }
  :root[data-skin] #view-jarvis .jvs-block, #view-jarvis .jvs-block {
    padding: 14px !important; border-radius: 14px !important;
  }
  :root[data-skin] #view-jarvis #jvs-uhr, #view-jarvis #jvs-uhr { font-size: 27px !important; }
  :root[data-skin] #view-jarvis .view-header, #view-jarvis .view-header {
    padding: 10px 0 !important; margin-bottom: 16px !important; gap: 8px !important;
  }
  :root[data-skin] #view-jarvis .view-header h1, #view-jarvis .view-header h1 { font-size: 16px !important; }
  /* Die Kontozeile frisst auf 360px die ganze Breite - sie darf
     umbrechen, statt den Rest hinauszuschieben. */
  :root[data-skin] #view-jarvis .jvs-auth-ecke, #view-jarvis .jvs-auth-ecke {
    margin-left: 0 !important; flex-wrap: wrap !important; font-size: 11px !important;
  }
  :root[data-skin] #view-jarvis .jvs-auth-konto, #view-jarvis .jvs-auth-konto {
    max-width: 46vw !important; overflow: hidden !important; text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  :root[data-skin] #view-jarvis .jvs-deck-raster button, #view-jarvis .jvs-deck-raster button {
    min-height: 40px !important;
  }
  :root[data-skin] #view-jarvis .jvs-glocke, #view-jarvis .jvs-glocke,
  :root[data-skin] #view-jarvis .jvs-stumm, #view-jarvis .jvs-stumm {
    min-width: 40px !important; min-height: 40px !important;
  }
}

/* Sehr schmal (bis 380px): eine Kachel je Zeile ist lesbarer als zwei
   halbe. */
@media (max-width: 380px) {
  :root[data-skin] #view-jarvis .novi-bk-raster, #view-jarvis .novi-bk-raster {
    grid-template-columns: 1fr !important;
  }
  :root[data-skin] #view-jarvis .novi-bk, #view-jarvis .novi-bk {
    flex-direction: row !important; align-items: center !important;
    justify-content: flex-start !important; min-height: 62px !important;
    aspect-ratio: auto !important; height: auto !important;
  }
}
/* ══ Ein durchgehender Ablauf statt fuenf Seiten (24.08.) ═══
   Der Phasenkopf war eine Seitenueberschrift. Auf einer Seite ist er
   eine Trennzeile - schmaler, ruhiger, und er traegt keine
   Wiederholung von Kanal und Titel mehr (die stehen im Dashboard). */
#view-novi-studio #novi-page-werk-lauf .wk-kopf,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-kopf {
  margin: 26px 0 10px !important; padding: 0 0 8px !important;
  border-bottom: 2px solid var(--spk-rot, #E2001A) !important;
  background: none !important; box-shadow: none !important;
  border-radius: 0 !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-abschnitt:first-child .wk-kopf,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-abschnitt:first-child .wk-kopf {
  margin-top: 0 !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-kopf-haupt b,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .wk-kopf-haupt b {
  font-size: 13px !important; letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
/* ══ Video Dashboard und die eine lange Seite (23.08.) ═════
   Das Grid .novi-ph-split stand samt Umbruchpunkten schon im
   Stylesheet ("Phasenseiten mit Video-Dashboard rechts"), war aber
   ohne Aufrufer. Hier wird es benutzt und um das erweitert, was das
   Dashboard braucht. Der Klebepunkt liegt bei 14px statt 8px: die
   Topbar klebt selbst oben und haette das Dashboard sonst teilweise
   verdeckt. */
#view-novi-studio .wk-abschnitt, :root[data-skin] #view-novi-studio .wk-abschnitt {
  display: block !important; scroll-margin-top: 72px !important;
}
#view-novi-studio .novi-ph-split-side, :root[data-skin] #view-novi-studio .novi-ph-split-side {
  position: sticky !important; top: 14px !important; align-self: start !important;
  max-height: calc(100vh - 120px) !important; overflow-y: auto !important;
}
#view-novi-studio #wk-dash, :root[data-skin] #view-novi-studio #wk-dash {
  background: #FFFFFF !important; border: 1px solid #E6E6EA !important;
  border-radius: 14px !important; padding: 14px !important;
  display: flex !important; flex-direction: column !important; gap: 12px !important;
}
#view-novi-studio .wk-dash-titel, :root[data-skin] #view-novi-studio .wk-dash-titel {
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; color: #6A6A75 !important;
  -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-dash-block, :root[data-skin] #view-novi-studio .wk-dash-block {
  border-top: 1px solid #EFEFF3 !important; padding-top: 10px !important;
}
#view-novi-studio .wk-dash-kopf, :root[data-skin] #view-novi-studio .wk-dash-kopf {
  display: flex !important; align-items: center !important; gap: 8px !important;
  margin-bottom: 6px !important; font-size: 13px !important;
}
#view-novi-studio .wk-dash-kopf > b, :root[data-skin] #view-novi-studio .wk-dash-kopf > b {
  flex: 1 !important; min-width: 0 !important;
}
#view-novi-studio .wk-dash-kopie, :root[data-skin] #view-novi-studio .wk-dash-kopie {
  border: 1px solid #DEDEE4 !important; background: #FFFFFF !important;
  border-radius: 999px !important; padding: 3px 10px !important; font-size: 12px !important;
  cursor: pointer !important; color: #2A2A31 !important;
  -webkit-text-fill-color: #2A2A31 !important; text-decoration: none !important;
}
#view-novi-studio .wk-dash-wert, :root[data-skin] #view-novi-studio .wk-dash-wert {
  font-size: 13px !important; line-height: 1.45 !important; word-break: break-word !important;
}
#view-novi-studio .wk-dash-wert audio, :root[data-skin] #view-novi-studio .wk-dash-wert audio {
  width: 100% !important;
}
#view-novi-studio .wk-dash-leer, :root[data-skin] #view-novi-studio .wk-dash-leer {
  font-size: 12px !important; color: #9A9AA4 !important;
  -webkit-text-fill-color: #9A9AA4 !important;
}
#view-novi-studio .wk-dash-mass, :root[data-skin] #view-novi-studio .wk-dash-mass {
  font-size: 12px !important; color: #6A6A75 !important;
  -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-dash-vor, :root[data-skin] #view-novi-studio .wk-dash-vor {
  margin: 6px 0 0 !important; max-height: 120px !important; overflow: auto !important;
  background: #F7F7F9 !important; border-radius: 8px !important; padding: 8px !important;
  font-size: 11px !important; white-space: pre-wrap !important; word-break: break-word !important;
}
#view-novi-studio .wk-dash-wege, :root[data-skin] #view-novi-studio .wk-dash-wege {
  display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin-top: 8px !important;
}
#view-novi-studio .wk-dash-feld, :root[data-skin] #view-novi-studio .wk-dash-feld {
  width: 100% !important; font-size: 12px !important;
}
#view-novi-studio .wk-dash-stand, :root[data-skin] #view-novi-studio .wk-dash-stand {
  margin-top: 8px !important;
}
/* Am Bildschirm nachgesehen: fuenf Bilder mit je drei Knoepfen
   untereinander fuellten die halbe Spalte, und alles Weitere rutschte
   aus dem Blick. Drei nebeneinander, kleine Bilder, Knoepfe in einer
   Zeile. */
#view-novi-studio #wk-dash .wk-leiste, :root[data-skin] #view-novi-studio #wk-dash .wk-leiste {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important;
}
#view-novi-studio #wk-dash .wk-leiste figure,
:root[data-skin] #view-novi-studio #wk-dash .wk-leiste figure {
  margin: 0 !important; padding: 0 !important;
}
#view-novi-studio #wk-dash .wk-leiste img,
:root[data-skin] #view-novi-studio #wk-dash .wk-leiste img {
  aspect-ratio: 16 / 9 !important; object-fit: cover !important;
  width: 100% !important; height: auto !important; border-radius: 6px !important;
}
#view-novi-studio #wk-dash .wk-leiste figcaption,
:root[data-skin] #view-novi-studio #wk-dash .wk-leiste figcaption {
  font-size: 9px !important; letter-spacing: .02em !important; margin: 3px 0 2px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
#view-novi-studio #wk-dash .wk-rl-wege,
:root[data-skin] #view-novi-studio #wk-dash .wk-rl-wege {
  display: flex !important; flex-direction: row !important; gap: 3px !important;
}
#view-novi-studio #wk-dash .wk-rl-weg,
:root[data-skin] #view-novi-studio #wk-dash .wk-rl-weg {
  flex: 1 1 auto !important; min-width: 0 !important; padding: 2px 0 !important;
  font-size: 9px !important; text-align: center !important;
  white-space: nowrap !important; overflow: hidden !important;
}
/* Nachgemessen: das Fenster des Nutzers ist 1080px breit. Die
   vorhandene Regel bei 1100px haette die rechte Spalte dort auf
   eine Spalte gestellt - das Dashboard waere nie rechts erschienen.
   Fuer die Workflow-Seite wird das Grid deshalb ausdruecklich
   gesetzt und erst bei 900px gestapelt. Darunter blieben der
   Phasenspalte rund 500px, und das ist keine Spalte mehr. */
/* 24.08.: drei Spalten - Liste, gewaehlter Schritt, Dashboard. */
#view-novi-studio #novi-page-werk-lauf .novi-ph-split,
:root[data-skin] #view-novi-studio #novi-page-werk-lauf .novi-ph-split {
  display: grid !important;
  /* 25.08.: zwei Spalten - das Video Dashboard ist entfernt. */
  grid-template-columns: 216px minmax(0, 1fr) !important;
  grid-template-areas: "liste buehne" !important;
  gap: 14px !important; align-items: start !important;
}
#view-novi-studio #novi-page-werk-lauf .wk-liste { grid-area: liste !important; }
#view-novi-studio #novi-page-werk-lauf .novi-ph-split-main { grid-area: buehne !important; }
/* Unter 1180px bleiben der Mitte sonst rund 330px. Lieber faellt das
   Dashboard unter den Schritt, als dass beide zu schmal werden. */
@media (max-width: 1180px) {
  #view-novi-studio #novi-page-werk-lauf .novi-ph-split,
  :root[data-skin] #view-novi-studio #novi-page-werk-lauf .novi-ph-split {
    grid-template-columns: 196px minmax(0, 1fr) !important;
    grid-template-areas: "liste buehne" !important;
  }
  #view-novi-studio #novi-page-werk-lauf .novi-ph-split-side {
    position: static !important; max-height: none !important;
  }
}
@media (max-width: 900px) {
  #view-novi-studio #novi-page-werk-lauf .novi-ph-split,
  :root[data-skin] #view-novi-studio #novi-page-werk-lauf .novi-ph-split {
    grid-template-columns: 1fr !important;
    grid-template-areas: "liste" "buehne" !important;
  }
  #view-novi-studio .novi-ph-split-side, :root[data-skin] #view-novi-studio .novi-ph-split-side {
    position: static !important; max-height: none !important; order: -1 !important;
  }
}

/* ══ Videos 2.0 (31.08., Wunsch): Spalten wie im Werk — schmale
   Schrittliste links (216px), breite Karte rechts. Die generische
   Skin-Regel oben (1fr + 292px) haette sonst die LINKE Spalte
   breit gemacht; gleiche Loesung wie beim Werk-Block direkt
   darueber, gleiche Umbruchpunkte. */
#view-novi-studio #novi-page-videos2-kanal .novi-ph-split,
:root[data-skin] #view-novi-studio #novi-page-videos2-kanal .novi-ph-split,
#view-novi-studio #novi-page-videos2-video .novi-ph-split,
:root[data-skin] #view-novi-studio #novi-page-videos2-video .novi-ph-split {
  display: grid !important;
  grid-template-columns: 216px minmax(0, 1fr) !important;
  grid-template-areas: "liste buehne" !important;
  gap: 14px !important; align-items: start !important;
}
#view-novi-studio #novi-page-videos2-kanal .wk-liste,
#view-novi-studio #novi-page-videos2-video .wk-liste { grid-area: liste !important; }
#view-novi-studio #novi-page-videos2-kanal .novi-ph-split-main,
#view-novi-studio #novi-page-videos2-video .novi-ph-split-main { grid-area: buehne !important; }
@media (max-width: 1180px) {
  #view-novi-studio #novi-page-videos2-kanal .novi-ph-split,
  :root[data-skin] #view-novi-studio #novi-page-videos2-kanal .novi-ph-split,
  #view-novi-studio #novi-page-videos2-video .novi-ph-split,
  :root[data-skin] #view-novi-studio #novi-page-videos2-video .novi-ph-split {
    grid-template-columns: 196px minmax(0, 1fr) !important;
    grid-template-areas: "liste buehne" !important;
  }
}
@media (max-width: 900px) {
  #view-novi-studio #novi-page-videos2-kanal .novi-ph-split,
  :root[data-skin] #view-novi-studio #novi-page-videos2-kanal .novi-ph-split,
  #view-novi-studio #novi-page-videos2-video .novi-ph-split,
  :root[data-skin] #view-novi-studio #novi-page-videos2-video .novi-ph-split {
    grid-template-columns: 1fr !important;
    grid-template-areas: "liste" "buehne" !important;
  }
}

/* ══ Fortschritt der Vertonung (23.08., Wunsch) ═══════════
   Der Balken deckt den ganzen Vorgang ab, damit die Anzeige am Ende
   nicht von 100 Prozent auf "bitte warten" springt. */
#view-novi-studio .wk-vertlauf, :root[data-skin] #view-novi-studio .wk-vertlauf {
  flex-basis: 100% !important; display: flex !important; align-items: center !important;
  gap: 10px !important; margin-top: 8px !important;
}
#view-novi-studio .wk-vertlauf[hidden], :root[data-skin] #view-novi-studio .wk-vertlauf[hidden] {
  display: none !important;
}
#view-novi-studio .wk-vertbalken, :root[data-skin] #view-novi-studio .wk-vertbalken {
  flex: 1 !important; height: 8px !important; border-radius: 999px !important;
  background: #EDEDED !important; overflow: hidden !important; min-width: 140px !important;
}
#view-novi-studio .wk-vertbalken > span, :root[data-skin] #view-novi-studio .wk-vertbalken > span {
  display: block !important; height: 100% !important; width: 0 !important;
  background: var(--spk-rot, #E2001A) !important;
  transition: width .35s ease !important;
}
#view-novi-studio .wk-vertzeile, :root[data-skin] #view-novi-studio .wk-vertzeile {
  font-size: 12px !important; white-space: nowrap !important;
  color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
}

/* ══ Ganzes Skript vertonen (23.08., Wunsch) ═════════════
   Der Knopf steht unter den beiden Haelften, weil er beide
   betrifft - nicht in einer der zwei Spalten. */
#view-novi-studio .wk-gesamtvertonung, :root[data-skin] #view-novi-studio .wk-gesamtvertonung {
  display: flex !important; align-items: center !important; gap: 10px !important;
  flex-wrap: wrap !important; margin-top: 12px !important;
}
#view-novi-studio .wk-gesamtvertonung audio, :root[data-skin] #view-novi-studio .wk-gesamtvertonung audio {
  height: 34px !important; max-width: 100% !important;
}

/* ══ Finales Skript in einer Box (23.08., Wunsch) ══════════
   Der Text kann sehr lang werden - die Box bekommt eine Hoehe und
   scrollt in sich, statt die ganze Seite zu strecken. */
#view-novi-studio .wk-skriptkarte, :root[data-skin] #view-novi-studio .wk-skriptkarte {
  margin-top: 12px !important; border: 1px solid #DEDEDE !important;
  border-radius: 12px !important; background: #FFFFFF !important;
  overflow: hidden !important;
}
#view-novi-studio .wk-skript-kopf, :root[data-skin] #view-novi-studio .wk-skript-kopf {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 10px 12px !important; border-bottom: 1px solid #EEEEEE !important;
  font-size: 13px !important;
  color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
}
#view-novi-studio .wk-skript-mass, :root[data-skin] #view-novi-studio .wk-skript-mass {
  font-size: 11px !important;
  color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-skript-kopf .wk-knopf, :root[data-skin] #view-novi-studio .wk-skript-kopf .wk-knopf {
  margin-left: auto !important;
}
#view-novi-studio .wk-skript-text, :root[data-skin] #view-novi-studio .wk-skript-text {
  margin: 0 !important; padding: 12px !important; max-height: 380px !important;
  overflow: auto !important; white-space: pre-wrap !important;
  font-size: 13px !important; line-height: 1.55 !important;
  color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
}

/* ══ Character Sheet im Thumbnail-Schritt (23.08., Wunsch) ════
   Eine einzelne Kachel in einer Leiste wuerde sich sonst ueber die
   volle Breite ziehen und wie ein Fehler aussehen. */
#view-novi-studio .wk-sheetleiste, :root[data-skin] #view-novi-studio .wk-sheetleiste {
  margin-bottom: 12px !important;
}
#view-novi-studio .wk-sheetleiste figure, :root[data-skin] #view-novi-studio .wk-sheetleiste figure {
  max-width: 260px !important;
}

/* ══ Thema-Ergebnis in drei Boxen (23.08., Wunsch) ════════
   Thema oben ueber die volle Breite, darunter Score schmal links und
   Zusammenfassung breit rechts.

   align-items: start ist der entscheidende Teil: ohne ihn strecken
   sich Grid-Zellen auf die Hoehe der hoechsten Zelle der Zeile - so
   wurde die kurze Score-Box so hoch wie die lange Zusammenfassung
   und stand fast leer da. */
#view-novi-studio .wk-themadrei, :root[data-skin] #view-novi-studio .wk-themadrei {
  display: grid !important; gap: 10px !important; margin-top: 12px !important;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr) !important;
  align-items: start !important;
}
/* Auf schmalen Fenstern untereinander — zwei Spalten waeren dort
   beide zu eng. */
@media (max-width: 640px) {
  #view-novi-studio .wk-themadrei, :root[data-skin] #view-novi-studio .wk-themadrei {
    grid-template-columns: 1fr !important;
  }
}
#view-novi-studio .wk-themakarte, :root[data-skin] #view-novi-studio .wk-themakarte {
  padding: 9px 11px !important; border: 1px solid #DEDEDE !important;
  border-radius: 10px !important; background: #FFFFFF !important;
}
#view-novi-studio .wk-themakarte.ist-haupt, :root[data-skin] #view-novi-studio .wk-themakarte.ist-haupt {
  grid-column: 1 / -1 !important; border-color: rgba(226, 0, 26, .35) !important;
}
#view-novi-studio .wk-themakarte-marke, :root[data-skin] #view-novi-studio .wk-themakarte-marke {
  display: block !important; margin-bottom: 3px !important;
  font-size: 10px !important; letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-themakarte-wert, :root[data-skin] #view-novi-studio .wk-themakarte-wert {
  font-size: 12.5px !important; line-height: 1.45 !important;
  color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
  overflow-wrap: anywhere !important;
}
#view-novi-studio .wk-themakarte.ist-haupt .wk-themakarte-wert,
:root[data-skin] #view-novi-studio .wk-themakarte.ist-haupt .wk-themakarte-wert {
  font-size: 15px !important; font-weight: 700 !important;
}
/* Ab 80 Punkten leuchtet die Box leicht gruen. */
#view-novi-studio .wk-themakarte.ist-gut, :root[data-skin] #view-novi-studio .wk-themakarte.ist-gut {
  background: rgba(10, 125, 60, .07) !important;
  border-color: rgba(10, 125, 60, .45) !important;
  box-shadow: 0 0 0 1px rgba(10, 125, 60, .10), 0 0 18px rgba(10, 125, 60, .18) !important;
}
#view-novi-studio .wk-themakarte.ist-gut .wk-themakarte-marke,
:root[data-skin] #view-novi-studio .wk-themakarte.ist-gut .wk-themakarte-marke {
  color: #0A7D3C !important; -webkit-text-fill-color: #0A7D3C !important;
}
#view-novi-studio .wk-themakarte.ist-gut .wk-themakarte-wert,
:root[data-skin] #view-novi-studio .wk-themakarte.ist-gut .wk-themakarte-wert {
  font-size: 18px !important; font-weight: 700 !important;
  color: #0A7D3C !important; -webkit-text-fill-color: #0A7D3C !important;
}
#view-novi-studio .wk-themakarte.ist-schwach .wk-themakarte-wert,
:root[data-skin] #view-novi-studio .wk-themakarte.ist-schwach .wk-themakarte-wert {
  font-size: 18px !important; font-weight: 700 !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}

/* ══ Projektkachel: die Phasen mit Namen (22.08., Wunsch) ═════
   Sechs Ziffern beantworten die Frage nicht, die man an eine Kachel
   stellt: wo stehe ich, und was kommt als naechstes. Jede Phase steht
   jetzt als eigene Zeile. */
#view-novi-studio .wk-phasenliste, :root[data-skin] #view-novi-studio .wk-phasenliste {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  margin-top: 8px !important; width: 100% !important;
}
#view-novi-studio .wk-phase, :root[data-skin] #view-novi-studio .wk-phase {
  display: flex !important; align-items: flex-start !important; gap: 8px !important;
  padding: 3px 8px !important; border-radius: 6px !important;
  font-size: 12px !important; line-height: 1.35 !important;
}
#view-novi-studio .wk-phase-nr, :root[data-skin] #view-novi-studio .wk-phase-nr {
  flex: none !important; width: 20px !important; text-align: center !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
/* Der Name darf umbrechen statt abgeschnitten zu werden: eine Kachel
   kann schmal sein, und "Thema, Titel, Thumbnails" ist der laengste
   Name. Halb gelesen ist schlimmer als zweizeilig. */
#view-novi-studio .wk-phase-name, :root[data-skin] #view-novi-studio .wk-phase-name {
  white-space: normal !important; overflow-wrap: anywhere !important;
}
#view-novi-studio .wk-phase.ist-offen, :root[data-skin] #view-novi-studio .wk-phase.ist-offen {
  color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-phase.ist-ok, :root[data-skin] #view-novi-studio .wk-phase.ist-ok {
  color: #0A7D3C !important; -webkit-text-fill-color: #0A7D3C !important;
}
#view-novi-studio .wk-phase.ist-jetzt, :root[data-skin] #view-novi-studio .wk-phase.ist-jetzt {
  background: #FFF6F6 !important; font-weight: 700 !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}

/* ══ Referenz-Thumbnails im Thumbnail-Schritt (22.08., Wunsch) ══
   Aufgeklappt, solange nicht alle drei liegen — danach zugeklappt,
   weil sie erledigt sind. */
#view-novi-studio details.wk-refbox, :root[data-skin] #view-novi-studio details.wk-refbox {
  margin: 0 0 12px !important; padding: 10px 12px !important;
  border: 1px solid #DEDEDE !important; border-radius: 12px !important;
  background: #FFFFFF !important;
}
#view-novi-studio details.wk-refbox > summary, :root[data-skin] #view-novi-studio details.wk-refbox > summary {
  cursor: pointer !important; display: flex !important; align-items: center !important;
  gap: 10px !important; list-style: none !important; font-size: 13px !important;
  color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
}
#view-novi-studio details.wk-refbox > summary::-webkit-details-marker,
:root[data-skin] #view-novi-studio details.wk-refbox > summary::-webkit-details-marker { display: none !important; }
#view-novi-studio details.wk-refbox > summary::before,
:root[data-skin] #view-novi-studio details.wk-refbox > summary::before {
  content: "\25B8" !important; color: var(--spk-rot, #E2001A) !important;
  -webkit-text-fill-color: var(--spk-rot, #E2001A) !important; transition: transform .15s !important;
}
#view-novi-studio details.wk-refbox[open] > summary::before,
:root[data-skin] #view-novi-studio details.wk-refbox[open] > summary::before { transform: rotate(90deg) !important; }
#view-novi-studio .wk-refbox-stand, :root[data-skin] #view-novi-studio .wk-refbox-stand {
  margin-left: auto !important; padding: 2px 9px !important; border-radius: 999px !important;
  border: 1px solid #DEDEDE !important; font-size: 11px !important;
  color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-refbox-stand.ist-voll, :root[data-skin] #view-novi-studio .wk-refbox-stand.ist-voll {
  border-color: rgba(10, 125, 60, .45) !important;
  color: #0A7D3C !important; -webkit-text-fill-color: #0A7D3C !important;
}

/* ══ Warnung: fehlende Referenz-Thumbnails (22.08.) ════════
   Der Bildstil haengt seit dem Umbau allein an ihnen. Fehlen sie, muss
   das VOR dem Kopieren dastehen — nicht hinterher am Bild. */
#view-novi-studio .wk-warnung, :root[data-skin] #view-novi-studio .wk-warnung {
  margin: 0 0 12px !important; padding: 10px 12px !important;
  background: #FFF6F6 !important; border: 1px solid rgba(226, 0, 26, .35) !important;
  border-left: 4px solid var(--spk-rot, #E2001A) !important; border-radius: 10px !important;
  font-size: 12.5px !important; line-height: 1.55 !important;
  color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
}
#view-novi-studio .wk-warnung b, :root[data-skin] #view-novi-studio .wk-warnung b {
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}

/* ══ Gespeichertes Ergebnis: zugeklappt (21.08., Wunsch) ═════
   Die Antworten sind mehrere Bildschirme lang und schoben alles Weitere
   nach unten. Der Kernwert steht in der Kopfzeile, damit man ohne
   Aufklappen sieht, was drinsteht. */
#view-novi-studio details.wk-ergebnis > summary,
:root[data-skin] #view-novi-studio details.wk-ergebnis > summary {
  cursor: pointer !important; display: flex !important; align-items: baseline !important;
  gap: 10px !important; flex-wrap: wrap !important; list-style: none !important;
}
#view-novi-studio details.wk-ergebnis > summary::-webkit-details-marker,
:root[data-skin] #view-novi-studio details.wk-ergebnis > summary::-webkit-details-marker {
  display: none !important;
}
#view-novi-studio details.wk-ergebnis > summary::before,
:root[data-skin] #view-novi-studio details.wk-ergebnis > summary::before {
  content: "\25B8" !important; display: inline-block !important;
  transition: transform .15s !important; color: var(--spk-rot, #E2001A) !important;
  -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio details.wk-ergebnis[open] > summary::before,
:root[data-skin] #view-novi-studio details.wk-ergebnis[open] > summary::before {
  transform: rotate(90deg) !important;
}
#view-novi-studio .wk-erg-kern, :root[data-skin] #view-novi-studio .wk-erg-kern {
  font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #6A6A75 !important;
  -webkit-text-fill-color: #6A6A75 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  max-width: 100% !important;
}

/* ══ Der fertige Bild-Prompt (21.08., Wunsch) ══════════════════════
   Er ist das, was kopiert wird — also steht er oben und traegt die
   Hausfarbe. Der Rohblock aus dem Master-Output klappt darunter auf,
   falls jemand nachsehen will; gebraucht wird er nicht. */
#view-novi-studio .wk-fertig-kopf, :root[data-skin] #view-novi-studio .wk-fertig-kopf {
  margin-top: 10px !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}
#view-novi-studio pre.wk-fertig, :root[data-skin] #view-novi-studio pre.wk-fertig {
  background: #FFFFFF !important; border: 1px solid #DEDEDE !important;
  border-left: 3px solid var(--spk-rot, #E2001A) !important;
  color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
  font-size: 11.5px !important; line-height: 1.55 !important;
  max-height: none !important; white-space: pre-wrap !important;
}
#view-novi-studio .wk-rohblock, :root[data-skin] #view-novi-studio .wk-rohblock {
  margin-top: 8px !important;
}
/* 26.08. (Wunsch): Die fertigen Bild-Prompts sind verborgen - sie
   bleiben im Projekt gespeichert und stehen weiter (unsichtbar) in der
   Karte, der Kopieren-Knopf liest sie von dort. Nur die Anzeige ist
   weg, kein Knopf und keine Funktion. */
#view-novi-studio .wk-variante .wk-fertig-kopf,
:root[data-skin] #view-novi-studio .wk-variante .wk-fertig-kopf,
#view-novi-studio .wk-variante pre.wk-fertig,
:root[data-skin] #view-novi-studio .wk-variante pre.wk-fertig {
  display: none !important;
}
#view-novi-studio .wk-rohblock > summary, :root[data-skin] #view-novi-studio .wk-rohblock > summary {
  cursor: pointer !important; font-size: 11px !important;
  color: #8A8A95 !important; -webkit-text-fill-color: #8A8A95 !important;
}
#view-novi-studio .wk-thumb-wo, :root[data-skin] #view-novi-studio .wk-thumb-wo {
  margin: 10px 0 2px !important; font-size: 12px !important;
  color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
}
#view-novi-studio .wk-thumb-wo b, :root[data-skin] #view-novi-studio .wk-thumb-wo b {
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
}

/* ══ Upload-Termin (21.08., Wunsch) ════════════════════════════════
   Zwei Felder und ein Knopf in einer Zeile. Auf schmalen Fenstern
   brechen sie um, statt sich gegenseitig zu quetschen. */
#view-novi-studio .wk-termin, :root[data-skin] #view-novi-studio .wk-termin {
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
  align-items: flex-end !important; margin-top: 4px !important;
}
#view-novi-studio .wk-termin label, :root[data-skin] #view-novi-studio .wk-termin label {
  display: flex !important; flex-direction: column !important; gap: 4px !important;
  font-size: 11.5px !important; color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-termin input, :root[data-skin] #view-novi-studio .wk-termin input {
  background: #FAFAFC !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
  border: 1px solid #DEDEDE !important; border-radius: 8px !important;
  padding: 8px 10px !important; font: inherit !important; font-size: 13px !important;
  min-height: 36px !important;
}
#view-novi-studio .wk-termin input:focus, :root[data-skin] #view-novi-studio .wk-termin input:focus {
  outline: none !important; border-color: var(--spk-rot, #E2001A) !important;
  box-shadow: 0 0 0 3px rgba(226, 0, 26, .12) !important;
}

/* ══ Wo der Prompt hingehoert (21.08., Wunsch) ═════════════════════
   Ein Prompt ohne Zielort ist eine halbe Anweisung. Der Hinweis steht
   in der Prompt-Zeile selbst, nicht als Fussnote darunter — dort, wo
   der Blick beim Kopieren ohnehin hinfaellt. */
#view-novi-studio .wk-wo, :root[data-skin] #view-novi-studio .wk-wo {
  margin-left: 10px !important; padding: 2px 9px !important;
  border: 1px solid #DEDEDE !important; border-radius: 999px !important;
  background: #FFFFFF !important; font-size: 11px !important;
  color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
  white-space: nowrap !important;
}
#view-novi-studio .wk-wo b, :root[data-skin] #view-novi-studio .wk-wo b {
  color: var(--spk-rot, #E2001A) !important; -webkit-text-fill-color: var(--spk-rot, #E2001A) !important;
  font-weight: 700 !important;
}

/* ══ Das gerenderte Bild in seiner Varianten-Karte ═════════════════
   Frueher stand es in einer zweiten Reihe unter den Karten, die
   denselben Prompt noch einmal zeigte. Ein Bild gehoert zu seiner
   Variante, nicht in eine Parallelliste. */
#view-novi-studio .wk-variante-bild, :root[data-skin] #view-novi-studio .wk-variante-bild {
  margin-top: 8px !important;
}
#view-novi-studio .wk-variante-bild img, :root[data-skin] #view-novi-studio .wk-variante-bild img {
  display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important;
  object-fit: cover !important; border-radius: 8px !important;
  border: 1px solid #DEDEDE !important; background: #FAFAFC !important;
}
#view-novi-studio .wk-variante-bild .wk-leer, :root[data-skin] #view-novi-studio .wk-variante-bild .wk-leer {
  display: flex !important; align-items: center !important; justify-content: center !important;
  aspect-ratio: 16 / 9 !important; border: 1px dashed #DEDEDE !important;
  border-radius: 8px !important; background: #FAFAFC !important;
  font-size: 11.5px !important; color: #8A8A95 !important; -webkit-text-fill-color: #8A8A95 !important;
}
#view-novi-studio .wk-variante-bildwege, :root[data-skin] #view-novi-studio .wk-variante-bildwege {
  display: flex !important; gap: 6px !important; margin-top: 6px !important;
}
#view-novi-studio .wk-variante-bildwege .wk-knopf, :root[data-skin] #view-novi-studio .wk-variante-bildwege .wk-knopf {
  flex: 1 1 auto !important; min-height: 28px !important; padding: 3px 10px !important;
  font-size: 11.5px !important; cursor: pointer !important; text-align: center !important;
}

/* ══ Bild-Regie je Projekt (21.08., Wunsch) ═════════════════════════
   Ein Eingabefeld, das aussieht wie ein Eingabefeld: heller Grund,
   sichtbare Kante, Beschriftung darueber. Es steht ueber dem Prompt,
   weil es den Prompt veraendert - nicht darunter als Nachtrag. */
#view-novi-studio .wk-regie, :root[data-skin] #view-novi-studio .wk-regie {
  background: #FFFFFF !important; border: 1px solid #DEDEDE !important;
  border-left: 4px solid var(--spk-rot, #E2001A) !important;
  border-radius: 12px !important; padding: 12px 14px !important; margin: 0 0 12px !important;
}
#view-novi-studio .wk-regie label, :root[data-skin] #view-novi-studio .wk-regie label {
  display: block !important; margin: 0 0 8px !important;
}
#view-novi-studio .wk-regie label b, :root[data-skin] #view-novi-studio .wk-regie label b {
  display: block !important; font-size: 13.5px !important; font-weight: 700 !important;
  color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
}
#view-novi-studio .wk-regie label span, :root[data-skin] #view-novi-studio .wk-regie label span {
  display: block !important; margin-top: 2px !important; font-size: 11.5px !important;
  line-height: 1.5 !important; color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-regie textarea, :root[data-skin] #view-novi-studio .wk-regie textarea {
  width: 100% !important; box-sizing: border-box !important;
  background: #FAFAFC !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important;
  border: 1px solid #DEDEDE !important; border-radius: 8px !important;
  padding: 9px 11px !important; font: inherit !important; font-size: 13px !important;
  line-height: 1.55 !important; resize: vertical !important; min-height: 62px !important;
}
#view-novi-studio .wk-regie textarea:focus, :root[data-skin] #view-novi-studio .wk-regie textarea:focus {
  outline: none !important; border-color: var(--spk-rot, #E2001A) !important;
  box-shadow: 0 0 0 3px rgba(226, 0, 26, .12) !important;
}
#view-novi-studio .wk-regie-fuss, :root[data-skin] #view-novi-studio .wk-regie-fuss {
  display: flex !important; align-items: center !important; gap: 10px !important; margin-top: 8px !important;
}
#view-novi-studio .wk-regie-fuss span, :root[data-skin] #view-novi-studio .wk-regie-fuss span {
  font-size: 11.5px !important; color: #6A6A75 !important; -webkit-text-fill-color: #6A6A75 !important;
}
#view-novi-studio .wk-regie-fuss button, :root[data-skin] #view-novi-studio .wk-regie-fuss button {
  margin-left: auto !important; min-height: 28px !important; padding: 2px 12px !important;
}

#view-novi-studio .novi-ziel-balken, :root[data-skin] #view-novi-studio .novi-ziel-balken,
#view-novi-studio .novi-ziel-monatsbalken, :root[data-skin] #view-novi-studio .novi-ziel-monatsbalken { background: #EDEDF1 !important; }

/* ══ Render-Tafel auf den dunklen Grund (17.08.) ═══════════════════
   Die Tafel war Zeile für Zeile auf hell verdrahtet: background:#fff,
   Kästen in #fafafc, Beschriftungen in #8a8a95, Akzente in
   Sparkassen-Rot. Auf dunklem Grund ein weißer Block — und die Werte
   standen in Grau auf Fast-Weiß, der schwächste Kontrast der ganzen
   Anwendung. Ausgerechnet dort, wo man während eines 40-Minuten-
   Renders dauernd hinschaut.

   Farblogik: läuft = Cyan, fertig = Grün, Fehler = Gelb. Kein Wort,
   kein Wert und kein Zustand ändert sich — nur die Optik. */

#view-novi-studio .novi-render-tafel, :root[data-skin] #view-novi-studio .novi-render-tafel { background: var(--nt-flaeche) !important; border: 1px solid var(--nt-linie) !important; border-left: 4px solid var(--nt-cyan) !important; border-radius: var(--nt-radius-gross) !important; box-shadow: 0 18px 40px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03) !important; }
#view-novi-studio .novi-render-tafel.ist-fertig, :root[data-skin] #view-novi-studio .novi-render-tafel.ist-fertig { border-left-color: var(--nt-gut) !important; }
#view-novi-studio .novi-render-tafel.ist-fehler, :root[data-skin] #view-novi-studio .novi-render-tafel.ist-fehler { border-left-color: var(--nt-warnung) !important; }

/* Die große Zahl und der Zustand daneben. */
#view-novi-studio .novi-render-wert b, :root[data-skin] #view-novi-studio .novi-render-wert b { color: var(--nt-cyan) !important; -webkit-text-fill-color: var(--nt-cyan) !important; }
#view-novi-studio .novi-render-wert > span:not(.novi-render-puls), :root[data-skin] #view-novi-studio .novi-render-wert > span:not(.novi-render-puls) { color: var(--nt-cyan) !important; -webkit-text-fill-color: var(--nt-cyan) !important; }
#view-novi-studio .novi-render-tafel.ist-fertig .novi-render-wert b, :root[data-skin] #view-novi-studio .novi-render-tafel.ist-fertig .novi-render-wert b { color: var(--nt-gut) !important; -webkit-text-fill-color: var(--nt-gut) !important; }
#view-novi-studio .novi-render-tafel.ist-fertig .novi-render-wert > span, :root[data-skin] #view-novi-studio .novi-render-tafel.ist-fertig .novi-render-wert > span { color: var(--nt-gut) !important; -webkit-text-fill-color: var(--nt-gut) !important; }
#view-novi-studio .novi-render-puls, :root[data-skin] #view-novi-studio .novi-render-puls { background: var(--nt-cyan) !important; box-shadow: 0 0 12px rgba(34,211,238,.7) !important; }
#view-novi-studio .novi-render-kein-pct, :root[data-skin] #view-novi-studio .novi-render-kein-pct { color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }

/* Überschrift und Unterzeile. */
#view-novi-studio .novi-render-text b, :root[data-skin] #view-novi-studio .novi-render-text b { color: var(--nt-text-stark) !important; -webkit-text-fill-color: var(--nt-text-stark) !important; }
#view-novi-studio .novi-render-text > span, :root[data-skin] #view-novi-studio .novi-render-text > span { color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }

/* Die beiden Zeit-Kästen — hier saß der schlechteste Kontrast. */
#view-novi-studio .novi-render-zeiten > div, :root[data-skin] #view-novi-studio .novi-render-zeiten > div { background: var(--nt-flaeche-hoch) !important; border: 1px solid var(--nt-linie) !important; border-radius: var(--nt-radius-mittel) !important; }
#view-novi-studio .novi-render-zeiten span, :root[data-skin] #view-novi-studio .novi-render-zeiten span { font-size: var(--nt-schrift-micro) !important; color: var(--nt-text-leise) !important; -webkit-text-fill-color: var(--nt-text-leise) !important; }
#view-novi-studio .novi-render-zeiten b, :root[data-skin] #view-novi-studio .novi-render-zeiten b { font-size: var(--nt-schrift-basis) !important; color: var(--nt-text-stark) !important; -webkit-text-fill-color: var(--nt-text-stark) !important; }
#view-novi-studio .novi-render-unbekannt, :root[data-skin] #view-novi-studio .novi-render-unbekannt { font-size: var(--nt-schrift-xs) !important; color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }

/* Der Balken: dunkle Spur, Cyan als Fortschritt. Der wandernde
   Streifen bleibt — er zeigt, dass gearbeitet wird, ohne einen Stand
   zu behaupten. */
#view-novi-studio .novi-render-balken, :root[data-skin] #view-novi-studio .novi-render-balken { background: var(--nt-flaeche-hoch) !important; }
#view-novi-studio .novi-render-balken > i, :root[data-skin] #view-novi-studio .novi-render-balken > i { background: var(--nt-cyan) !important; }
#view-novi-studio .novi-render-tafel.ist-fertig .novi-render-balken > i, :root[data-skin] #view-novi-studio .novi-render-tafel.ist-fertig .novi-render-balken > i { background: var(--nt-gut) !important; }
#view-novi-studio .novi-render-balken.ist-unbestimmt > i, :root[data-skin] #view-novi-studio .novi-render-balken.ist-unbestimmt > i { background: linear-gradient(90deg, var(--nt-flaeche-hoch) 0%, var(--nt-cyan) 42%, var(--nt-cyan) 58%, var(--nt-flaeche-hoch) 100%) !important; background-size: 220% 100% !important; }

/* Die Kette der vier Abschnitte. */
#view-novi-studio .novi-render-kette > span, :root[data-skin] #view-novi-studio .novi-render-kette > span { background: var(--nt-flaeche-hoch) !important; border: 1px solid var(--nt-linie) !important; border-radius: var(--nt-radius-mittel) !important; font-size: var(--nt-schrift-s) !important; color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }
#view-novi-studio .novi-render-kette > span b, :root[data-skin] #view-novi-studio .novi-render-kette > span b { background: var(--nt-linie) !important; font-size: var(--nt-schrift-micro) !important; color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }
/* Erledigt: grün und ruhig. Aktiv: cyan mit Schein — der einzige Punkt,
   der Aufmerksamkeit verlangt. */
#view-novi-studio .novi-render-kette > span.ist-fertig, :root[data-skin] #view-novi-studio .novi-render-kette > span.ist-fertig { border-color: rgba(69,212,131,.35) !important; color: var(--nt-gut) !important; -webkit-text-fill-color: var(--nt-gut) !important; }
#view-novi-studio .novi-render-kette > span.ist-fertig b, :root[data-skin] #view-novi-studio .novi-render-kette > span.ist-fertig b { background: rgba(69,212,131,.18) !important; color: var(--nt-gut) !important; -webkit-text-fill-color: var(--nt-gut) !important; }
#view-novi-studio .novi-render-kette > span.ist-aktiv, :root[data-skin] #view-novi-studio .novi-render-kette > span.ist-aktiv { background: rgba(34,211,238,.10) !important; border-color: rgba(34,211,238,.45) !important; color: var(--nt-text-stark) !important; -webkit-text-fill-color: var(--nt-text-stark) !important; box-shadow: 0 0 22px -8px rgba(34,211,238,.65) !important; }
#view-novi-studio .novi-render-kette > span.ist-aktiv b, :root[data-skin] #view-novi-studio .novi-render-kette > span.ist-aktiv b { background: var(--nt-cyan) !important; color: #06121a !important; -webkit-text-fill-color: #06121a !important; }

/* ══ Die zusammengelegte Phase 01 (18.08.) ═════════════════════════
   Themenfindung, Packaging und Research stehen auf EINER Seite. Damit
   niemand raten muß, wo der eine Teil aufhört und der nächste anfängt,
   bekommt jeder angehängte Teil eine eigene Überschrift aus seinem
   data-Attribut — eine Beschriftung, die nicht auseinanderlaufen kann,
   weil sie aus derselben Quelle stammt wie die Zuordnung im Code. */

#view-novi-studio .novi-verbund-teil, :root[data-skin] #view-novi-studio .novi-verbund-teil { margin-top: 34px !important; padding-top: 26px !important; border-top: 1px solid var(--nt-linie) !important; position: relative !important; }
#view-novi-studio .novi-verbund-teil::before, :root[data-skin] #view-novi-studio .novi-verbund-teil::before { content: attr(data-verbund-teil); display: inline-block; margin-bottom: 14px; padding: 5px 12px; border: 1px solid var(--nt-linie); border-radius: 999px; background: var(--nt-flaeche-hoch); font-size: var(--nt-schrift-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--nt-cyan); -webkit-text-fill-color: var(--nt-cyan); }

/* Der Hinweis über dem Output-Feld: er erklärt in einem Satz, was beim
   Speichern passiert. Ruhig gesetzt — er soll lesbar sein, nicht laut. */
#view-novi-studio .novi-cwm-hinweis, :root[data-skin] #view-novi-studio .novi-cwm-hinweis { margin: 0 0 10px !important; font-size: var(--nt-schrift-s) !important; line-height: 1.55 !important; color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }

/* ══ Die Thumbnail-Entscheidung (18.08.) ═══════════════════════════
   Die gewählte Variante bestimmt, welche Bilddatei beim Upload zu
   YouTube geht. Sie muß deshalb auf einen Blick erkennbar sein —
   nicht als kleines Häkchen, sondern als sichtbar hervorgehobene
   Spalte. */

#view-novi-studio .novi-thumb-wahl, :root[data-skin] #view-novi-studio .novi-thumb-wahl { width: 100% !important; margin: 8px 0 10px !important; padding: 9px 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border: 1px solid var(--nt-linie) !important; border-radius: var(--nt-radius-mittel) !important; background: var(--nt-flaeche-hoch) !important; font-size: var(--nt-schrift-s) !important; font-weight: 600 !important; cursor: pointer !important; color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }
#view-novi-studio .novi-thumb-wahl svg, :root[data-skin] #view-novi-studio .novi-thumb-wahl svg { width: 15px !important; height: 15px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.4 !important; }
#view-novi-studio .novi-thumb-wahl.ist-gewaehlt, :root[data-skin] #view-novi-studio .novi-thumb-wahl.ist-gewaehlt { background: rgba(69,212,131,.14) !important; border-color: rgba(69,212,131,.5) !important; color: var(--nt-gut) !important; -webkit-text-fill-color: var(--nt-gut) !important; }
#view-novi-studio .novi-thumb-variante.ist-gewaehlt, :root[data-skin] #view-novi-studio .novi-thumb-variante.ist-gewaehlt { border-color: rgba(69,212,131,.45) !important; box-shadow: 0 0 0 1px rgba(69,212,131,.22), 0 14px 34px -26px rgba(0,0,0,.9) !important; }

/* Der Stand der Entscheidung in einem Satz — grün wenn sie steht,
   gelb solange sie fehlt. Kein Symbol ohne Text: was fehlt, wird
   ausgeschrieben. */
#view-novi-studio .novi-thumb-wahl-stand, :root[data-skin] #view-novi-studio .novi-thumb-wahl-stand { margin: 0 0 12px !important; padding: 9px 12px !important; border-radius: var(--nt-radius-mittel) !important; font-size: var(--nt-schrift-s) !important; line-height: 1.5 !important; }
#view-novi-studio .novi-thumb-wahl-stand.ist-da, :root[data-skin] #view-novi-studio .novi-thumb-wahl-stand.ist-da { background: rgba(69,212,131,.10) !important; border: 1px solid rgba(69,212,131,.32) !important; color: var(--nt-gut) !important; -webkit-text-fill-color: var(--nt-gut) !important; }
#view-novi-studio .novi-thumb-wahl-stand.ist-offen, :root[data-skin] #view-novi-studio .novi-thumb-wahl-stand.ist-offen { background: rgba(234,179,8,.10) !important; border: 1px solid rgba(234,179,8,.32) !important; color: var(--nt-warnung) !important; -webkit-text-fill-color: var(--nt-warnung) !important; }

/* ══ Welche Liste der Render liest (18.08.) ════════════════════════
   Es gibt zwei Listen, die beschreiben, was im Video zu sehen sein
   soll: die Szenentabelle und das Bildprompt-Pack. Der Render nimmt
   das Pack. Sichtbar war das nirgends — wer die Szenentabelle
   überarbeitete und rendern ließ, bekam ein Video ohne seine
   Änderung. Jetzt steht es über der Prüfliste. */

#view-novi-studio .novi-render-wahrheit, :root[data-skin] #view-novi-studio .novi-render-wahrheit { margin: 0 0 14px !important; padding: 11px 14px !important; background: var(--nt-flaeche-hoch) !important; border: 1px solid var(--nt-linie) !important; border-left: 3px solid var(--nt-cyan) !important; border-radius: var(--nt-radius-mittel) !important; font-size: var(--nt-schrift-s) !important; line-height: 1.6 !important; color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }
#view-novi-studio .novi-render-wahrheit b, :root[data-skin] #view-novi-studio .novi-render-wahrheit b { color: var(--nt-text-stark) !important; -webkit-text-fill-color: var(--nt-text-stark) !important; }
/* Widersprechen sich die beiden Listen, ist das keine Nebensache —
   dann folgt das Video einem anderen Stand als dem zuletzt
   bearbeiteten. */
#view-novi-studio .novi-render-wahrheit.ist-uneins, :root[data-skin] #view-novi-studio .novi-render-wahrheit.ist-uneins { border-left-color: var(--nt-warnung) !important; background: rgba(234,179,8,.08) !important; }
#view-novi-studio .novi-render-wahrheit.ist-uneins b, :root[data-skin] #view-novi-studio .novi-render-wahrheit.ist-uneins b { color: var(--nt-warnung) !important; -webkit-text-fill-color: var(--nt-warnung) !important; }

/* ══ Hub-Hero auf den dunklen Grund (19.08.) ═══════════════════════
   Auf der Seite Neues Video-Projekt stand der Hero-Kasten weiss im
   dunklen Studio: der Sparkassen-Skin malt .novi-hub-hero hell, die
   Ueberschrift blieb hell — praktisch unsichtbar. Derselbe Konflikt
   wie bei der Render-Tafel, dieselbe Loesung: Token-Flaechen mit
   :root[data-skin]-Zwilling. Der violette Lichtfleck weicht einem
   leisen Cyan — die Hausfarbe fuer aktiv, kein zweiter Akzent. */
#view-novi-studio .novi-hub-hero, :root[data-skin] #view-novi-studio .novi-hub-hero { background: var(--nt-flaeche) !important; border: 1px solid var(--nt-linie) !important; border-radius: var(--nt-radius-gross) !important; box-shadow: 0 22px 44px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.03) !important; }
#view-novi-studio .novi-hub-hero::after, :root[data-skin] #view-novi-studio .novi-hub-hero::after { background: radial-gradient(circle, rgba(34,211,238,.14), transparent 68%) !important; }
#view-novi-studio .novi-hub-hero-eyebrow, :root[data-skin] #view-novi-studio .novi-hub-hero-eyebrow { color: var(--nt-cyan) !important; -webkit-text-fill-color: var(--nt-cyan) !important; letter-spacing: .14em !important; }
#view-novi-studio .novi-hub-hero-title, :root[data-skin] #view-novi-studio .novi-hub-hero-title { color: var(--nt-text-stark) !important; -webkit-text-fill-color: var(--nt-text-stark) !important; }
#view-novi-studio .novi-hub-hero-sub, :root[data-skin] #view-novi-studio .novi-hub-hero-sub { color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; }

/* ══ Phasenseiten kompakter (19.08., auf Wunsch) ═══════════════════
   Vor dem ersten Inhalt standen vier Titelzeilen und ~700 px Rahmen:
   Breadcrumb, grosser Seitenkopf, Stepper, Navigationsleiste,
   Phasenkarte. Die Leiste ist nach unten gezogen (JS), der Seitenkopf
   wird zur schlanken Zeile, Karte und Abschnitte ruecken zusammen.
   Nichts faellt weg — es wird nur dichter gesetzt. */
#view-novi-studio [id^="novi-page-project-phase"] .novi-page-header, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-page-header { padding: 2px 0 10px !important; margin-bottom: 10px !important; align-items: center !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-page-header h2, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-page-header h2 { font-size: 17px !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.3 !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-page-header p, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-page-header p { font-size: var(--nt-schrift-s) !important; color: var(--nt-text-gedaempft) !important; -webkit-text-fill-color: var(--nt-text-gedaempft) !important; margin: 3px 0 0 !important; line-height: 1.45 !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-page-header .novi-hero-btn, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-page-header .novi-hero-btn { padding: 8px 16px !important; font-size: var(--nt-schrift-s) !important; min-height: 0 !important; }

/* Stepper direkt unter dem Kopf, ohne Extraluft. */
#view-novi-studio [id^="novi-page-project-phase"] .nvhk-stepper, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .nvhk-stepper { margin: 0 0 10px !important; }

/* Die Phasenkarte: gleiche Auskunft, halbe Hoehe. */
#view-novi-studio [id^="novi-page-project-phase"] .novi-phase-kopf, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-phase-kopf { padding: 14px 18px !important; margin-bottom: 12px !important; gap: 12px !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-phase-kopf-titel b, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-phase-kopf-titel b { font-size: 17px !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-kopf-wert, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-kopf-wert { padding: 8px 12px !important; min-width: 120px !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-kopf-wert b, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-kopf-wert b { font-size: 17px !important; }

/* Abschnitte ruecken zusammen. */
#view-novi-studio [id^="novi-page-project-phase"] .novi-cwm-section, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-cwm-section { padding: 14px 16px !important; margin-bottom: 12px !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-cwm-section-title, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-cwm-section-title { margin-bottom: 8px !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-warning-banner, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-warning-banner { margin: 0 0 12px !important; padding: 9px 12px !important; }
#view-novi-studio [id^="novi-page-project-phase"] .novi-phase-nav, :root[data-skin] #view-novi-studio [id^="novi-page-project-phase"] .novi-phase-nav { margin-top: 14px !important; }

/* ══ Uebersicht: fuenf gleiche Kennzahlen, kein Ueberlauf (03.09.) ═══

   Der Hero-Block vom 26.08. (erste Karte doppelt hoch, 56-px-Zahl)
   ist auf Wunsch entfallen. Alle fuenf Karten sind jetzt gleich -
   ab 1100 px in einer Reihe, darunter bricht auto-fit (Regel bei
   ~9982) sauber um. Ohne die feste Fuenf koennte auto-fit bei
   900-1000 px ein 4+1 erzeugen: eine einsame Karte in Reihe zwei. */
@media (min-width: 1100px) {
  :root[data-skin] #novi-page-overview .nvh-kpis,
  #novi-page-overview .nvh-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Rasterkinder haben von Haus aus min-width:auto und koennen nicht
   unter ihre Inhaltsbreite schrumpfen. Ein 1fr-Raster laeuft dann
   nach rechts ueber die Seite hinaus - Performance-Karten rechts
   angeschnitten, Scrollbalken unten. Die Mobilregel (~8404) setzt
   min-width:0 nur unter 760 px; hier fuer alle Breiten. */
:root[data-skin] #novi-page-overview .nvh-kpis > *,
#novi-page-overview .nvh-kpis > *,
:root[data-skin] #novi-page-overview .nvh2-modules > *,
#novi-page-overview .nvh2-modules > *,
:root[data-skin] #novi-page-overview .nvh2-kpigrid > *,
#novi-page-overview .nvh2-kpigrid > *,
:root[data-skin] #novi-page-overview .nvwr-reihe > *,
#novi-page-overview .nvwr-reihe > * {
  min-width: 0 !important;
}
:root[data-skin] #novi-page-overview .nvh,
#novi-page-overview .nvh,
:root[data-skin] #novi-page-overview .nvh2-modules,
#novi-page-overview .nvh2-modules {
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* Die Kennzahl-Karte ohne den Hero: Symbol und Text nebeneinander,
   oben ausgerichtet - so wie die vier anderen es schon waren. Die
   Zahl darf umbrechen, statt die Karte aufzuweiten. */
:root[data-skin] #novi-page-overview .nvh-kpi,
#novi-page-overview .nvh-kpi {
  flex-direction: row !important;
  justify-content: flex-start !important;
  padding: 22px 20px 30px !important;
}
:root[data-skin] #novi-page-overview .nvh-kpi > div,
#novi-page-overview .nvh-kpi > div {
  min-width: 0 !important;
}
:root[data-skin] #novi-page-overview .nvh-kpi-num,
#novi-page-overview .nvh-kpi-num {
  font-variant-numeric: tabular-nums !important;
  overflow-wrap: anywhere !important;
}
:root[data-skin] #novi-page-overview .nvh-kpi-label,
#novi-page-overview .nvh-kpi-label {
  line-height: 1.25 !important;
}