/* PfeifferTech Design System – Farben & Typografie (aus _ds/…/colors_and_type.css übernommen). Die Google-Fonts-@imports wurden entfernt: Die Schriften liegen lokal in /fonts (siehe fonts.css). */ /* ---------- Webfont: Dosis (the brand domain mark uses Dosis 700) ----- */ /* Fallback / running text — Inter is a clean, neutral German-friendly substitute. Swap if a brand-mandated body face exists. */ :root { /* =================================================================== COLOR — Brand "3-Flow" The PfeifferTech logo carries three elements: - Sonne / Strom (sun / electricity) yellow - Wärme (warmth / heating) red - Wasser (water) light blue These are the brand primaries and should be treated as a system, not isolated accents. =================================================================== */ --pt-sun: #F8E818; /* Sonne / Strom — energy yellow */ --pt-warm: #D83020; /* Wärme — heating red */ --pt-water: #50B8E0; /* Wasser — sanitary light blue */ /* tonal shifts for hover/press, soft fills, and chart variants */ --pt-sun-deep: #E0CE00; --pt-sun-soft: #FEF7BF; --pt-warm-deep: #B2261A; --pt-warm-soft: #FADAD6; --pt-water-deep: #2D8FBA; --pt-water-soft: #DAF0FA; /* Domain stroke blue (used as outline in the .de domain lockup) */ --pt-domain-stroke: #0529AE; /* ---------- Neutrals (warm-cool balanced gray scale) ------------ */ --pt-ink: #0E1116; /* near-black for body & headings */ --pt-ink-soft: #2A2F36; --pt-slate-900: #1A1F26; --pt-slate-700: #3A424C; --pt-slate-500: #6B7480; --pt-slate-400: #8A93A0; --pt-slate-300: #C2C8D0; --pt-slate-200: #E2E5EA; --pt-slate-100: #F1F3F6; --pt-bone: #F7F6F2; /* warm off-white for print surfaces */ --pt-paper: #FFFFFF; /* ---------- Semantic tokens (light theme default) --------------- */ --pt-bg: var(--pt-paper); --pt-bg-muted: var(--pt-slate-100); --pt-surface: var(--pt-paper); --pt-surface-2: var(--pt-bone); --pt-fg: var(--pt-ink); /* primary text */ --pt-fg-2: var(--pt-slate-700); /* secondary text */ --pt-fg-3: var(--pt-slate-500); /* tertiary / meta */ --pt-fg-inv: var(--pt-paper); --pt-border: var(--pt-slate-200); --pt-border-strong: var(--pt-slate-300); --pt-divider: var(--pt-slate-100); --pt-accent: var(--pt-warm); /* default action accent */ --pt-accent-fg: var(--pt-paper); --pt-accent-hover: var(--pt-warm-deep); /* Status / data-viz mapped onto brand flows where it makes sense */ --pt-status-success: #2E8B57; --pt-status-warning: var(--pt-sun-deep); --pt-status-danger: var(--pt-warm); --pt-status-info: var(--pt-water); /* Utility-class colour mapping for the three flows in data viz */ --pt-flow-electricity: var(--pt-sun); --pt-flow-heat: var(--pt-warm); --pt-flow-water: var(--pt-water); /* =================================================================== TYPE - Display / Brand: Dosis (matches the logo wordmark face) - UI / Body: Inter (clean substitute — see README) - Mono / numeric: system mono stack =================================================================== */ --pt-font-display: "Dosis", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pt-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* type scale — minor-third, optimised for German running text */ --pt-fs-12: 0.75rem; /* 12 / micro labels */ --pt-fs-14: 0.875rem; /* 14 / meta, captions */ --pt-fs-16: 1rem; /* 16 / body */ --pt-fs-18: 1.125rem; /* 18 / large body / intro */ --pt-fs-20: 1.25rem; --pt-fs-24: 1.5rem; /* h4 */ --pt-fs-28: 1.75rem; --pt-fs-32: 2rem; /* h3 */ --pt-fs-40: 2.5rem; /* h2 */ --pt-fs-56: 3.5rem; /* h1 */ --pt-fs-80: 5rem; /* display */ --pt-lh-tight: 1.08; /* @kind other */ --pt-lh-snug: 1.22; /* @kind other */ --pt-lh-body: 1.55; /* @kind other */ --pt-lh-prose: 1.7; /* @kind other */ --pt-tracking-tight: -0.015em; --pt-tracking-flat: 0; --pt-tracking-wide: 0.04em; --pt-tracking-loud: 0.14em; /* eyebrows / kicker labels */ /* =================================================================== SPACING / RADII / SHADOWS =================================================================== */ --pt-s-2: 2px; --pt-s-4: 4px; --pt-s-6: 6px; --pt-s-8: 8px; --pt-s-12: 12px; --pt-s-16: 16px; --pt-s-20: 20px; --pt-s-24: 24px; --pt-s-32: 32px; --pt-s-40: 40px; --pt-s-56: 56px; --pt-s-80: 80px; --pt-s-120: 120px; --pt-r-2: 2px; --pt-r-4: 4px; --pt-r-8: 8px; --pt-r-12: 12px; --pt-r-16: 16px; --pt-r-pill: 999px; /* shadows — restrained, mostly used on cards and elevated buttons */ --pt-shadow-1: 0 1px 2px rgba(14, 17, 22, 0.06), 0 1px 3px rgba(14, 17, 22, 0.04); --pt-shadow-2: 0 4px 10px rgba(14, 17, 22, 0.08), 0 2px 4px rgba(14, 17, 22, 0.04); --pt-shadow-3: 0 18px 40px rgba(14, 17, 22, 0.14), 0 6px 12px rgba(14, 17, 22, 0.06); --pt-shadow-flow: 0 24px 60px rgba(216, 48, 32, 0.18); /* warm halo */ /* =================================================================== MOTION =================================================================== */ --pt-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --pt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --pt-dur-fast: 140ms; /* @kind other */ --pt-dur-base: 220ms; /* @kind other */ --pt-dur-slow: 420ms; /* @kind other */ } /* ---------- Dark surface (used on hero/3flow imagery overlays) ----- */ .pt-dark, [data-theme="dark"] { --pt-bg: #0A0C10; --pt-bg-muted: #131720; --pt-surface: #131720; --pt-surface-2: #1B2030; --pt-fg: #F4F5F7; --pt-fg-2: #C2C8D0; --pt-fg-3: #8A93A0; --pt-fg-inv: var(--pt-ink); --pt-border: #232838; --pt-border-strong: #2E3548; --pt-divider: #1A1F2C; --pt-accent: var(--pt-water); --pt-accent-fg: var(--pt-ink); --pt-accent-hover: var(--pt-water-deep); } /* ===================================================================== SEMANTIC TYPE RULES ===================================================================== */ html { font-family: var(--pt-font-body); color: var(--pt-fg); background: var(--pt-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .pt-display, h1.pt-display { font-family: var(--pt-font-display); font-weight: 700; font-size: clamp(2.5rem, 5vw + 1rem, var(--pt-fs-80)); line-height: var(--pt-lh-tight); letter-spacing: var(--pt-tracking-tight); color: var(--pt-fg); } h1, .pt-h1 { font-family: var(--pt-font-display); font-weight: 700; font-size: clamp(2rem, 3vw + 1rem, var(--pt-fs-56)); line-height: var(--pt-lh-tight); letter-spacing: var(--pt-tracking-tight); color: var(--pt-fg); margin: 0 0 var(--pt-s-24); } h2, .pt-h2 { font-family: var(--pt-font-display); font-weight: 700; font-size: clamp(1.625rem, 1.5vw + 1rem, var(--pt-fs-40)); line-height: var(--pt-lh-snug); letter-spacing: var(--pt-tracking-tight); color: var(--pt-fg); margin: 0 0 var(--pt-s-16); } h3, .pt-h3 { font-family: var(--pt-font-display); font-weight: 700; font-size: var(--pt-fs-32); line-height: var(--pt-lh-snug); color: var(--pt-fg); margin: 0 0 var(--pt-s-12); } h4, .pt-h4 { font-family: var(--pt-font-display); font-weight: 600; font-size: var(--pt-fs-24); line-height: var(--pt-lh-snug); color: var(--pt-fg); margin: 0 0 var(--pt-s-8); } .pt-eyebrow { font-family: var(--pt-font-display); font-size: var(--pt-fs-12); font-weight: 700; letter-spacing: var(--pt-tracking-loud); text-transform: uppercase; color: var(--pt-fg-3); } .pt-kicker { font-family: var(--pt-font-display); font-size: var(--pt-fs-14); font-weight: 600; letter-spacing: var(--pt-tracking-wide); text-transform: uppercase; color: var(--pt-warm); } .pt-lede { font-family: var(--pt-font-body); font-size: var(--pt-fs-20); line-height: var(--pt-lh-body); color: var(--pt-fg-2); } p, .pt-p { font-family: var(--pt-font-body); font-size: var(--pt-fs-16); line-height: var(--pt-lh-prose); color: var(--pt-fg); margin: 0 0 var(--pt-s-16); text-wrap: pretty; } small, .pt-meta { font-size: var(--pt-fs-14); color: var(--pt-fg-3); line-height: var(--pt-lh-body); } code, .pt-code { font-family: var(--pt-font-mono); font-size: 0.92em; background: var(--pt-bg-muted); padding: 0.1em 0.35em; border-radius: var(--pt-r-4); color: var(--pt-fg); } .pt-num { font-family: var(--pt-font-display); font-variant-numeric: tabular-nums lining-nums; font-weight: 700; letter-spacing: -0.02em; } /* The signature triad tagline pattern — "Abrechnen. Kontrollieren. Optimieren." */ .pt-triad-tagline { font-family: var(--pt-font-display); font-weight: 700; letter-spacing: var(--pt-tracking-tight); } .pt-triad-tagline > span:nth-child(1) { color: var(--pt-warm); } .pt-triad-tagline > span:nth-child(2) { color: var(--pt-sun-deep); } .pt-triad-tagline > span:nth-child(3) { color: var(--pt-water-deep); }