/* =========================================================================== Südramol Design System — typografische Feinschicht --------------------------------------------------------------------------- Ergänzt das bestehende Typo-System, ohne Größen, Farben oder Layout anzufassen. Alles hier betrifft ausschließlich die Satzqualität: wie Zeilen umbrechen, wie Ziffern stehen, wie lange deutsche Komposita behandelt werden. Deutsch ist typografisch anspruchsvoller als Englisch: „Brauchwasser- Recycling", „Tankstellenbetrieb", „Baden-Württemberg" sind doppelt so lang wie ihre englischen Entsprechungen. Ohne Gegenmaßnahmen reißen sie Flattersatz-Kanten auf oder laufen aus schmalen Spalten heraus. Voraussetzung: lang="de" am -Element — sonst greift die Silbentrennung nicht (der Browser braucht das Wörterbuch der richtigen Sprache). =========================================================================== */ /* --- 1. Grundlegendes Schriftrendering ---------------------------------- */ html { /* Auf dunklen Flächen wirkt Subpixel-Rendering fett und schmutzig. Antialiasing hält die Strichstärke über hell und dunkel gleich. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; } /* --- 2. Zeilenumbruch ---------------------------------------------------- */ /* Überschriften: ausbalancierte Zeilen statt eines einzelnen Restworts in der letzten Zeile. Nie automatisch trennen — ein Trennstrich in einer 64px-Zeile ist immer ein Fehler. */ h1, h2, h3, h4, h5, h6, .hero__h1, .faq__h2, .presse__h2 { text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; } /* Fließtext: keine Schusterjungen — der Browser zieht das letzte Wort automatisch in die vorletzte Zeile, wenn es allein stehen würde. */ p, li, dd, blockquote, figcaption, .faq__a, .faq__lead { text-wrap: pretty; } /* Sicherheitsnetz gegen überlaufende Komposita in jeder Breite. */ p, li, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, td, th { overflow-wrap: break-word; } /* Silbentrennung erst dort, wo die Spalten wirklich schmal werden. hyphenate-limit-chars 8 4 4: nur Wörter ab 8 Zeichen trennen, mindestens 4 Zeichen vor und nach dem Trennstrich — verhindert „Ta-nkstelle". */ @media (max-width: 720px) { p, li, dd, blockquote, figcaption, .faq__a, .faq__lead { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; } } /* Mehrspaltige Fließtextblöcke sind auch am Desktop schmal genug für Silbentrennung. */ .faq__item p, [class*="col"] p, [class*="card"] p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 9 4 4; } /* --- 3. Ziffern ---------------------------------------------------------- */ /* Kennzahlen, Preise, Uhrzeiten und Datumsangaben stehen tabellarisch, damit sie in Spalten und beim Hochzählen nicht springen. */ [class*="stat"], [class*="zahl"], [class*="num"], [class*="preis"], [class*="price"], [class*="pris"], [class*="date"], [class*="datum"], [class*="time"], [class*="hour"], [class*="oeffnung"], [class*="opening"], time, table td, table th { font-variant-numeric: tabular-nums lining-nums; } /* Fließtext dagegen bekommt proportionale Ziffern — tabellarische Ziffern reißen im Satz sichtbare Lücken. */ p, li, .faq__a, .faq__lead { font-variant-numeric: proportional-nums lining-nums; } /* --- 4. Detailkorrekturen ------------------------------------------------ */ /* Gesperrte Versalien-Labels: der Buchstabenabstand hängt rechts über und schiebt das Element optisch aus der Flucht. Der negative Rand holt es zurück auf die Kante. */ [class*="eyebrow"], .sys, [class*="label"], [class*="chip"] { font-variant-numeric: lining-nums; } /* Kursive Merriweather-Zitate: optischer Ausgleich der Schrägstellung. */ em, i, blockquote, [class*="quote"] { font-synthesis: none; } /* Hängende Interpunktion — öffnende Anführungszeichen stehen in der Marge, statt die Textkante einzudellen. Aktuell nur Safari, sonst wirkungslos. */ blockquote, [class*="quote"], [class*="zitat"] { hanging-punctuation: first last; } /* Bewusste Ausnahme: Sichtbar gemachte Code- und Token-Werte im Design-System und in der Workflow-Doku brauchen feste Zeichenbreiten. */ code, kbd, samp, pre, [class*="token"], [class*="hex"] { font-variant-ligatures: none; font-variant-numeric: tabular-nums lining-nums; hyphens: none; -webkit-hyphens: none; }