/* Ospella 2.0 — schriften.css: fünf Schriftbilder zur Wahl. * * Angelegt 09.09.2026 auf Ansage („und 5 schirften"). Übernommen aus * Ospella 1 (`src/schrift.js`, dort auf Ansage vom 07.09.2026) — dieselben * fünf Bilder, damit man in beiden Fassungen dasselbe sieht. * * WARUM ES EINE EIGENE WAHL IST UND NICHT AN DER PALETTE HÄNGT: In Ospella 1 * trug sechs von sieben Farbvorlagen ein `schrift`-Feld — wer „Kürbis" wählte, * bekam eine Schriftpaarung dazu, ob er wollte oder nicht. Das war eine * Kopplung ohne Grund. Farbe und Schrift sind zwei Entscheidungen. * * FÜNF, nicht mehr. Jede weitere Schrift ist eine Datei mehr im Paket und * eine Zeile mehr, die bei jeder Änderung mitgeprüft werden muss. * * ALLE DATEIEN LIEGEN LOKAL unter vendor/fonts/. Kein Google Fonts, kein * Netzzugriff — die Auslieferung läuft mit `connect-src 'none'` und * `font-src 'self'`; eine eingebundene Fremdschrift wäre stumm blockiert. * * MERKER AUS DER FONT-BIBLIOTHEK: Eine variable Schrift braucht den * font-weight-BEREICH im @font-face. Fehlt er, zeichnet der Browser nur ein * Gewicht und alles wirkt gleich dick. Alle fünf hier sind variabel. */ @font-face { font-family: 'Fraunces'; src: url('../vendor/fonts/Fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../vendor/fonts/Manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('../vendor/fonts/Nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url('../vendor/fonts/Source_Sans_3.woff2') format('woff2'); font-weight: 200 900; font-display: swap; } /* --- Anwendung --------------------------------------------------- * `data-schrift` steht am , gesetzt von src/einstellungen.js im * . „bestand" setzt NICHTS und lässt tokens.css gelten — der * geprüfte Grundzustand bleibt so erreichbar, ohne ihn zu wiederholen. * * `--schrift-anzeige` trägt Überschriften und die Wortmarke, * `--schrift-text` alles andere. Wo beide gleich sind, ist das Absicht. */ html[data-schrift="warm"] { --schrift-anzeige: 'Fraunces', Georgia, serif; --schrift-text: 'Inter', -apple-system, sans-serif; } html[data-schrift="klar"] { --schrift-anzeige: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --schrift-text: 'Manrope', 'Helvetica Neue', Arial, sans-serif; } html[data-schrift="klassisch"] { --schrift-anzeige: 'Playfair Display', Georgia, serif; --schrift-text: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; } html[data-schrift="freundlich"] { --schrift-anzeige: 'Nunito', 'Helvetica Neue', Arial, sans-serif; --schrift-text: 'Nunito', 'Helvetica Neue', Arial, sans-serif; } /* Fraunces und Manrope setzen tiefer als Playfair; ohne diese Zeile rutschen * die Überschriften in den Kopfzeilen um zwei Punkte nach unten. */ html[data-schrift="warm"] .titel, html[data-schrift="klar"] .titel { letter-spacing: -0.2px; } /* --- Schriftproben im Einstellungs-Screen ----------------------- */ .schriftprobe__wort { font-size: 21px; line-height: 1.1; display: block; } .schriftprobe__satz { font-size: 12px; line-height: 1.35; display: block; margin-top: 3px; color: var(--text-leise); } .probe-schrift--bestand .schriftprobe__wort { font-family: 'Playfair Display', Georgia, serif; } .probe-schrift--bestand .schriftprobe__satz { font-family: 'Inter', sans-serif; } .probe-schrift--warm .schriftprobe__wort { font-family: 'Fraunces', Georgia, serif; } .probe-schrift--warm .schriftprobe__satz { font-family: 'Inter', sans-serif; } .probe-schrift--klar .schriftprobe__wort, .probe-schrift--klar .schriftprobe__satz { font-family: 'Manrope', sans-serif; } .probe-schrift--klassisch .schriftprobe__wort { font-family: 'Playfair Display', Georgia, serif; } .probe-schrift--klassisch .schriftprobe__satz { font-family: 'Source Sans 3', sans-serif; } .probe-schrift--freundlich .schriftprobe__wort, .probe-schrift--freundlich .schriftprobe__satz { font-family: 'Nunito', sans-serif; }