/* =========================================================
   Life Archive – Schrift und Satz je Sprache

   <html lang> setzt locales/manifest.js vor dem ersten Bild.
   Hier hängt daran, was eine Sprache anders braucht als
   Englisch. Die Farben, Abstände und Formen bleiben überall
   dieselben – nur der Satz passt sich an.

   Grundsatz: Spline Sans bleibt vorn in jedem Stapel. Sie hat
   keine chinesischen oder japanischen Zeichen, also fällt der
   Browser für genau diese Zeichen auf die Systemschrift zurück –
   Ziffern und lateinische Buchstaben behalten die Hausschrift.
   Eigene CJK-Webfonts würden 10–20 MB je Schnitt kosten; die
   Systemschriften (PingFang, Hiragino, Microsoft YaHei, Yu
   Gothic, Noto CJK) sind dafür gebaut und schon da.
   ========================================================= */

:root {
  /* Untergrenze für kleine Schrift. Lateinisch 0 (die Größen gelten,
     wie sie stehen); Chinesisch und Japanisch 12px – darunter sind
     die Zeichen nicht mehr zu lesen. styles/*.css schreibt jede
     Größe unter 12px als max(var(--fs-floor), …). */
  --fs-floor: 0px;
}

/* ---------- Jede Sprache ------------------------------------------------ */

body {
  /* Ein Wort, das nicht in die Zeile passt, bricht – statt aus dem
     Kasten zu laufen. Greift nur dann; kurze Wörter bleiben ganz. */
  overflow-wrap: break-word;
}

/* Silbentrennung, wo der Browser die Sprache kennt. Lange deutsche
   Zusammensetzungen („Trinkerinnerungen") passen so auf Knöpfe, ohne
   mitten im Wort ohne Strich zu brechen. Englisch bleibt, wie es war. */
html:lang(de) body,
html:lang(fr) body,
html:lang(it) body,
html:lang(es) body,
html:lang(pt) body {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Zahlen, Codes und Eingaben werden nie getrennt. */
input, textarea, select, code, pre, kbd,
[contenteditable], .tnum, time {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------- Chinesisch (vereinfacht) ------------------------------------ */

html:lang(zh) {
  --font:       "Spline Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
                "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC",
                sans-serif;
  --font-serif: "Newsreader", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "SimSun",
                serif;
  --font-mono:  "Martian Mono", ui-monospace, "PingFang SC", "Microsoft YaHei", monospace;
  --fs-floor: 12px;
}

/* ---------- Japanisch --------------------------------------------------- */

html:lang(ja) {
  --font:       "Spline Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
                "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --font-serif: "Newsreader", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP",
                "Noto Serif JP", serif;
  --font-mono:  "Martian Mono", ui-monospace, "Hiragino Sans", "Yu Gothic UI", monospace;
  --fs-floor: 12px;
}

/* Überschriften nicht mitten in einer Wortgruppe umbrechen (Chrome;
   die anderen Browser lassen es aus und brechen wie bisher). */
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3,
html:lang(ja) button, html:lang(ja) .btn, html:lang(ja) .btn3d {
  word-break: auto-phrase;
}

/* ---------- Chinesisch und Japanisch gemeinsam -------------------------- */

/* Gesperrte Großbuchstaben-Etiketten sind ein lateinisches Mittel.
   CJK-Zeichen kennen keine Großschreibung, und Sperrung reißt sie
   auseinander. Für sie gilt die Laufweite der Schrift. */
html:lang(zh) *,
html:lang(ja) * {
  letter-spacing: normal !important;
}

/* Kursiv gibt es in CJK nicht – der Browser schrägt die Zeichen
   künstlich. Betonung trägt dort das Gewicht. */
html:lang(zh) em, html:lang(zh) i,
html:lang(ja) em, html:lang(ja) i {
  font-style: normal;
  font-weight: 600;
}

/* Satzzeichen am Zeilenanfang und Leerraum zwischen CJK und Latein
   (Chrome; sonst wirkungslos). */
html:lang(zh) body,
html:lang(ja) body {
  line-break: strict;
  text-spacing-trim: normal;
  text-autospace: normal;
}

/* ---------- Pseudo-Sprache (?lang=xx) ---------------------------------- */

/* Kein eigenes Aussehen – sie soll zeigen, was eine lange Sprache mit
   dem echten Layout macht. */