/* ========================================================================= NIMBAVERO DESIGN TOKENS ------------------------------------------------------------------------- Eine Quelle für die Marketing-Website und für das spätere Kunden-Dashboard (Leads, Rankings, Bewertungen, Google-Business-Kennzahlen, Website-Zahlen, Conversions, Support, Rechnungen, Empfehlungen). Regeln, die hier nicht verhandelbar sind: 1. Farbwerte stehen NUR in dieser Datei. Kein Hexwert in Komponenten-CSS. 2. `--nv-accent` (#ffb000) ist eine FLÄCHE, keine Schriftfarbe. Auf Weiß erreicht sie 1,83:1. Für Text auf hellem Grund gilt `--nv-accent-ink` (#a95a00, 5,06:1). Diese Regel ist schon einmal gebrochen worden und hat drei Kontrastfehler erzeugt. 3. Jeder Statuswert existiert als Paar aus Fläche und Schrift, beide gegeneinander geprüft (Werte in docs/DESIGN-SYSTEM.md). 4. Zahlen in Kennzahlen, Tabellen und Diagrammen laufen mit `--nv-numeric` (tabellarische Ziffern), sonst springen Spalten. 5. Dunkle Flächen sind kein eigenes Theme, sondern eine Zone: `.nv-dark` setzt dieselben semantischen Namen auf die dunklen Werte um. Der Preisabschnitt der Website nutzt dieselbe Zone wie später die Dashboard-Kopfleiste. ====================================================================== */ :root{ /* ---- Marke: Rohwerte. Nur hier, nirgends sonst. ---------------------- */ --nv-ink: #242424; --nv-ink-soft: #4a4a4a; --nv-muted: #626262; --nv-muted-2: #686868; --nv-accent: #ffb000; /* Fläche/Grafik. Niemals Text auf Hell. */ --nv-accent-hover: #e99a00; --nv-accent-ink: #a95a00; /* Textfähiger Akzent, 5,06:1 auf Weiß. */ --nv-white: #ffffff; /* ---- Flächen --------------------------------------------------------- */ --nv-bg: #ffffff; /* Seitengrund */ --nv-surface: #f5f5f4; /* ruhige Zone, Beispielabschnitt */ --nv-surface-warm: #f7f5f1; /* Angebotstafel: warmer Grund, auf dem eine weiße Karte noch als Karte wirkt. Tinte darauf 14,26:1. */ --nv-surface-accent: #fff5db; /* warme Hinweisfläche, Tinte 14,29:1 */ --nv-surface-accent-soft: #fffaf0; /* sehr leichte Tönung für die empfohlene Angebotsspalte: erkennbar, ohne die Nachbarspalten zu erdrücken. Tinte darauf 14,92:1 */ --nv-surface-2: #f1f1f0; /* Tabellenkopf, Leerzustand */ --nv-elevated: #ffffff; /* Karte/Kachel auf --nv-surface */ --nv-overlay: rgba(36,36,36,.55); /* ---- Linien ---------------------------------------------------------- */ --nv-rule: #dedede; /* dekorative Trennung */ --nv-rule-soft: #e6e6e6; --nv-rule-strong: #8a8a8a; /* bedeutungstragend: Eingabefelder, Diagrammachsen. 3,45:1 auf Weiß. */ /* ---- Text ------------------------------------------------------------ */ --nv-fg: var(--nv-ink); --nv-fg-reading: #505050; /* längere Absätze, 8,06:1 auf Weiß */ --nv-fg-muted: var(--nv-muted); --nv-fg-subtle: var(--nv-muted-2); --nv-fg-on-accent: var(--nv-ink); --nv-fg-on-caution: #4d3800; /* Text auf --nv-caution-tint, 10,28:1 */ /* ---- Status: Fläche, Schrift, Linie ---------------------------------- */ --nv-positive: #1f6b3f; --nv-positive-tint: #edf5f0; --nv-negative: #9e2b1e; --nv-negative-tint: #fbefed; --nv-caution: #7a4200; --nv-caution-tint: #fff5db; --nv-info: #1f4f7a; --nv-info-tint: #eef3f8; --nv-neutral: #4a4a4a; --nv-neutral-tint: #f1f1f0; --nv-caution-tint-2: var(--nv-surface-accent); /* Hinweisfläche */ /* ---- Datenreihen: Reihenfolge = maximaler Abstand zuerst ------------- Für Diagramme in Rankings, Website-Zahlen und Conversions. Farbe allein darf eine Reihe nie identifizieren — immer zusätzlich beschriften. */ --nv-series-1: #242424; --nv-series-2: #a95a00; --nv-series-3: #1f4f7a; --nv-series-4: #1f6b3f; --nv-series-5: #5c4b8a; --nv-series-6: #17636b; --nv-series-highlight: #ffb000; /* markierter Balken, nie Textfarbe */ --nv-series-track: #e6e6e6; /* leerer Anteil eines Balkens */ /* ---- Schrift --------------------------------------------------------- */ --nv-font-sans: Arial, Helvetica, sans-serif; --nv-font-serif: Georgia, 'Times New Roman', serif; --nv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --nv-numeric: tabular-nums lining-nums; --nv-text-display-1: clamp(34px, 4.6vw, 62px); /* Seitentitel */ --nv-text-display-2: clamp(36px, 3.5vw, 48px); /* Abschnittstitel */ --nv-text-title: clamp(21px, 2.1vw, 28px); /* Claim, Kachelzahl */ --nv-text-heading: 21px; --nv-text-lead: 18px; --nv-text-body: 17px; --nv-text-body-sm: 15px; --nv-text-caption: 13px; --nv-text-micro: 12px; /* Auszeichner, Versalien, .12em Laufweite */ --nv-leading-tight: 1.06; --nv-leading-snug: 1.3; --nv-leading-normal: 1.65; --nv-leading-loose: 1.75; --nv-tracking-tight: -1.6px; --nv-tracking-micro: .12em; /* ---- Raster: 4-px-Basis ---------------------------------------------- */ --nv-space-1: 4px; --nv-space-2: 8px; --nv-space-3: 12px; --nv-space-4: 16px; --nv-space-5: 20px; --nv-space-6: 24px; --nv-space-7: 32px; --nv-space-8: 40px; --nv-space-9: 48px; --nv-space-10: 64px; --nv-space-11: 80px; --nv-space-12: 100px; /* ---- Radien ---------------------------------------------------------- */ --nv-radius-xs: 3px; /* Akzentbalken */ --nv-radius-sm: 5px; /* Schaltfläche, Eingabefeld */ --nv-radius-md: 7px; --nv-radius-lg: 10px; /* Karte, Kachel */ --nv-radius-xl: 14px; --nv-radius-2xl: 18px; /* Gerätebild */ --nv-radius-pill: 999px; /* ---- Höhe ------------------------------------------------------------ */ --nv-shadow-1: 0 1px 2px rgba(36,36,36,.06); --nv-shadow-2: 0 8px 24px rgba(36,36,36,.10); --nv-shadow-3: 0 26px 60px rgba(36,36,36,.16); /* ---- Bewegung -------------------------------------------------------- */ --nv-ease: cubic-bezier(.2,.7,.3,1); --nv-dur-fast: 120ms; --nv-dur-base: 150ms; --nv-dur-slow: 240ms; /* ---- Fokus: ein Ring, überall derselbe -------------------------------- */ --nv-focus-color: var(--nv-accent-ink); --nv-focus-width: 3px; --nv-focus-offset: 5px; /* ---- Layout ---------------------------------------------------------- */ --nv-container: 1320px; --nv-gutter: 48px; --nv-measure: 62ch; /* Lesebreite Fließtext */ --nv-measure-short: 34ch; /* Abschnittsköpfe */ /* ---- Bedienflächen: Mindestmaße, die überall gelten ------------------- */ --nv-control-h: 44px; /* Tippziel, auch Tabellenzeile mit Aktion */ --nv-control-h-lg: 56px; /* Hauptschaltfläche */ /* ---- Reserviert fürs Dashboard. Hier definiert, damit Marketing und Produkt dieselbe Geometrie benutzen, sobald es gebaut wird. ----- */ --nv-app-header-h: 64px; --nv-app-rail-w: 248px; --nv-app-gutter: 24px; --nv-tile-pad: 24px; --nv-row-h: var(--nv-control-h); } @media(max-width:1000px){ :root{ --nv-gutter:30px } } @media(max-width:760px) { :root{ --nv-gutter:22px; --nv-app-rail-w:100%; --nv-tile-pad:18px; --nv-app-gutter:16px } } /* ------------------------------------------------------------------------- Dunkle Zone. Kein zweites Theme, sondern dieselben semantischen Namen auf dunklem Grund — für den Preisabschnitt heute und die Dashboard-Chrome später. Anwenden mit class="nv-dark". ---------------------------------------------------------------------- */ .nv-dark{ --nv-bg: #242424; --nv-surface: #2e2e2e; --nv-surface-warm:#2a2a29; --nv-surface-accent:#3a2e14; --nv-surface-accent-soft:#302a1c; --nv-surface-2: #383838; --nv-elevated: #ffffff; /* Karte bleibt hell, wie im Preisabschnitt */ --nv-fg: #ffffff; --nv-fg-reading: #dedede; --nv-fg-muted: #cccccc; --nv-fg-subtle: #b4b4b4; --nv-rule: #4a4a4a; --nv-rule-soft: #3d3d3d; --nv-rule-strong: #757575; --nv-accent-ink: #ffb000; /* auf #242424 8,47:1 — hier textfähig */ --nv-focus-color: #ffb000; --nv-positive: #7fd3a0; --nv-positive-tint: #1d3a2a; --nv-negative: #ff9e90; --nv-negative-tint: #3a2220; --nv-caution: #ffb000; --nv-caution-tint: #3a2e14; --nv-info: #8ec4f0; --nv-info-tint: #1e2d3a; --nv-neutral: #cccccc; --nv-neutral-tint: #333333; --nv-series-1: #ffffff; --nv-series-2: #ffb000; --nv-series-3: #8ec4f0; --nv-series-4: #7fd3a0; --nv-series-track:#3d3d3d; } /* Helle Insel in einer dunklen Zone: die Preiskarte heute, die Dialogfläche und der Datenexport im Dashboard später. Setzt dieselben semantischen Namen wieder auf die hellen Werte. */ .nv-light{ --nv-bg: #ffffff; --nv-surface: #f5f5f4; --nv-surface-2: #f1f1f0; --nv-surface-warm:#f7f5f1; --nv-surface-accent:#fff5db; --nv-surface-accent-soft:#fffaf0; --nv-elevated: #ffffff; --nv-fg: #242424; --nv-fg-reading: #505050; --nv-fg-muted: #626262; --nv-fg-subtle: #686868; --nv-rule: #dedede; --nv-rule-soft: #e6e6e6; --nv-rule-strong: #8a8a8a; --nv-accent-ink: #a95a00; --nv-focus-color: #a95a00; --nv-positive: #1f6b3f; --nv-positive-tint: #edf5f0; --nv-negative: #9e2b1e; --nv-negative-tint: #fbefed; --nv-caution: #7a4200; --nv-caution-tint: #fff5db; --nv-info: #1f4f7a; --nv-info-tint: #eef3f8; --nv-neutral: #4a4a4a; --nv-neutral-tint: #f1f1f0; --nv-series-1: #242424; --nv-series-2: #a95a00; --nv-series-3: #1f4f7a; --nv-series-4: #1f6b3f; --nv-series-track:#e6e6e6; } /* Eine Zone setzt nicht nur Werte um, sie färbt sich auch selbst. Ohne das erbt eine helle Insel die weiße Schrift der dunklen Zone und die Zahl darin ist unsichtbar — genau so ist es beim ersten Versuch passiert. */ .nv-dark, .nv-light{ color:var(--nv-fg) } /* Ein Fokusring für Website und Dashboard. */ :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{ outline: var(--nv-focus-width) solid var(--nv-focus-color); outline-offset: var(--nv-focus-offset); } /* Zahlen springen nicht. */ .nv-num{ font-variant-numeric: var(--nv-numeric) } @media(prefers-reduced-motion:reduce){ :root{ --nv-dur-fast:0ms; --nv-dur-base:0ms; --nv-dur-slow:0ms } }