/** * Nuvario Website – Design Tokens & gemeinsame Grundlagen * ======================================================== * * Einzige Quelle aller visuellen Werte der Website (Playbook 03: "Alle * visuellen Werte werden ausschliesslich ueber zentrale Design Tokens * definiert. Keine freien Einzelwerte in Komponenten."). * * Die Farbwerte sind identisch mit denen des Kundencenters * (`src/design-system/tokens.css`). Website und Kundencenter tragen damit * dieselbe Marke – ein Kunde, der von nuvario.de ins Kundencenter wechselt, * bleibt sichtbar im selben System. * * Vorher lag jede Seite mit einem eigenen :root-Block vor, in drei * unterschiedlichen Namensschemata (--accent1/2/3 bzw. --blue/--purple/--pink). * Diese Altnamen bleiben als Verweise erhalten, damit das gewachsene CSS der * Seiten unveraendert weiterlaeuft – aber sie zeigen jetzt alle hierher. * * Hell/Dunkel: Die Website ist bewusst nur hell. Das Kundencenter beherrscht * beides, weil dort lange gearbeitet wird; eine Marketingseite wird kurz * besucht. Ein halb umgesetzter Dunkelmodus waere schlechter als keiner – * die Seiten enthalten historisch gewachsene feste Farbwerte, die dabei * auseinanderfallen wuerden. Bewusste Entscheidung, kein Versaeumnis. */ :root { color-scheme: light; /* --- Flaechen --------------------------------------------------------- */ --color-bg: #fafbfc; --color-surface: #ffffff; --color-surface-sunken: #f2f4f7; --color-border: #e3e6ea; --color-border-strong: #cdd2da; /* --- Text (Kontrast gegen --color-bg in Klammern) ---------------------- */ --color-text-primary: #14171c; /* 17,3:1 */ --color-text-secondary: #4a515c; /* 7,7:1 */ --color-text-tertiary: #6b7280; /* 4,7:1 */ --color-text-inverse: #ffffff; /* --- Markenfarbe ------------------------------------------------------- * Eine Farbe, kontrolliert eingesetzt. Die drei Abstufungen sind Tonwerte * derselben Farbe, kein zweiter und dritter Farbton. * --color-brand traegt weissen Text und erreicht dafuer 6,8:1. */ --color-brand: #2a4bd7; /* 6,6:1 gegen bg – auch als Textfarbe gueltig */ --color-brand-hover: #2340be; --color-brand-active: #1d359f; /* dunkelster Tonwert */ --color-brand-light: #4a68e6; /* hellster Tonwert, 4,6:1 gegen bg */ --color-brand-subtle-bg: #eef1fd; --color-brand-tint: #b3c2ff; /* nur fuer dunkle Flaechen, 10,3:1 */ --color-on-brand: #ffffff; /* --- Semantische Farben (nur funktional, nie dekorativ) ---------------- */ --color-success-text: #14633a; /* 7,1:1 – vorher #16a34a mit 3,2:1 */ --color-warning-text: #855400; /* 6,2:1 – vorher #f97316 mit 2,7:1 */ --color-danger-text: #96231d; /* --- Verlaeufe --------------------------------------------------------- * Tonale Abstufung EINER Farbe. Der fruehere Verlauf lief ueber Tuerkis, * Violett und Pink – laut Playbook 01 ausdruecklich unerwuenscht * ("generische KI-Optik", "aggressives SaaS-Marketing"). */ --gradient: linear-gradient(135deg, #1d359f 0%, #2a4bd7 55%, #4a68e6 100%); --gradient-flat: linear-gradient(90deg, #2a4bd7 0%, #4a68e6 100%); /* --- Typografie -------------------------------------------------------- * DM Serif Display fuer Ueberschriften und Wortmarke, DM Sans fuer Text. * Beide lokal ausgeliefert (kein Google-Fonts-Aufruf, DSGVO). */ --font-display: 'DM Serif Display', Georgia, serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* --- Abstaende (4px-Basis, wie im Kundencenter) ------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* --- Radien ------------------------------------------------------------ */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* --- Bewegung ---------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* --- Fokusdarstellung -------------------------------------------------- */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-brand); /* --- Altnamen der einzelnen Seiten ------------------------------------ * Bleiben bestehen, damit das gewachsene Seiten-CSS weiterlaeuft. Neue * Regeln verwenden ausschliesslich die Token-Namen darueber. */ --ink: var(--color-text-primary); --ink2: var(--color-text-secondary); --ink3: var(--color-text-tertiary); --bg: var(--color-bg); --bg2: var(--color-surface-sunken); --line: var(--color-border); --muted: var(--color-text-secondary); --accent1: var(--color-brand-active); --accent2: var(--color-brand); --accent3: var(--color-brand-light); --blue: var(--color-brand-active); --purple: var(--color-brand); --pink: var(--color-brand-light); --green: var(--color-success-text); --orange: var(--color-warning-text); } /* ======================================================================= Barrierefreiheit – verbindlich laut Playbook 03 ======================================================================= */ /* Fokus muss sichtbar sein. Vorher hatte keine Seite eine Fokusregel. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Sprunglink: erst bei Tastaturfokus sichtbar. */ .skip-link { position: absolute; left: 8px; top: -120px; z-index: 9999; background: var(--color-text-primary); color: var(--color-text-inverse); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none; transition: top var(--duration-fast) var(--ease-standard); } .skip-link:focus { top: 8px; } /* Die width/height-Attribute an liefern das Seitenverhaeltnis und verhindern Layout-Spruenge beim Nachladen. Ohne height:auto wuerde das Attribut als feste Hoehe wirken. :where() haelt die Spezifitaet bei 0, damit bestehende Bildregeln (z.B. height:100%) weiterhin gewinnen. */ :where(img[width][height]) { height: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ======================================================================= Gemeinsame Komponenten ======================================================================= */ /* Datenschutzhinweis am Erhebungspunkt (Art. 13 DSGVO). */ .form-hint-privacy { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); margin: var(--space-1) 0 var(--space-5); } .form-hint-privacy a { color: var(--color-brand); } /* Wortmarke: DM Serif Display statt Georgia. Die Schrift war auf allen Seiten bereits geladen, wurde fuer das Logo aber nicht verwendet. */ .logo, .footer-logo { font-family: var(--font-display); } /* Primaere Handlung – eine Farbe auf allen Seiten. Vorher: schwarze Pille auf Start-, Referenz- und Clubbase-Seite, Regenbogenverlauf auf CampingReport. Jetzt ueberall die Markenfarbe, dieselbe wie der primaere Button im Kundencenter. */ .btn-primary, .nav-cta, .submit-btn { background: var(--color-brand); color: var(--color-on-brand) !important; border-color: transparent; } .btn-primary:hover, .nav-cta:hover, .submit-btn:hover:not(:disabled) { background: var(--color-brand-hover); } .submit-btn:disabled { background: var(--color-brand-active); } /* ----------------------------------------------------------------------- Dunkle Flaechen ----------------------------------------------------------------------- Auf nahezu schwarzem Grund kehren sich die Kontrastverhaeltnisse um: die Markenfarbe erreicht dort nur 2,6:1 und faellt damit unter die Grenze fuer Bedienelemente (WCAG 1.4.11), der helle Tonwert als Text nur 3,8:1. Deshalb verschieben diese Flaechen die Markentoene um eine Stufe nach oben. Das Seiten-CSS bleibt unveraendert – es liest weiterhin dieselben Namen. Betroffen: "Warum Nuvario" (Start + Referenz), Founding-Banner (Clubbase), Hero, End-CTA und Premium-Tarif (CampingReport). */ .on-dark { --accent1: var(--color-brand-tint); --accent2: var(--color-brand-tint); --accent3: var(--color-brand-tint); --blue: var(--color-brand-tint); --purple: var(--color-brand-tint); --pink: var(--color-brand-tint); --gradient: linear-gradient(135deg, #6d88f5 0%, #b3c2ff 100%); --gradient-flat: linear-gradient(90deg, #6d88f5 0%, #b3c2ff 100%); } .on-dark .section-tag { color: var(--color-brand-tint); } .on-dark :is(.btn-primary, .nav-cta, .submit-btn) { background: var(--color-brand-light); /* 3,8:1 gegen den dunklen Grund */ } .on-dark :is(.btn-primary, .nav-cta, .submit-btn):hover { background: #6d88f5; }