/* ============================================================ ClassicDossier — Design Tokens (Variante B) EINE Farbwelt: Navy + Tan/Cognac. Keine Umschaltbarkeit. Anmutung: „Eleganz durch Klarheit" — warmer, heller Grund, große, kontraststarke Zahlen, ruhige editoriale Typografie. Einbinden VOR components.css. ============================================================ */ :root { /* ---- Grundflächen & Tinte (heller Grund, hoher Kontrast) ---- */ --cd-paper: #F3EEE4; /* App-/Seiten-Hintergrund */ --cd-surface: #FBF8F1; /* Karten, Panels */ --cd-surface-2: #EBE3D3; /* Foto-Platzhalter, dezente Flächen */ --cd-ink: #1D2733; /* WICHTIGER Text & alle Zahlen (voller Kontrast) */ --cd-ink-soft: #4A5460; /* Sekundärtext */ --cd-ink-faint: #6B7480; /* Hinweise, Mono-Tags, Labels */ --cd-line: #DDD3C2; /* Haarlinien, Rahmen */ --cd-line-soft: #E8DFCE; /* Balken-Spur (Hintergrund von Fortschritts-/Bilanzbalken) */ /* ---- Akzent & Signal ---- */ --cd-accent: #9C6B34; /* Cognac — Leit-Akzent auf hellem Grund */ --cd-accent-on-dark: #D8B072; /* hellerer Cognac für Text/Icon auf Navy */ --cd-positive: #3F6B4E; /* Wertzuwachs, „bestätigt", „fahrbereit" */ --cd-warn: #8A6A1E; /* fällig / in Restaurierung */ --cd-danger: #922F26; /* überfällig / Fehler */ /* ---- Dunkle Marken-Fläche (Masthead / Sidebar) ---- */ --cd-masthead: #1C2A3A; /* Navy */ --cd-masthead-ink: #F2ECDF; /* Creme-Text auf Navy */ /* ---- Diagramm-Palette (Kostenverteilung — feste Reihenfolge) ---- */ --cd-chart-1: #1C2A3A; --cd-chart-2: #9C6B34; --cd-chart-3: #5F7A5A; --cd-chart-4: #B98A48; --cd-chart-5: #7A3B34; --cd-chart-6: #3F5A6E; --cd-chart-7: #6E5B47; --cd-chart-8: #8A8270; /* ---- Schriften ---- */ --cd-font-display: "Playfair Display", Georgia, "Times New Roman", serif; /* Titel, Marke, Fahrzeugnamen */ --cd-font-body: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Fließtext, Bedienung, ZAHLEN */ --cd-fw-regular: 400; --cd-fw-medium: 500; --cd-fw-semi: 600; --cd-fw-bold: 700; --cd-fw-figure: 800; /* Zahlen / Beträge */ /* ---- Schriftgrößen-Skala ---- Basis = 16,5px (auf gesetzt, siehe unten). Werte in rem, damit ein Anheben der Basis (Lesbarkeits-Boost für ältere Augen) ALLES proportional vergrößert. Kommentar = px bei Basis 16,5. */ --cd-fs-eyebrow: 0.79rem; /* ~13px — Labels, Großbuchstaben */ --cd-fs-meta: 0.86rem; /* ~14px — Datum, Hinweiszeilen */ --cd-fs-body: 1rem; /* ~16,5px — Fließtext */ --cd-fs-body-lg: 1.1rem; /* ~18px */ --cd-fs-num-m: 1.55rem; /* ~26px — Bilanz-Beträge */ --cd-fs-num-card: 1.6rem; /* ~26px — Karten-Beträge */ --cd-fs-head-card: 1.5rem; /* ~25px — Fahrzeugname (Karte) */ --cd-fs-head-sm: 1.7rem; /* ~28px — Karteikarte-Titel */ --cd-fs-head-page: 2.6rem; /* ~43px — Seitentitel „Die Garage" */ --cd-fs-display: 3.4rem; /* ~56px — Hero-Betrag „Bisher investiert" */ --cd-tracking-eyebrow: 0.14em; --cd-tracking-head: -0.01em; --cd-lh-body: 1.55; --cd-lh-head: 1.08; /* ---- Abstände (px) ---- */ --cd-space-1: 4px; --cd-space-2: 8px; --cd-space-3: 12px; --cd-space-4: 16px; --cd-space-5: 20px; --cd-space-6: 24px; --cd-space-7: 32px; --cd-space-8: 44px; --cd-page-pad-desktop: 44px; --cd-page-pad-mobile: 22px; /* ---- Radien ---- */ --cd-radius-button: 4px; --cd-radius-card: 8px; --cd-radius-pill: 999px; --cd-radius-circle: 50%; /* ---- Schatten ---- */ --cd-shadow-card-hover: 0 14px 38px rgba(0, 0, 0, 0.10); /* ---- Komponenten-Maße ---- */ --cd-bar-track: 9px; /* Höhe Bilanz-Balken */ --cd-catbar-track: 4px; /* Höhe Kategorie-Balken */ --cd-distribution: 6px; /* Höhe Segment-Verteilungsband */ --cd-touch-min: 48px; /* Mindesthöhe Touch-Ziele */ } /* Basis-Schriftgröße = 16,5px. Für mehr Lesbarkeit (ältere Augen) diesen Wert global anheben — alle rem-Größen skalieren mit. z. B. html { font-size: 18px; } oder 110%. */ html { font-size: 16.5px; } body { margin: 0; background: var(--cd-paper); color: var(--cd-ink); font-family: var(--cd-font-body); font-size: var(--cd-fs-body); line-height: var(--cd-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { box-sizing: border-box; }