/* ================================================================== KEROLINA – Typografie (kerolina-schrift.css) ------------------------------------------------------------------ DIE EINZIGE STELLE IM PROJEKT, an der Schriften definiert werden. Wer die Schrift wechselt, das Ladeverhalten ändert oder eine Metrik nachjustiert, ändert AUSSCHLIESSLICH diese Datei. Keine HTML-Seite, keine Rundreiseseite, kein Include muss dafür angefasst werden – auch nicht bei 200 Rundreiseseiten. Eingebunden über includes/kerolina-schrift.php (Pflegeort für den Pfad). Rundreiseseiten binden nichts Schriftbezogenes ein: sie laden includes/kerolina-assets.php, und das holt diese Datei. ------------------------------------------------------------------ JE FAMILIE EINE VARIABLE DATEI Beide Schriften sind variable Schriften mit der Achse `wght`. Ein Bereich in `font-weight` ersetzt vier statische Schnitte – eine Datei statt vier, rund ein Drittel der Bytes. Die zweite Datei je Familie (`latin-ext`) holt der Browser über `unicode-range` nur, wenn ein Zeichen daraus vorkommt – bei deutschem Text also nie. Sie kostet im Regelfall 0 Byte und verhindert, dass ein einzelnes ł oder ř in einer Überschrift in die Ersatzschrift fällt. Herkunft, Fassungen, Prüfsummen, Lizenz und die Begründung der gewählten Dateivariante: assets/fonts/HERKUNFT-UND-LIZENZ.md Messwerte der Umstellung: .claude/docs/07-performance.md, §3.2 ================================================================== */ /* ------------------------------------------------------------------ 1. Montserrat – Fließtext, Navigation, Bedienelemente BEREICH 400–700: Die Seiten verwenden 400, 500, 600 und 700. Alle vier liegen im Bereich und werden von der variablen Achse exakt getroffen. Gemessen am 18.08.2026 gegen die bisherige Auslieferung über Google – Zeichenbreiten identisch. KURSIV: Es gibt bewusst keine kursive Datei. Google lieferte auch bisher keine; die vier kursiven Stellen der Referenzseite (Zitat der Beraterin) entstehen wie bisher als geneigte Fassung des aufrechten Schnitts. Eine echte kursive Datei wäre eine sichtbare Änderung, keine Reparatur – und 38 kB mehr. ------------------------------------------------------------------ */ @font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat/montserrat-v31-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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: "Montserrat"; src: url("/assets/fonts/montserrat/montserrat-v31-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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; } /* ------------------------------------------------------------------ 2. Playfair Display – Überschriften und Auszeichnung BEREICH 600–700 UND NICHT 400–700. Das ist Absicht und der wichtigste Punkt dieser Datei. Die bisherige Anfrage an Google lautete `wght@600;700`. Playfair stand also nur in 600 und 700 zur Verfügung. Sieben Stellen der Referenzseite fordern per CSS aber 400 an – Hero-Unterzeile, Hero-Claim, Bildunterschrift, die drei Paketpreise und der Fußzeilen-Claim. Nach den Zuordnungsregeln von CSS bekamen sie den nächstgelegenen vorhandenen Schnitt: 600. Gemessen am 18.08.2026 (Zeichenbreite einer Testzeile bei 100 px): Playfair 400 → 1674,622 px \ Playfair 500 → 1674,622 px > alle drei rendern mit 600 Playfair 600 → 1674,622 px / Playfair 700 → 1694,177 px Ein Bereich `400 700` würde diese sieben Stellen echt in 400 setzen – sichtbar leichter und schmaler als heute. Der Bereich `600 700` hält die Auslieferung dagegen Pixel für Pixel gleich: Anfragen unterhalb von 600 werden auf 600 begrenzt, genau wie bisher. OFFEN / DEM BETREIBER VORZULEGEN: Ob diese sieben Stellen dauerhaft in 600 stehen sollen, ist eine Gestaltungsfrage, keine technische. Wer sie in echtem Playfair 400 sehen will, ändert hier eine Zahl – `600 700` zu `400 700` – und sonst nichts. Diese Umstellung ändert das Schriftbild bewusst NICHT. ------------------------------------------------------------------ */ @font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display/playfair-display-v40-latin.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; 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: "Playfair Display"; src: url("/assets/fonts/playfair-display/playfair-display-v40-latin-ext.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; 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; } /* ------------------------------------------------------------------ 3. Metrisch angeglichene Ersatzschriften ZWECK: den Sprung beim Schriftwechsel wegnehmen, nicht das Aussehen ändern. `font-display: swap` heißt: Bis die eigene Schrift da ist, trägt Arial beziehungsweise Georgia den Text. Beide sind schmaler oder breiter als das Original – beim Wechsel springt das Layout. Gemessen am 18.08.2026 im Prüfstand, Schrift nach 1500 ms: ohne Angleichung mit Angleichung H1-Textbreite −81,06 px +2,50 px Höhe eines Textabsatzes +28,05 px ±0,00 px Die Werte sind aus gemessenen Zeichenbreiten gerechnet, nicht aus einem Generator übernommen. Testzeile bei 100 px: Montserrat 400 1862,617 / Arial 400 1701,074 = 109,50 % Montserrat 600 1921,423 / Arial 700 1782,080 = 107,82 % Playfair 600 1674,622 / Georgia 400 1680,029 = 99,68 % Playfair 700 1694,177 / Georgia 700 1929,980 = 87,78 % Die Steigwerte sind die Metriken der echten Schrift, geteilt durch den jeweiligen Maßfaktor: ascent-override = sTypoAscender / upem / size-adjust descent-override = sTypoDescender / upem / size-adjust Montserrat: 968 / −251 / 0 · Playfair: 1082 / −251 / 0, upem 1000. WARUM `unicode-range` AUCH HIER – das ist der heikle Punkt: Ohne diese Zeile würde die angeglichene Ersatzschrift DAUERHAFT für alle Zeichen greifen, die die eigene Schrift nicht enthält. Die Seiten benutzen ★ → ✓ ≈ ☰ ✕ ♡ ♥ ⭐ 🏨; die wären danach dauerhaft 9,5 % größer als heute. Der Bereich ist deshalb exakt auf die Abdeckung von Montserrat und Playfair begrenzt. Gemessen: Die Symbolzeile ist im Endzustand mit und ohne Angleichung 155,31 px breit – Byte für Byte dieselbe Darstellung. WENN local() INS LEERE GREIFT: Auf Systemen ohne Arial oder Georgia (Android, viele Linux-Systeme) findet `src: local(…)` nichts, der Schnitt entfällt und es gilt wieder die einfache Ersatzschrift aus der Liste unten. Das ist der heutige Zustand – also kein Rückschritt, nur kein Gewinn. ------------------------------------------------------------------ */ @font-face { font-family: "Montserrat Ersatz"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"); font-weight: 400; size-adjust: 109.50%; ascent-override: 88.40%; descent-override: 22.92%; line-gap-override: 0%; 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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; } /* GEWICHT 500 – EIGENER BLOCK SEIT AUFTRAG 10A-2 (11.09.2026). Bis dahin deckte der 400er-Block auch 500 ab (109,50 %). Gewicht 500 traegt genau einen Kantenfall: die elf Menuewoerter der zentralen Kopfzeile (.main-nav a, .9rem 500). Die Kopfzeile ist ab 1440 px randvoll (9,2 px Reserve) und bei 1081–1439 px zweizeilig. Mit der 400er-Kalibrierung stand die Navigation in der Ersatzschrift um 5,3 % zu schmal (Σ 935,9 statt 983,1 px bei 14,4 px) – bei 1345–1391 px Fensterbreite einzeilig, in Montserrat zweizeilig: die Kopfzeile wuchs beim Schriftwechsel von 71 auf 79 px, gemessen CLS 0,687 bei 1366 px auf Uebersicht und Anfrageseite (W-1335 rendert die Navigation 2,5 % groesser und brach dort bereits in der Ersatzschrift um – gleiche Ursache, anderes Fenster). Gemessen am 11.09.2026, Montserrat 500 gegen Arial 400 bei 100 px: elf Menuewoerter der Kopfzeile 6443,78 / 5584,36 = 115,39 % Testzeile wie oben = 112,52 % Kleinbuchstaben a–z ae oe ue ss = 117,64 % Grossbuchstaben A–Z = 106,33 % Ziffern 0–9 = 105,70 % Basis ist die Summe der Menuewoerter, nicht die Testzeile: Diese Summe trifft die Umbruchentscheidung der Kopfzeile. Ein Skalar kann nicht jede Zeichenmischung treffen; die Kopfzeile ist die Stelle, an der es zaehlt. Steigwerte wie oben: 968 / 1000 / 1,1539 und 251 / 1000 / 1,1539. */ @font-face { font-family: "Montserrat Ersatz"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"); font-weight: 500; size-adjust: 115.39%; ascent-override: 83.89%; descent-override: 21.75%; line-gap-override: 0%; 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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Montserrat Ersatz"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 600 700; size-adjust: 107.82%; ascent-override: 89.78%; descent-override: 23.28%; line-gap-override: 0%; 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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Playfair Ersatz"; src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"); font-weight: 400 600; size-adjust: 99.68%; ascent-override: 108.55%; descent-override: 25.18%; line-gap-override: 0%; 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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Playfair Ersatz"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Times New Roman Bold"), local("Liberation Serif Bold"); font-weight: 700; size-adjust: 87.78%; ascent-override: 123.26%; descent-override: 28.59%; line-gap-override: 0%; 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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; } /* ------------------------------------------------------------------ 4. Die beiden Merkmale, aus denen jede Seite ihre Schrift bezieht Ab hier kennt keine Seite mehr einen Schriftnamen. Wer die Familie tauscht, ändert diese zwei Zeilen und die @font-face- Blöcke darüber – null HTML-Dateien. Die Ersatzschriften bleiben unverändert: Arial und Georgia sind auf allen Zielsystemen vorhanden und tragen den Text, bis die eigene Schrift da ist (`font-display: swap`). ------------------------------------------------------------------ */ :root { --font-display: "Playfair Display", "Playfair Ersatz", Georgia, serif; --font-body: "Montserrat", "Montserrat Ersatz", Arial, sans-serif; }