/* ============================================================ OFIRA – TYPOGRAFIE-SYSTEM Stand: 2026 HIERARCHIE-REFERENZ: ┌─────────────────────────────────────────────────────┐ │ EBENE KLASSE SIZE WEIGHT EINSATZ │ ├─────────────────────────────────────────────────────┤ │ H1 h1 / .h1 36px 700 Seitentitel │ │ H2 h2 / .h2 30px 700 Hauptsektionen │ │ H3 h3 / .h3 24px 600 Widget-Titel │ │ H4 h4 / .h4 20px 600 Karten-Titel │ │ H5 h5 / .h5 16px 600 Gruppen-Labels │ │ H6 h6 / .h6 14px 600 Formular-Sektionen │ ├─────────────────────────────────────────────────────┤ │ Lead .lead 18px 400 Einleitungssatz │ │ Body p / .text-base 14px 400 Standard App-Text │ │ Body LG .text-lg 16px 400 Wichtiger Fließtext │ │ Body SM .text-sm 12px 400 Hilfstexte, Captions │ ├─────────────────────────────────────────────────────┤ │ KPI LG .kpi-number--lg 48px 700 Dashboard Hauptzahl │ │ KPI .kpi-number 36px 700 KPI-Karten │ │ KPI SM .kpi-number--sm 24px 700 Kleine Kennzahlen │ ├─────────────────────────────────────────────────────┤ │ Table HDR .table-header 12px 600 Spaltenköpfe │ │ Table Cell .table-cell 14px 400 Tabelleninhalte │ ├─────────────────────────────────────────────────────┤ │ Label .form-label 14px 500 Formular-Labels │ │ Helper .form-helper 12px 400 Hinweistexte │ │ Error .form-error 12px 500 Fehlermeldungen │ ├─────────────────────────────────────────────────────┤ │ Nav Item .nav-item-text 14px 500 Sidebar Navigation │ │ Button .btn-text 14px 500 Alle Buttons │ │ Section .section-label 12px 600 Uppercase Kategorien │ │ Badge – 12px 600 Status-Badges │ └─────────────────────────────────────────────────────┘ ============================================================ */ /* ============================================ INTER VARIABLE FONT – LOKALE EINBINDUNG Eine Datei für alle Gewichte (100-900). font-display: swap verhindert FOIT. ============================================ */ @font-face { font-family: 'Inter'; src: url('/fonts/inter/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================================ BASE ============================================ */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* WCAG 2.4.11 Focus Not Obscured: Sticky-Header darf beim Tabbing fokussiertes Element nicht verdecken. */ scroll-padding-top: calc(var(--topbar-height, 60px) + 1rem); } body { font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); letter-spacing: var(--tracking-body); color: var(--text-primary); background-color: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Tabular nums + Stylistic Set 01 (Inter) global – Zahlen springen nicht mehr und das "1" hat Serifen, was Identifikation in Daten erleichtert. */ font-feature-settings: "liga" 1, "calt" 1, "tnum" 1, "ss01" 1, "cv11" 1; } /* ============================================ ÜBERSCHRIFTEN-HIERARCHIE ============================================ */ h1, .h1 { font-size: var(--text-heading-1-size); font-weight: var(--text-heading-1-weight); line-height: 1.15; letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0 0 var(--space-6) 0; } h2, .h2 { font-size: var(--text-heading-2-size); font-weight: var(--text-heading-2-weight); line-height: 1.2; letter-spacing: var(--tracking-heading); color: var(--text-primary); margin: 0 0 var(--space-5) 0; } h3, .h3 { font-size: var(--text-heading-3-size); font-weight: var(--text-heading-3-weight); line-height: 1.3; letter-spacing: var(--tracking-heading); color: var(--text-primary); margin: 0 0 var(--space-4) 0; } h4, .h4 { font-size: var(--text-heading-4-size); font-weight: var(--text-heading-4-weight); line-height: 1.4; letter-spacing: var(--tracking-body); color: var(--text-primary); margin: 0 0 var(--space-3) 0; } h5, .h5 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.4; letter-spacing: var(--tracking-body); color: var(--text-primary); margin: 0 0 var(--space-2) 0; } h6, .h6 { /* Section-Header (z. B. "ZAHLUNGSUEBERWACHUNG", "BEMERKUNGEN"). Bewusst etwas groesser als der Body-Text (14px) – damit die Rubriken auch nach der Umstellung auf --text-heading (dunkler Ton) klar als Ueberschriften erkennbar bleiben. */ font-size: 1rem; /* 16px – Section-Header gut sichtbar */ font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); letter-spacing: var(--tracking-wide); color: var(--text-heading); /* identisch zur Markup-Klasse text-color-heading */ margin: 0 0 var(--space-2) 0; } /* ============================================ SECTION LABEL ============================================ */ .section-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-none); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-tertiary); } /* ============================================ BODY TEXT VARIANTEN ============================================ */ p, .text-base { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--text-primary); } .text-lg { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); } .ds-text-sm { font-size: var(--font-size-xs); line-height: var(--line-height-normal); color: var(--text-tertiary); } .ds-text-xs { font-size: var(--font-size-2xs); line-height: var(--line-height-normal); color: var(--text-tertiary); } /* ============================================ LEAD TEXT ============================================ */ .lead { font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: var(--line-height-relaxed); color: var(--text-secondary); margin-top: calc(-1 * var(--space-3)); margin-bottom: var(--space-6); max-width: var(--prose-width-normal); } /* ============================================ KPI-ZAHLEN font-variant-numeric: tabular-nums verhindert Springen bei sich ändernden Zahlen. ============================================ */ .kpi-number { font-size: var(--text-display-sm-size); font-weight: var(--text-display-sm-weight); line-height: var(--text-display-sm-lh); letter-spacing: var(--text-display-sm-tracking); color: var(--text-primary); font-variant-numeric: tabular-nums; } .kpi-number--lg { font-size: var(--font-size-5xl); } .kpi-number--sm { font-size: var(--font-size-2xl); } /* ============================================ FORMULAR-TYPOGRAFIE ============================================ */ .ds-form-label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-none); color: var(--text-secondary); margin-bottom: var(--space-2); } .ds-form-label--required::after { content: ' *'; color: var(--text-danger); } .ds-form-helper { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--text-tertiary); margin-top: var(--space-1); } .ds-form-error { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--text-danger); margin-top: var(--space-1); } /* ============================================ NAVIGATIONS-TYPOGRAFIE ============================================ */ .nav-item-text { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-none); } .nav-item-text--active { font-weight: var(--font-weight-semibold); } /* ============================================ LINKS ============================================ */ a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--text-link-hover); text-decoration: underline; } p a, .text-link { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; } /* ============================================ MONOSPACE / CODE ============================================ */ code, pre, kbd, .mono { font-family: var(--font-family-mono); font-size: 0.875em; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); padding: 1px var(--space-2); color: var(--color-primary-700); } pre { padding: var(--space-4); overflow-x: auto; line-height: var(--line-height-relaxed); } /* ============================================ TYPOGRAFIE-UTILITY-KLASSEN ============================================ */ /* Neue Rollen-Klassen (Text-Hierarchie auf 4 Rollen) */ .text-color-heading { color: var(--text-heading) !important; } .text-color-body { color: var(--text-body) !important; } .text-color-label { color: var(--text-label) !important; } .text-color-muted { color: var(--text-muted) !important; } /* Rueckwaerts-kompatible Aliase – zeigen auf die neuen Rollen */ .text-color-primary { color: var(--text-primary) !important; } .text-color-secondary { color: var(--text-secondary) !important; } .text-color-tertiary { color: var(--text-tertiary) !important; } .text-color-disabled { color: var(--text-disabled) !important; } .text-color-inverse { color: var(--text-inverse) !important; } .text-color-success { color: var(--text-success) !important; } .text-color-warning { color: var(--text-warning) !important; } .text-color-danger { color: var(--text-danger) !important; } .text-color-link { color: var(--text-link) !important; } /* Tabellen-Header global: einheitliche Label-Farbe via Token. Damit erben alle -Elemente automatisch den Label-Ton – keine Markup-Aenderung an einzelnen Tabellen noetig. */ th, .table thead th { color: var(--text-label); font-weight: var(--font-weight-semibold); } .font-normal { font-weight: var(--font-weight-normal) !important; } .font-medium { font-weight: var(--font-weight-medium) !important; } .font-semibold { font-weight: var(--font-weight-semibold) !important; } .font-bold { font-weight: var(--font-weight-bold) !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tabular-nums { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } /* ============================================ GLOBALER FOCUS-VISIBLE (WCAG 2.4.13) 2 px Outline + 2 px Offset garantiert mind. einen 2-CSS-px-Perimeter mit >= 3:1 Kontrast zu Component und Hintergrund. :focus-visible greift NUR bei Tastatur-Navigation, stoert also die Maus-Bedienung nicht. ============================================ */ :focus { outline: none; } :focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); border-radius: var(--radius-sm); } /* Komponenten mit eigenem Focus-Style erlauben Override */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } /* ============================================ PREFERS-CONTRAST (Hochkontrast-Modus) Aktiviert von Nutzern mit Kontrastbedarf. Borders werden staerker, Akzente saettiger. ============================================ */ @media (prefers-contrast: more) { :root { --border-subtle: rgba(15, 23, 42, 0.30); --border-default: rgba(15, 23, 42, 0.50); --border-strong: rgba(15, 23, 42, 0.80); --focus-outline-width: 3px; --table-divider-color: var(--border-subtle); --table-border: 1px solid var(--table-divider-color); --table-border-strong: 1px solid var(--border-default); } [data-theme="dark"] { --border-subtle: rgba(255, 255, 255, 0.30); --border-default: rgba(255, 255, 255, 0.50); --border-strong: rgba(255, 255, 255, 0.80); --table-divider-color: var(--border-subtle); --table-border: 1px solid var(--table-divider-color); --table-border-strong: 1px solid var(--border-default); } } /* ============================================ FORCED-COLORS (Windows High Contrast Mode) Sicherstellt, dass Borders und Focus sichtbar bleiben, auch wenn Hintergruende uebersteuert werden. ============================================ */ @media (forced-colors: active) { :focus-visible { outline: 3px solid CanvasText; } }