/* Ospella 3.0 — schriften.css: ZEHN Schriftbilder zur Wahl. * Erweitert 11.09.2026 auf Ansage („10 verschieden schrift arten"); * die fünf Neuen kommen aus der Font-Bibliothek (~/Services/fonts, * manifest-geprüft, alle variabel mit Gewichtsbereich). * * 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; } @font-face { font-family: 'Cormorant Garamond'; src: url('../vendor/fonts/Cormorant_Garamond.woff2') format('woff2'); font-weight: 300 700; font-display: swap; } @font-face { font-family: 'Lora'; src: url('../vendor/fonts/Lora.woff2') format('woff2'); font-weight: 400 700; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('../vendor/fonts/DM_Sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; } @font-face { font-family: 'EB Garamond'; src: url('../vendor/fonts/EB_Garamond.woff2') format('woff2'); font-weight: 400 800; font-display: swap; } @font-face { font-family: 'Karla'; src: url('../vendor/fonts/Karla.woff2') format('woff2'); font-weight: 200 800; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('../vendor/fonts/Quicksand.woff2') format('woff2'); font-weight: 300 700; 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; } html[data-schrift="fein"] { --schrift-anzeige: 'Cormorant Garamond', Georgia, serif; --schrift-text: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; } html[data-schrift="ruhig"] { --schrift-anzeige: 'Lora', Georgia, serif; --schrift-text: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; } html[data-schrift="buch"] { --schrift-anzeige: 'EB Garamond', Georgia, serif; --schrift-text: 'Karla', 'Helvetica Neue', Arial, sans-serif; } html[data-schrift="leicht"] { --schrift-anzeige: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; --schrift-text: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; } html[data-schrift="modern"] { --schrift-anzeige: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --schrift-text: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; } /* Cormorant setzt sehr leicht — eine Stufe mehr Gewicht, sonst wirken die * Titel duenner als in allen anderen Schriftbildern. */ html[data-schrift="fein"] .titel, html[data-schrift="fein"] .tabkopf__titel { font-weight: 600; } /* 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; } .probe-schrift--fein .schriftprobe__wort { font-family: 'Cormorant Garamond', serif; font-weight: 600; } .probe-schrift--fein .schriftprobe__satz { font-family: 'DM Sans', sans-serif; } .probe-schrift--ruhig .schriftprobe__wort { font-family: 'Lora', serif; } .probe-schrift--ruhig .schriftprobe__satz { font-family: 'DM Sans', sans-serif; } .probe-schrift--buch .schriftprobe__wort { font-family: 'EB Garamond', serif; } .probe-schrift--buch .schriftprobe__satz { font-family: 'Karla', sans-serif; } .probe-schrift--leicht .schriftprobe__wort, .probe-schrift--leicht .schriftprobe__satz { font-family: 'Quicksand', sans-serif; } .probe-schrift--modern .schriftprobe__wort, .probe-schrift--modern .schriftprobe__satz { font-family: 'DM Sans', sans-serif; }