/* Fonts werden im jeder Seite direkt verlinkt (schneller als @import). */ /* ============================================================================ VP Finance GmbH — Design System (1:1 aus der Vorlage «VP Finance Website1») Zusammengeführt aus: tokens/colors.css, typography.css, spacing.css, elevation.css, base.css + statische Fassungen der Bundle-Komponenten (Button, Card, Stat, Badge, Input, Checkbox) mit exakt den Werten aus _ds_bundle.js. Nichts erfunden, nichts gerundet. ========================================================================== */ /* ---- colors.css (2026 rebrand) ------------------------------------------ */ :root { --vp-black: #0b1f33; --vp-blue: #153e75; --vp-crimson: #c9a45c; /* Gold — premium accent (legacy name) */ --vp-cream: #f7f4ee; --vp-grey: #65717e; --vp-white: #ffffff; --crimson-50: #fbf6ec; --crimson-100: #f3e8d2; --crimson-200: #e8d3a8; --crimson-300: #dcbe7e; --crimson-400: #d2ad6a; --crimson-500: #c9a45c; --crimson-600: #ad8748; --crimson-700: #8c6b38; --crimson-800: #6b5029; --crimson-900: #4a371c; --grey-50: #f5f6f7; --grey-100: #eaecee; --grey-200: #d7dbe0; --grey-300: #b9c0c7; --grey-400: #97a0aa; --grey-500: #7c8792; --grey-600: #65717e; --grey-700: #4e5862; --grey-800: #363d45; --grey-900: #1e2227; --green-50: #e8f4ee; --green-500: #1e7a4d; --green-600: #196641; --amber-50: #fbf1e0; --amber-500: #b7791f; --amber-600: #9a6519; --red-50: #fbeae8; --red-500: #b42318; --red-600: #94170f; --blue-50: #e9f0f8; --blue-500: #1b4f8a; --blue-600: #163f70; --brand: var(--vp-blue); --brand-hover: #123564; --brand-active: #0e2a4e; --brand-subtle: #e8eef5; --on-brand: var(--vp-white); --text-strong: var(--vp-black); --text-body: var(--grey-800); --text-muted: var(--grey-600); --text-faint: var(--grey-500); --text-inverse: var(--vp-white); --text-brand: var(--vp-blue); --surface-page: var(--vp-white); --surface-subtle: var(--vp-cream); --surface-card: var(--vp-white); --surface-sunken: var(--grey-100); --surface-inverse:var(--vp-black); --border-subtle: var(--grey-200); --border-default: var(--grey-300); --border-strong: var(--grey-400); --success: var(--green-500); --success-bg: var(--green-50); --warning: var(--amber-500); --warning-bg: var(--amber-50); --error: var(--red-500); --error-bg: var(--red-50); --info: var(--blue-500); --info-bg: var(--blue-50); --focus-ring: color-mix(in srgb, var(--vp-blue) 45%, transparent); } /* ---- typography.css (Font-@import steht am Dateianfang) ------------------ */ :root { --font-sans: 'Inter', 'Source Sans 3', system-ui, sans-serif; --font-serif: 'Playfair Display', 'Lora', Georgia, serif; --font-mono: ui-monospace, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem); --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-lead: 1.1875rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-eyebrow: 0.18em; } /* ---- spacing.css --------------------------------------------------------- */ :root { --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --container-max: 1200px; --container-narrow: 760px; --gutter: clamp(1.25rem, 4vw, 4rem); --section-y: clamp(3.5rem, 8vw, 7rem); } /* ---- elevation.css ------------------------------------------------------- */ :root { --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; --border-hair: 1px; --border-thick: 2px; --shadow-xs: 0 1px 2px rgba(20, 20, 24, 0.06); --shadow-sm: 0 1px 3px rgba(20, 20, 24, 0.08), 0 1px 2px rgba(20, 20, 24, 0.04); --shadow-md: 0 4px 12px rgba(20, 20, 24, 0.08), 0 2px 4px rgba(20, 20, 24, 0.04); --shadow-lg: 0 12px 32px rgba(20, 20, 24, 0.10), 0 4px 8px rgba(20, 20, 24, 0.05); --shadow-xl: 0 24px 56px rgba(20, 20, 24, 0.14); --shadow-focus: 0 0 0 3px var(--focus-ring); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ---- base.css ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } p { margin: 0; } a { color: var(--text-brand); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--brand-active); } .vp-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-brand); } .vp-rule { border: 0; height: var(--border-thick); width: 56px; background: var(--vp-crimson); } ::selection { background: var(--crimson-100); color: var(--vp-black); } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* ---- Button (aus _ds_bundle.js Button.jsx, statisch) --------------------- */ .vpb { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: 0.01em; line-height: 1; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); padding: 0 20px; height: 44px; font-size: var(--fs-body); /* md */ } .vpb--sm { padding: 0 14px; height: 36px; font-size: var(--fs-sm); } .vpb--lg { padding: 0 28px; height: 52px; font-size: var(--fs-lead); } .vpb--primary { background: var(--brand); color: var(--on-brand); } .vpb--primary:hover { background: var(--brand-hover); color: var(--on-brand); } .vpb--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-default); } .vpb--secondary:hover { background: var(--surface-subtle); border-color: var(--border-strong); color: var(--text-strong); } .vpb--ghost { background: transparent; color: var(--text-brand); } .vpb--ghost:hover { background: var(--brand-subtle); color: var(--text-brand); } .vpb--dark { background: var(--vp-black); color: var(--vp-white); } .vpb--dark:hover { background: var(--grey-800); color: var(--vp-white); } .vpb--block { width: 100%; } /* ---- Card (aus Card.jsx, statisch) --------------------------------------- */ .vpc { position: relative; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); color: inherit; } .vpc--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .vpc--accent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--vp-crimson); } .vpc--p0 { padding: 0; } /* ---- Stat (aus Stat.jsx, statisch) --------------------------------------- */ .vps { font-family: var(--font-sans); } .vps__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); } .vps__row { display: flex; align-items: baseline; gap: var(--space-2); } .vps__value { font-size: 2.25rem; font-weight: var(--fw-light); color: var(--text-strong); line-height: 1; letter-spacing: var(--ls-tight); } .vps__unit { font-size: var(--fs-lead); color: var(--text-muted); } /* ---- Badge --------------------------------------------------------------- */ .vpbadge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em; } /* ---- Alert ---------------------------------------------------------------- */ .vpalert { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-left: 3px solid var(--info); background: var(--info-bg); border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); } .vpalert--success { border-left-color: var(--success); background: var(--success-bg); } .vpalert--warning { border-left-color: var(--warning); background: var(--warning-bg); } /* ---- Formular (Input/Textarea/Checkbox, statisch) ------------------------ */ .vpi-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); margin-bottom: var(--space-2); font-family: var(--font-sans); } .vpi { width: 100%; height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-strong); background: var(--surface-card); } textarea.vpi { height: auto; padding: var(--space-3) var(--space-4); resize: vertical; } .vpi:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); } .vpcheck { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-body); cursor: pointer; } .vpcheck input { margin-top: 3px; accent-color: var(--brand); } /* ---- Responsive (die Vorlage ist ein Desktop-Entwurf; Inline-Grids brechen auf schmalen Screens einspaltig um) ----------------------------------- */ img { max-width: 100%; } img[width] { height: auto; } @media (max-width: 920px) { body { overflow-x: hidden; } /* Wunsch Yves 22.08.2026: Wörter wandern bevorzugt ganz auf die nächste Zeile — keine automatische Silbentrennung. Nur ein Wort, das breiter als die ganze Zeile ist («Versicherungstreuhand» in der H1), wird im Notfall umgebrochen, damit Mobile-Safari die Seite nicht herauszoomt. */ h1, h2, h3, h4, [style*="font-size:clamp"] { overflow-wrap: break-word; hyphens: manual; } [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } [style*="position:absolute"][style*="bottom:-28px"] { position: static !important; width: auto !important; margin-top: var(--space-4); } /* Deko-Wasserzeichen («VP») nicht über den rechten Rand ragen lassen */ [style*="right:-2%"] { right: 0 !important; } /* NUR grosse Nebeneinander-Gruppen umbrechen (Kennzahlen, Button-Zeilen). Kleine Icon-Zeilen (✓-Listen) müssen einzeilig bleiben, sonst rutscht der Text unter das Häkchen. */ section [style*="display:flex"][style*="gap:var(--space-6)"]:not([style*="flex-direction:column"]), section [style*="display:flex"][style*="gap:var(--space-7)"]:not([style*="flex-direction:column"]), section [style*="display:flex"][style*="gap:var(--space-8)"]:not([style*="flex-direction:column"]), section [style*="display:flex"]:not([style*="flex-direction:column"]):has(> a > .vpb, > .vpb) { flex-wrap: wrap; } li[style*="display:flex"] { flex-wrap: nowrap !important; } [style*="gap:var(--space-8)"] { gap: var(--space-5) !important; } /* Sprungmarken-Leisten (56px) seitlich wischbar statt abgeschnitten */ div[style*="height:56px"][style*="display:flex"] { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; } div[style*="height:56px"][style*="display:flex"]::-webkit-scrollbar { display: none; } div[style*="height:56px"][style*="display:flex"] a { white-space: nowrap; } } @media (max-width: 640px) { .vps__value { font-size: 1.9rem; } /* Buttons mit langem Text: Text umbrechen statt über den Rand laufen */ .vpb { white-space: normal; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; text-align: center; max-width: 100%; line-height: 1.3; } .vpb--lg { padding-left: 20px; padding-right: 20px; min-height: 48px; font-size: var(--fs-body); } }