/* Lokal gehostete Schriften, kein Google-Request. font-display steht auf `optional`, nicht auf `swap`. Der Unterschied: Bei `swap` zeigt der Browser sofort die Ersatzschrift und tauscht sie aus, sobald die echte da ist. Genau dieser Tausch kostete Punkte. Der Hero-Satz brach danach eine Zeile kuerzer um und die halbe Seite sprang 28 px nach oben, gemessene 0,03 bis 0,05 Layout Shift, auf breiten Fenstern am staerksten. Drei Anlaeufe, die Massverhaeltnisse der Ersatzschrift immer genauer zu treffen, brachten den Wert nur von 0,033 auf 0,029: bei Textbloecken dicht an der Umbruchgrenze kippt die Zeile schon bei Bruchteilen eines Prozents. Bei `optional` entscheidet der Browser einmal und bleibt dabei. Ist die Schrift in etwa hundert Millisekunden da, wird sie verwendet, sonst bleibt es fuer diesen Aufruf bei der Ersatzschrift. Ein Tausch findet nie statt, ein Sprung kann also gar nicht entstehen. Ab dem zweiten Seitenaufruf liegt die Schrift im Zwischenspeicher und ist immer rechtzeitig da. Das traegt nur, weil die Ersatzschriften unten massgenau eingestellt sind: am echten Text gemessen betraegt der Breitenunterschied 0,04 Prozent. Verwendet werden ausschliesslich Saira und Saira Condensed. Die elf weiteren Familien aus dem Entwurfslauf sind am 24.08.2026 entfernt worden, sie waren nirgends referenziert und lagen nur als tote Last auf dem Server. */ @font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: optional; src: url(fonts/saira-latin-ext-1.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: optional; src: url(fonts/saira-latin-2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: optional; src: url(fonts/saira-latin-ext-3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: optional; src: url(fonts/saira-latin-4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: optional; src: url(fonts/sairacond-latin-ext-1.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: optional; src: url(fonts/sairacond-latin-2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 900; font-display: optional; src: url(fonts/sairacond-latin-ext-3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 900; font-display: optional; src: url(fonts/sairacond-latin-4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Ersatzschriften mit angeglichenen Massen ---------- Bis die echte Schrift geladen ist, zeigt der Browser die Ersatzschrift. Ist die anders proportioniert, springt beim Wechsel die ganze Seite. Genau das war der Fall: Lighthouse wies den Sprung des Hero-Satzes vier geladenen Saira-Dateien zu, Cumulative Layout Shift lag bei 0,151. Die Werte sind gemessen, nicht geschaetzt: mittlere Vorschubbreite der Kleinbuchstaben aus den woff2-Dateien gegen dieselbe Groesse in Arial. Saira 51,05 %, Saira Condensed 900 41,17 %, Arial 48,17 % vom Geviert. Daraus size-adjust, und weil size-adjust auch die Hoehenmasse skaliert, werden ascent und descent gegengerechnet (Saira: 113,5 % und 43,9 %). */ @font-face { font-family: 'Saira Ersatz'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 101.98%; ascent-override: 111.30%; descent-override: 43.05%; line-gap-override: 0%; } @font-face { font-family: 'Saira Condensed Ersatz'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); /* Aus den GROSSBUCHSTABEN gerechnet, nicht aus den kleinen. Alle Ueberschriften stehen in Versalien, und dort sind die Verhaeltnisse andere: Saira Condensed 900 misst 47,38 % vom Geviert, Arial 66,26 %. Der erste Anlauf hatte mit den Kleinbuchstaben gerechnet und lag damit 19 % zu breit. Folge: die Ueberschrift brach mit der Ersatzschrift eine Zeile mehr um und die halbe Seite rutschte beim Wechsel 28 px nach oben, gemessene 0,033 Layout Shift. */ size-adjust: 70.37%; ascent-override: 161.29%; descent-override: 62.38%; line-gap-override: 0%; }