/* ===================================================================== typo-plex.css — dieselbe typografische Stimme wie gewerbecheck.at --------------------------------------------------------------------- QUELLE: Schwester-Datei in `gewerbecheck/public/typo-plex.css`. Die Schriftschicht und die Regeln sind identisch; die Bauteil-Schicht ist eine andere, weil diese App ihre Stile in Astro-Komponenten kapselt und kaum globale Klassen hat. Aenderungen an der SCHRIFT gehoeren in BEIDE Kopien — der Preis dafuer, dass es zwei Repos sind, derselbe wie bei tokens.css. WARUM ES DIESE DATEI HIER GIBT Bis 2026-08-06 lief gewerbecheck.at auf IBM Plex und app.gewerbecheck.at weiter auf Inter. Die beiden Seiten lasen sich dadurch wieder wie zwei Firmen — genau das Problem, das das gemeinsame tokens.css loesen sollte, nur ueber die Schrift statt ueber die Farbe. DIE WAHL, GEMESSEN STATT GESCHAETZT (16 Familien, 7 Messungen je Familie, Harness in gewerbecheck/design/prototypen/fonts-probe-3.html): Lesetext IBM Plex Sans niedrigste Verwechslungsgefahr im Feld, 55,6 % ueber I/l, 0/O, rn/m, §/5, 5/S, a/o. Blende c 3,80 px @16, weiteste Groteske. Tabellarische Ziffern von Haus aus — fuer ein Datenprodukt der entscheidende Punkt. Auszeichnung IBM Plex Serif dieselbe Superfamilie, § korrekt. Zahlen Sligoil Micro einzige geprüfte Monospace mit DURCHGESTRICHENER NULL: 0 gegen O 33,5 % statt 88,0 % (Plex Mono). Alle SIL OFL 1.1, alle lokal, zur Laufzeit keine externe Anfrage. IBM Plex wird AUCH ueber Google Fonts verteilt; bezogen wurde aus IBMs eigenem Repository. Fabi hat das am 2026-08-06 in dieser Kenntnis entschieden. HARTE REGEL AUS DER MESSUNG: die Zahlenspur nie unter 15 px. Sligoils Nullstrich verschwindet bei 14 px in der Rasterung, dort steigt 0 gegen O von 33,5 auf 80,9 % Aehnlichkeit. In einem Produkt, dessen ganze Aussage Zahlen sind, ist das kein Schoenheitsfehler. ===================================================================== */ @font-face { font-family: 'Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSans-Regular.woff2?v=0a83fcc1') format('woff2'); } @font-face { font-family: 'Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSans-SemiBold.woff2?v=0a83fcc1') format('woff2'); } @font-face { font-family: 'Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexSans-Bold.woff2?v=0a83fcc1') format('woff2'); } @font-face { font-family: 'Sligoil'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Sligoil-Micro.woff2?v=0a83fcc1') format('woff2'); } @font-face { font-family: 'Sligoil'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Sligoil-MicroMedium.woff2?v=0a83fcc1') format('woff2'); } html[data-typo="plex"] { --ff-display: 'Plex Sans', system-ui, sans-serif; /* seit 08-17 Sans-Bold-Headlines (Referenz); Serif entfaellt */ --ff-text: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif; --ff-data: 'Sligoil', ui-monospace, 'Consolas', monospace; /* Alles, was im Bestand ueber --ff-sans laeuft, uebernimmt die Textschrift ohne dass eine Komponente angefasst werden muss. */ --ff-sans: var(--ff-text); --ff-mono: var(--ff-data); } html[data-typo="plex"] body { font-family: var(--ff-text); font-synthesis: none; font-variant-numeric: tabular-nums; } /* ---------- Auszeichnung --------------------------------------------- Ueberschriften in der Serif. Die App hatte bisher "keine Serif" als ausdrueckliche Regel in tokens.css — die faellt hiermit, weil die Auszeichnung genau die Rolle ist, in der eine Serif Autoritaet traegt und nichts kostet: sie steht gross, nie im Lesetext. */ html[data-typo="plex"] h1, html[data-typo="plex"] h2, html[data-typo="plex"] h3 { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; } html[data-typo="plex"] h4, html[data-typo="plex"] h5 { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.008em; } /* ---------- Die Zahlenspur ------------------------------------------- Diese 21 Selektoren tragen im Bestand bereits `tabular-nums` — sie sind damit die vom Bestand selbst ausgewiesenen Zahlenstellen. Statt sie neu zu benennen, wird die Datenschrift genau dort angehaengt. `html[...]` und nicht `[...]` als Praefix: Astro haengt an jede Komponentenregel ein `[data-astro-cid-…]` und hebt sie damit auf dieselbe Spezifitaet wie eine Klasse. Ohne das Element-Praefix waere es ein Gleichstand, und die Komponente gewaenne ueber die Reihenfolge. Am gebauten Artefakt geprueft. */ html[data-typo="plex"] .kpi-value, html[data-typo="plex"] .niche-card__number, html[data-typo="plex"] .hero-data__metric-value, html[data-typo="plex"] .pdf-mockup__kpi-num, html[data-typo="plex"] .age-hist__count, html[data-typo="plex"] .bezirk-card__plz, html[data-typo="plex"] .legal-donut__n, html[data-typo="plex"] .insights-rank, html[data-typo="plex"] .niche-filter__count, html[data-typo="plex"] .step__num, html[data-typo="plex"] .timeline__delta-to, html[data-typo="plex"] .timeline__tick-label, html[data-typo="plex"] .compare-chart .compare-legend-value, html[data-typo="plex"] .data-gap__facts dd, html[data-typo="plex"] .methodik-changelog dt, html[data-typo="plex"] .tabular, html[data-typo="plex"] table.data td, html[data-typo="plex"] .zahl { font-family: var(--ff-data); font-variant-numeric: tabular-nums; } /* Regel aus der Messung: keine Ziffer unter 15 px. Betrifft die kleinen Beschriftungen an Achsen und Karten, die sonst bei 12-13 px stehen — dort faellt Sligoils Nullstrich aus und 0 wird zu O. */ html[data-typo="plex"] .timeline__tick-label, html[data-typo="plex"] .age-hist__count, html[data-typo="plex"] .niche-filter__count, html[data-typo="plex"] .bezirk-card__plz, html[data-typo="plex"] .insights-rank { font-size: max(15px, 1em); } /* ---------- Beschriftungen in Versalien ------------------------------ */ html[data-typo="plex"] .kpi-label { font-family: var(--ff-data); letter-spacing: 0.09em; text-transform: uppercase; } /* ---------- Marke ---------------------------------------------------- Der Schriftzug oben links steht auf beiden Seiten gleich. */ html[data-typo="plex"] .brand { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.01em; } /* ---------- Fokus ----------------------------------------------------- */ html[data-typo="plex"] :focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; border-radius: 2px; }