/* ============================================================================= * ff-design/typography.css — Schriftfamilien, Skala, Mono-Hilfsklassen * ----------------------------------------------------------------------------- * Geist Sans + Geist Mono als Stack (SIL OFL, kostenlos). Variable Fonts: * eine .woff2 deckt die Gewichtsbereich 100..900 ab, der Browser interpoliert. * * Mono-Klassen aktivieren tabular-nums + slashed-zero per OpenType-Feature, * damit Zahlen-Spalten ausgerichtet bleiben und 0/O nicht verwechselt wird. * * Schriftgrade folgen 05-design-tokens.md Tabelle 2.3. * ===========================================================================*/ /* --------------------------------------------------------------------------- * Variable-Font-Faces. font-display: swap — Geist faedet weich rein, kein FOIT. * ------------------------------------------------------------------------- */ @font-face { font-family: "Geist"; src: url("/fonts/geist-sans-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------- * Familien-Variablen. * ------------------------------------------------------------------------- */ :root { --ff-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ff-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* OpenType-Features fuer numerische Inhalte. Werden in .font-mono / * .font-numeric und in den ff-mono-*-Skalen aktiviert. */ --ff-numeric-feature-settings: "tnum", "zero", "ss01"; /* v3-Naming-Aliase. */ --font-sans: var(--ff-font-sans); --font-mono: var(--ff-font-mono); /* --------------------------------------------------------------------- * Schriftgrad-Skala — Design-Reset 24.05.2026. * macOS-/claude.ai-Aesthetik: wenig Grade, klare Hierarchie. * * | Token | Groesse | Wofuer | * |--------------------|---------|---------------------------------| * | --text-xs | 11px | Status-Leiste | * | --text-sm | 13px | Sekundaer / Meta-Zeile | * | --text-base | 15px | Body, Listen, Tabellen-Zellen | * | --text-h2 | 20px | Section-Header | * | --text-h1 | 28px | Page-Title | * | --text-display | 32px | Hero-Zahlen (Saldo) | * | --text-display-xl | 80px | Tablet-Kiosk Saldo-Anzeige | * * Drei Sans-Grade in der Praxis: sm (Meta), base (Body), h1+h2 (Titel). * Drei Mono-Grade: sm (Meta-Zahlen), base (Tabellen-Zahlen), display * (Hero-Zahlen). Display-XL nur Kiosk-Tablet. * ------------------------------------------------------------------- */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-h2: 1.25rem; /* 20px */ --text-h1: 1.75rem; /* 28px */ --text-display: 2rem; /* 32px */ --text-display-xl: 5rem; /* 80px */ /* Alte Skala-Aliase fuer Backward-Compat mit Tailwind-Utilities, die * text-lg / text-xl / text-2xl direkt referenzieren. Werte werden im * Reset NICHT mehr aktiv genutzt — neue Templates nehmen --text-h1/h2. */ --text-lg: var(--text-h2); --text-xl: var(--text-h1); --text-2xl: var(--text-h1); } /* --------------------------------------------------------------------------- * Schrift-Defaults am . Wird hier statt in tokens.css gesetzt, damit * Typografie-Setup beieinander steht. * ------------------------------------------------------------------------- */ html { font-family: var(--ff-font-sans); } /* --------------------------------------------------------------------------- * Mono-Klassen mit aktivierten OpenType-Features fuer numerische Inhalte. * .font-mono ist die Tailwind-kompatible Klasse, .font-numeric ein Alias. * ------------------------------------------------------------------------- */ .font-mono, .font-numeric { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); -webkit-font-feature-settings: var(--ff-numeric-feature-settings); font-variant-numeric: tabular-nums slashed-zero; } /* --------------------------------------------------------------------------- * Saldo-spezifische Hilfsklassen — semantisch, keine Tailwind-Aliasse. * ------------------------------------------------------------------------- */ .saldo-positiv { color: var(--ff-saldo-positiv); } .saldo-negativ { color: var(--ff-saldo-negativ); } .saldo-null { color: var(--ff-saldo-null); } /* --------------------------------------------------------------------------- * Typografie-Skalen-Klassen — Design-Reset: * .ff-h1 = 28px Sans Bold, Page-Title * .ff-h2 = 20px Sans Bold, Section-Header * .ff-meta = 13px Sans muted, Untertitel-Zeile unter H1 * * Sentence Case ueberall — KEIN uppercase, KEIN letter-spacing > 0.02em. * * .ff-display und .ff-display-xl bleiben fuer Kiosk-Hero-Zahlen (Saldo). * ------------------------------------------------------------------------- */ .ff-h1 { font-size: var(--text-h1); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .ff-h2 { font-size: var(--text-h2); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; } .ff-meta { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; } .ff-display { font-size: var(--text-display); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; } .ff-display-xl { font-size: 3rem; line-height: 3.25rem; letter-spacing: -0.025em; font-weight: 600; } .ff-display-l { font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.02em; font-weight: 600; } .ff-mono-display { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: var(--text-display); line-height: 1.1; letter-spacing: -0.01em; font-weight: 500; } .ff-mono-base { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: var(--text-base); line-height: 1.4; font-weight: 500; } .ff-mono-sm { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: var(--text-sm); line-height: 1.3; font-weight: 500; } /* Backward-Compat-Aliase fuer Templates die noch ff-mono-xl/l/m/s nutzen. * Neue Templates sollen ff-mono-display/base/sm verwenden. */ .ff-mono-xl { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: var(--text-display); line-height: 1.1; font-weight: 600; } .ff-mono-l { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: var(--text-h2); line-height: 1.4; font-weight: 500; } .ff-mono-m { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: var(--text-base); line-height: 1.4; font-weight: 500; } .ff-mono-s { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: var(--text-sm); line-height: 1.3; font-weight: 500; }