: `pretty` bricht die
letzten Zeilen mehrfach neu um und verdoppelt damit die Relayout-
Zeit. Auf kurzen Seiten unmerklich — auf einer Galerieseite mit
hunderten Bildunterschriften ruckelt dann jeder Browser-Zoom
(gemessen: 36 ms → 68 ms pro Relayout auf editionen.html).
Deshalb an die Lesetext-Container gebunden. Die Zuordnung zu den
seiteneigenen Containern steht im jeweiligen style.css. */
.lesetext p, .lesetext li, .lesetext dd, .lesetext blockquote,
.fliesstext {
text-wrap: pretty;
}
/* Optischer Randausgleich — hängende Interpunktion.
Bisher nur Safari, deshalb hinter @supports. */
@supports (hanging-punctuation: first) {
.lesetext {
hanging-punctuation: first;
}
}
/* ─── 5. Zeilenlänge ───────────────────────────────────────── */
/* Container mit .lesetext auszeichnen. Die Zuordnung zu den
seiteneigenen Textcontainern steht im jeweiligen style.css. */
.lesetext { max-width: var(--zeile); }
.lesetext-eng { max-width: var(--zeile-eng); }
/* ─── 6. Ziffern ───────────────────────────────────────────── */
/* Tabellen und Zeitangaben: gleiche Ziffernbreite, damit
Spalten untereinander stehen. */
table, th, td, time,
.zahlen {
font-variant-numeric: tabular-nums lining-nums;
}
/* ─── 7. Zeichen und Auszeichnung ──────────────────────────── */
/* Anführungszeichen für und
— Guillemets nach
innen zeigend, wie im übrigen Text auch: »Wort« und ›Wort‹.
Wer lieber „…“ setzt, tauscht die vier Werte gegen
"\201E" "\201C" "\201A" "\2018". */
:root:lang(de), [lang="de"] {
quotes: "\00BB" "\00AB" "\203A" "\2039";
}
/* Abkürzungen mit Erklärung: dezent markiert statt fett gestrichelt. */
abbr[title] {
text-decoration: underline dotted;
text-underline-offset: 0.15em;
cursor: help;
}
/* Versalien-Auszeichnung. Titillium hat keine echten Kapitälchen —
deshalb Großbuchstaben mit Sperrung statt font-variant-caps,
das sonst nur gestaucht gerechnet wird. */
.versalien {
text-transform: uppercase;
letter-spacing: var(--versalien-sperrung);
font-weight: 600;
}
/* Was nicht auseinanderfallen darf: 14 Uhr
Alternative zum geschützten Leerzeichen, wenn es im Text
schlecht zu pflegen ist. */
.zusammen {
white-space: nowrap;
}
/* Für Fälle, in denen die Automatik danebengreift. */
.keine-trennung {
-webkit-hyphens: none;
hyphens: none;
}
/* ─── 8. Druck: Schwarz-Weiß ───────────────────────────────── */
@media print {
:root {
--zeile: 100%;
}
body {
color: #000;
background: #fff;
font-size: 11pt;
line-height: 1.45;
}
/* Navigation, Buttons und Interaktives gehören nicht aufs Papier. */
header, footer, nav, .site-nav,
.btn, .cta-row, .burger, .nav-burger,
.lightbox, .lb-close, .lb-prev, .lb-next {
display: none !important;
}
/* Links laufen ins Leere, wenn die Adresse fehlt. */
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
word-break: break-all;
}
a[href^="#"]::after,
a[href^="mailto"]::after {
content: "";
}
/* Keine Überschrift allein am Seitenfuß, keine Einzelzeilen. */
h1, h2, h3, h4 { break-after: avoid; }
p, li, figure, table, blockquote { break-inside: avoid; }
p, li { orphans: 3; widows: 3; }
img {
max-width: 100% !important;
}
}
/* ─── 9. Bewegung ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}