/* ==========================================================================
   BookTo — Lesehilfen und Seitenübergänge
   Ergänzt reader.css. Alle Werte kommen aus den Einstellungen.
   ========================================================================== */

:root {
  --book-bg:   #ffffff;
  --book-fg:   #1a1a1a;
  --book-hl:   #ffe082;   /* Wortmarkierung */
  /* Muss zu COL_PAIRS['weiss'].hls (screens/settings.js) und zu BASE in
     js/profiles.js passen — sonst zeigt die App vor dem ersten
     applyStyle() eine andere Satzfläche als danach. */
  --book-hl-s: #e2ecfa;   /* Satzfläche */
  --book-letter-space: 0em;
  --book-word-space:   0em;
  /* Muss zu js/profiles.js BASE passen — sonst zeigt die App vor dem ersten
     applyStyle() einen anderen Zeilenabstand als danach. */
  --book-line: 1.5;
}

/* ── Leseflächen-Farben ───────────────────────────────────────────────────
   `.bookface` und `.booktext` sind die neutralen Anker: alles, was Buchtext
   zeigt, trägt sie — der Reader und die Musterseite in den Einstellungen.
   Vorher hingen die Regeln nur an `.reader__text`; die Musterseite zeigte
   dadurch zwar Silbenfarben, aber weder Abstände noch Lese-Schrift, und
   verglich also Äpfel mit Birnen. Die `.reader*`-Selektoren bleiben
   bestehen, damit nichts umbenannt werden muss. */

/* Der Lesegrund gehört dem BUCH, nicht der App.

   Vorher lag er auf `.reader`, also auf der ganzen Fläche samt Blätterleiste
   und Seitenpunkten. Im Dunkelmodus stand deren helle Beschriftung dann auf
   weißem Lesegrund — gemessen 1,0 bis 1,45:1, faktisch unlesbar. Der Reader
   war im Dunkeln nicht bedienbar.

   Jetzt trägt nur die Buchseite den Lesegrund. Die Bedienelemente folgen dem
   Farbschema der App. Das sieht im Dunkeln aus wie ein beleuchtetes Blatt in
   einem dunklen Raum — und genau das ist es auch. */
.reader__page, .bookface { background: var(--book-bg); }
.reader__page { border-radius: var(--radius-lg); }
.reader__text, .booktext,
.reader__booktitle, .reader__byline, .reader__meta { color: var(--book-fg); }

/* ── Abstände (Buchstabe, Wort, Zeile) ────────────────────────────────── */

.reader__text, .booktext {
  letter-spacing: var(--book-letter-space);
  word-spacing:   var(--book-word-space);
  line-height:    var(--book-line);
  /* Luft fuer die Wortmarkierung (Lars 2026-07-28): ein angetipptes Wort traegt
     aussen 3 px Rahmen + 2 px Abstand + Schattenflaeche = rund 9 px. Ohne diesen
     Innenabstand stand ein Wort der ersten Zeile buendig an der Oberkante,
     sein Rahmen lief ins Bild darueber. */
  padding-block: 10px;
}

/* ── Schriftarten ─────────────────────────────────────────────────────── */

html[data-bookfont="normal"]  .reader__text,
html[data-bookfont="normal"]  .booktext { font-family: var(--font-body); }
html[data-bookfont="serif"]   .reader__text,
html[data-bookfont="serif"]   .booktext { font-family: var(--font-headline); }
/* Lese-Schrift: schwere Unterlängen, klar unterscheidbare Buchstaben.
   OpenDyslexic ist optional — wenn nicht vorhanden, greift eine gut
   lesbare Ersatzkette mit denselben Eigenschaften.

   BEWUSST OHNE eigenen Buchstabenabstand. Hier stand
   `letter-spacing: max(var(--book-letter-space), .04em)` — die Schrift
   brachte damit heimlich mehr Buchstabenabstand mit, am Wortabstand
   vorbei. Genau diese Kombination (Buchstaben weiter, Wörter nicht)
   verschlechtert das Lesen (Galliussi et al. 2020, p<0,001), und
   js/reading-aids.js verhindert sie deshalb — wusste von diesem Floor
   aber nichts. Wer weitere Abstände will, stellt sie als Abstände ein;
   dann greift die Kopplung. Auch der Schriften-Vergleich (readcheck)
   braucht das: Er vergleicht Schriften, nicht Schrift+Geheimabstand. */
html[data-bookfont="dyslexic"] .reader__text,
html[data-bookfont="dyslexic"] .booktext {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Verdana', sans-serif;
  font-weight: 500;
}
html[data-bookfont="mono"] .reader__text,
html[data-bookfont="mono"] .booktext {
  font-family: 'DM Mono', 'Consolas', monospace;
}

/* ── Satz- und Wortmarkierung (gleichzeitig) ──────────────────────────── */

.tts-sentence { border-radius: var(--radius-sm); transition: background .12s ease; }
.tts-word     { border-radius: 4px; padding: 0 .06em; }

/* Der laufende Satz bekommt eine ruhige Fläche … */
.reader[data-highlight="sentence"] .tts-sentence.is-active,
.reader[data-highlight="both"]     .tts-sentence.is-active,
.bookface[data-highlight="sentence"] .tts-sentence.is-active,
.bookface[data-highlight="both"]     .tts-sentence.is-active {
  background: var(--book-hl-s);
  box-shadow: 0 0 0 .18em var(--book-hl-s);
}

/* … das gesprochene Wort darin die kräftige Markierung. */
.reader[data-highlight="word"] .tts-word.is-active,
.reader[data-highlight="both"] .tts-word.is-active,
.bookface[data-highlight="word"] .tts-word.is-active,
.bookface[data-highlight="both"] .tts-word.is-active {
  background: var(--book-hl);
  box-shadow: 0 0 0 .1em var(--book-hl);
}

.reader[data-highlight="off"] .tts-word.is-active,
.reader[data-highlight="off"] .tts-sentence.is-active,
.bookface[data-highlight="off"] .tts-word.is-active,
.bookface[data-highlight="off"] .tts-sentence.is-active { background: none; box-shadow: none; }

/* ── Ganze Seite markiert: eigene Aufnahme läuft ──────────────────────────
   Eine Aufnahme trägt keine Wortzeiten (siehe screens/reader.js). Statt
   eine Position zu erfinden, bekommt der ganze Text dieselbe ruhige Fläche,
   die sonst der laufende Satz trägt — die Aussage ist „diese Seite wird
   gerade gelesen", nicht „hier bin ich".

   Dieselbe Farbe wie die Satzfläche, damit es kein zweites Zeichen zu
   lernen gibt. Über `box-shadow` statt Innenabstand, damit der Text nicht
   springt, wenn die Markierung kommt und geht.

   Der Rand steht in px, nicht wie beim Satz in `em`. Die Satzfläche liegt
   INNERHALB des Textblocks und darf über die Nachbarzeile ragen; dieses
   Feld liegt am Rand der Lesefläche. Dort stehen nur 8 px Innenabstand zur
   Verfügung (11 px bei größter Schrift) — ein mitwachsendes `.18em` maß bei
   66 px Buchschrift 11,9 px und wurde beschnitten. */
.reader__text.is-reading,
.booktext.is-reading {
  background: var(--book-hl-s);
  box-shadow: 0 0 0 6px var(--book-hl-s);
  border-radius: var(--radius-sm);
}

/* Angetipptes Einzelwort — immer sichtbar, auch wenn Mitmarkieren aus ist. */
.tts-word.is-tapped {
  background: var(--book-hl);
  box-shadow: 0 0 0 .14em var(--book-hl);
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Wörter sind anwählbar: Zeiger und Mindest-Trefferfläche. */
.reader__text .tts-word, .booktext .tts-word {
  cursor: pointer;
  position: relative;
  padding-top: .12em;
  padding-bottom: .12em;
}
.reader__text .tts-word:hover,
.booktext .tts-word:hover { background: rgba(0,0,0,.05); }
html[data-contrast="dark"] .reader__text .tts-word:hover,
html[data-contrast="dark"] .booktext .tts-word:hover,
html[data-contrast="high"] .reader__text .tts-word:hover,
html[data-contrast="high"] .booktext .tts-word:hover { background: rgba(255,255,255,.12); }

/* ── Silbenfarben (Mildenberger: blau / rot im Wechsel) ───────────────── */

.syl--0 { color: #1d4ed8; }
.syl--1 { color: #dc2626; }
html[data-contrast="dark"] .syl--0 { color: #7fa8ff; }
html[data-contrast="dark"] .syl--1 { color: #ff8a8a; }
html[data-contrast="high"] .syl--0 { color: #66b3ff; }
html[data-contrast="high"] .syl--1 { color: #ff9d9d; }

/* ── Wortgestalt: jeder Buchstabe in einem Kästchen seiner Höhe ───────── */

.reader__text .tts-word:has(.bf),
.booktext .tts-word:has(.bf) {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  padding: 3px 5px 4px;
  background: rgba(0,0,0,.04);
  border-radius: 6px;
  margin: 0 .08em;
}
.bf {
  --u: .62em;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--color-surface);
  color: var(--book-fg);
  border-radius: 4px;
  /* ⚠️ min-width statt fester Breite (Lars 2026-07-28: „manche Buchstaben wie
     W sind abgeschnitten und überdeckt"): Ein W ist deutlich breiter als ein i.
     Bei fester Breite lief seine Tinte über den Nachbarn. Schmale Buchstaben
     behalten das ruhige Raster, breite bekommen ihren Platz. */
  min-width: calc(var(--u) * .85);
  padding: 0 2px;
  box-sizing: content-box;
  /* Schrift etwas kleiner als die Kästchenhöhe — die Lese-Schriften haben
     größere Glyphenboxen als die Grundschrift; vorher stieß die Oberlänge
     oben an den Rand. */
  font-size: calc(var(--u) * 1.35);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
/* Wortgestalt UND Silbenfarben zusammen: die Kästchen setzen selbst eine
   Schriftfarbe (--book-fg) — die Silbenfarbe muss sie überschreiben. */
.bf.syl--0 { color: #1d4ed8; }
.bf.syl--1 { color: #dc2626; }
html[data-contrast="dark"] .bf.syl--0 { color: #7fa8ff; }
html[data-contrast="dark"] .bf.syl--1 { color: #ff8a8a; }
html[data-contrast="high"] .bf.syl--0 { color: #66b3ff; }
html[data-contrast="high"] .bf.syl--1 { color: #ff9d9d; }
/* Höhen: die Staffelung IST die Wortgestalt (x-Höhe · Oberlänge · Unterlänge).
   Oberlängen-Kästchen etwas höher, damit Großbuchstaben nicht am Rand kleben. */
.bf-x    { height: calc(var(--u) * 1.5); }
.bf-asc  { height: calc(var(--u) * 2.15); }
.bf-desc { height: calc(var(--u) * 2.0); margin-bottom: calc(var(--u) * -0.4);
           padding-bottom: calc(var(--u) * 0.4); }
.bf-pun  { height: calc(var(--u) * .8); min-width: calc(var(--u) * .5); }

html[data-contrast="dark"] .reader__text .tts-word:has(.bf),
html[data-contrast="dark"] .booktext .tts-word:has(.bf),
html[data-contrast="high"] .reader__text .tts-word:has(.bf),
html[data-contrast="high"] .booktext .tts-word:has(.bf) {
  background: rgba(255,255,255,.08);
}

/* ── Seitenübergänge ──────────────────────────────────────────────────── */

.reader__page { will-change: transform, opacity; }

/* Überblenden */
.reader[data-anim="fade"] .reader__page.is-turning {
  animation: page-fade .32s ease;
}
@keyframes page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Schieben — Richtung kommt aus data-dir */
.reader[data-anim="slide"] .reader__page.is-turning[data-dir="next"] {
  animation: page-slide-next .3s ease;
}
.reader[data-anim="slide"] .reader__page.is-turning[data-dir="prev"] {
  animation: page-slide-prev .3s ease;
}
@keyframes page-slide-next {
  from { transform: translateX(14%); opacity: .2; }
  to   { transform: translateX(0);   opacity: 1; }
}
@keyframes page-slide-prev {
  from { transform: translateX(-14%); opacity: .2; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Umblättern — angedeutete Buchseite */
.reader[data-anim="turn"] .reader__page.is-turning[data-dir="next"] {
  animation: page-turn-next .42s cubic-bezier(.2,.7,.3,1);
  transform-origin: left center;
}
.reader[data-anim="turn"] .reader__page.is-turning[data-dir="prev"] {
  animation: page-turn-prev .42s cubic-bezier(.2,.7,.3,1);
  transform-origin: right center;
}
@keyframes page-turn-next {
  from { transform: perspective(1400px) rotateY(-22deg) scale(.96); opacity: .25; }
  to   { transform: perspective(1400px) rotateY(0)      scale(1);   opacity: 1; }
}
@keyframes page-turn-prev {
  from { transform: perspective(1400px) rotateY(22deg) scale(.96); opacity: .25; }
  to   { transform: perspective(1400px) rotateY(0)     scale(1);   opacity: 1; }
}

/* „Bewegung reduzieren" und Einstellung „keine" schalten alles ab. */
.reader[data-anim="none"] .reader__page.is-turning { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .reader__page.is-turning { animation: none !important; }
}

/* ── Wörter mit Erklärung ─────────────────────────────────────────────── */

.tts-word.has-explain {
  border-bottom: 3px dotted var(--color-primary);
  padding-bottom: .04em;
}

/* Erklärungs-Fenster */
.explain {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--space-5)));
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.explain__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.explain__head strong {
  flex: 1;
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  color: var(--color-primary-deep);
}
.explain__text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  max-height: 34vh;
  overflow-y: auto;
}
html[data-contrast="dark"] .explain__head strong,
html[data-contrast="high"] .explain__head strong { color: var(--color-primary-light); }

/* ── Farbfelder in den Einstellungen ──────────────────────────────────── */

.swatch {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  border: 3px solid var(--color-border-strong);
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.swatch[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.swatch__in { position: absolute; inset: 4px; border-radius: 6px; }

/* ── Wortarten färben (Montessori / Fitzgerald) ───────────────────────────
   Lars 2026-07-28. Farben sind Schriftfarben, nicht Flächen — der Buchtext
   soll Text bleiben. Alle Töne sind gegen den weißen UND den cremefarbenen
   Lesegrund gerechnet (WCAG AA, mindestens 4,5:1); das Montessori-Orange
   musste dafür von #e65100 auf #bf360c nachdunkeln (3,8:1 → 5,6:1).
   Wortart-Kürzel siehe js/wordtypes.js. */

html[data-wordtypes="montessori"] .reader__text .wt--n,
html[data-wordtypes="montessori"] .booktext .wt--n { color: #1a1a1a; }
html[data-wordtypes="montessori"] .reader__text .wt--v,
html[data-wordtypes="montessori"] .booktext .wt--v { color: #c62828; }
html[data-wordtypes="montessori"] .reader__text .wt--a,
html[data-wordtypes="montessori"] .booktext .wt--a { color: #1565c0; }
html[data-wordtypes="montessori"] .reader__text .wt--d,
html[data-wordtypes="montessori"] .booktext .wt--d { color: #bf360c; }
html[data-wordtypes="montessori"] .reader__text .wt--p,
html[data-wordtypes="montessori"] .booktext .wt--p { color: #6a1b9a; }
html[data-wordtypes="montessori"] .reader__text .wt--e,
html[data-wordtypes="montessori"] .booktext .wt--e { color: #2e7d32; }
html[data-wordtypes="montessori"] .reader__text .wt--r,
html[data-wordtypes="montessori"] .booktext .wt--r { color: #00695c; }
html[data-wordtypes="montessori"] .reader__text .wt--k,
html[data-wordtypes="montessori"] .booktext .wt--k { color: #5d4037; }
html[data-wordtypes="montessori"] .reader__text .wt--z,
html[data-wordtypes="montessori"] .booktext .wt--z { color: #37474f; }
html[data-wordtypes="montessori"] .reader__text .wt--i,
html[data-wordtypes="montessori"] .booktext .wt--i,
html[data-wordtypes="montessori"] .reader__text .wt--s,
html[data-wordtypes="montessori"] .booktext .wt--s { color: #455a64; }

html[data-wordtypes="fitzgerald"] .reader__text .wt--n,
html[data-wordtypes="fitzgerald"] .booktext .wt--n { color: #9a5a0f; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--v,
html[data-wordtypes="fitzgerald"] .booktext .wt--v { color: #0f6b50; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--a,
html[data-wordtypes="fitzgerald"] .booktext .wt--a { color: #3048b0; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--d,
html[data-wordtypes="fitzgerald"] .booktext .wt--d { color: #2f6ea8; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--p,
html[data-wordtypes="fitzgerald"] .booktext .wt--p { color: #8a6a04; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--e,
html[data-wordtypes="fitzgerald"] .booktext .wt--e { color: #0a5f66; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--r,
html[data-wordtypes="fitzgerald"] .booktext .wt--r { color: #7a5b3c; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--k,
html[data-wordtypes="fitzgerald"] .booktext .wt--k { color: #7a5b3c; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--z,
html[data-wordtypes="fitzgerald"] .booktext .wt--z { color: #5b6770; }
html[data-wordtypes="fitzgerald"] .reader__text .wt--i,
html[data-wordtypes="fitzgerald"] .booktext .wt--i,
html[data-wordtypes="fitzgerald"] .reader__text .wt--s,
html[data-wordtypes="fitzgerald"] .booktext .wt--s { color: #5f6a72; }

/* Dunkel und Starker Kontrast: helle Töne auf dunklem Grund (>= 8:1). */
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--n,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--n,
html[data-contrast="high"][data-wordtypes] .reader__text .wt--n,
html[data-contrast="high"][data-wordtypes] .booktext .wt--n { color: #e8eaed; }
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--v,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--v,
html[data-contrast="high"][data-wordtypes] .reader__text .wt--v,
html[data-contrast="high"][data-wordtypes] .booktext .wt--v { color: #ff8a8a; }
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--a,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--a,
html[data-contrast="high"][data-wordtypes] .reader__text .wt--a,
html[data-contrast="high"][data-wordtypes] .booktext .wt--a { color: #7fa8ff; }
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--d,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--d,
html[data-contrast="high"][data-wordtypes] .reader__text .wt--d,
html[data-contrast="high"][data-wordtypes] .booktext .wt--d { color: #ffb066; }
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--p,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--p,
html[data-contrast="high"][data-wordtypes] .reader__text .wt--p,
html[data-contrast="high"][data-wordtypes] .booktext .wt--p { color: #c9a3ff; }
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--e,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--e,
html[data-contrast="high"][data-wordtypes] .reader__text .wt--e,
html[data-contrast="high"][data-wordtypes] .booktext .wt--e { color: #7fd1a8; }
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--r,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--r,
html[data-contrast="high"][data-wordtypes] .reader__text .wt--r,
html[data-contrast="high"][data-wordtypes] .booktext .wt--r { color: #66d9d0; }
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--k,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--k,
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--z,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--z,
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--i,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--i,
html[data-contrast="dark"][data-wordtypes] .reader__text .wt--s,
html[data-contrast="dark"][data-wordtypes] .booktext .wt--s,
html[data-contrast="high"][data-wordtypes] .reader__text .wt--s,
html[data-contrast="high"][data-wordtypes] .booktext .wt--s { color: #cfd8dc; }

/* ── Wortgestalt + Wortarten: FLAECHE statt Schrift (Lars 2026-07-28) ─────
   „Das mit Montessori oder Fitzgerald soll auch bei Wortformen gehen. Dort
   Hintergrund des Wortes." — Die Kaestchen selbst bekommen die Wortartfarbe
   als zarte Flaeche; die Schrift bleibt dunkel (oder traegt die Silbenfarbe,
   die weiter unten steht und damit gewinnt). Die Toene sind absichtlich hell
   (rund 12 % Deckung): Der Buchstabe muss lesbar bleiben, die Farbe ordnet
   nur ein. */
html[data-wordtypes="montessori"] .wt--n .bf { background: #ededed; }
html[data-wordtypes="montessori"] .wt--v .bf { background: #fbe4e4; }
html[data-wordtypes="montessori"] .wt--a .bf { background: #e3edfa; }
html[data-wordtypes="montessori"] .wt--d .bf { background: #fae5dc; }
html[data-wordtypes="montessori"] .wt--p .bf { background: #f0e4f7; }
html[data-wordtypes="montessori"] .wt--e .bf { background: #e3f2e4; }
html[data-wordtypes="montessori"] .wt--r .bf { background: #ddf0ed; }
html[data-wordtypes="montessori"] .wt--k .bf { background: #efe7e4; }
html[data-wordtypes="montessori"] .wt--z .bf,
html[data-wordtypes="montessori"] .wt--i .bf,
html[data-wordtypes="montessori"] .wt--s .bf { background: #e8ecee; }

html[data-wordtypes="fitzgerald"] .wt--n .bf { background: #f7ead9; }
html[data-wordtypes="fitzgerald"] .wt--v .bf { background: #dcf0e8; }
html[data-wordtypes="fitzgerald"] .wt--a .bf { background: #e2e7f7; }
html[data-wordtypes="fitzgerald"] .wt--d .bf { background: #e2edf7; }
html[data-wordtypes="fitzgerald"] .wt--p .bf { background: #f5eed6; }
html[data-wordtypes="fitzgerald"] .wt--e .bf { background: #dcedef; }
html[data-wordtypes="fitzgerald"] .wt--r .bf,
html[data-wordtypes="fitzgerald"] .wt--k .bf { background: #efe8e0; }
html[data-wordtypes="fitzgerald"] .wt--z .bf,
html[data-wordtypes="fitzgerald"] .wt--i .bf,
html[data-wordtypes="fitzgerald"] .wt--s .bf { background: #e9ecee; }

/* Ohne Wortgestalt faerbt die Wortart die SCHRIFT (Regeln weiter oben).
   MIT Wortgestalt traegt die Flaeche die Farbe — die Schrift bleibt dann
   dunkel, sonst stuenden farbige Buchstaben auf farbigem Grund. */
html[data-wordtypes] .tts-word.wt:has(.bf) { color: var(--book-fg); }

/* Dunkel/Starker Kontrast: dunkle, gesaettigte Flaechen statt heller. */
html[data-contrast="dark"][data-wordtypes] .wt--v .bf,
html[data-contrast="high"][data-wordtypes] .wt--v .bf { background: #4a1f1f; }
html[data-contrast="dark"][data-wordtypes] .wt--a .bf,
html[data-contrast="high"][data-wordtypes] .wt--a .bf { background: #1c2b45; }
html[data-contrast="dark"][data-wordtypes] .wt--d .bf,
html[data-contrast="high"][data-wordtypes] .wt--d .bf { background: #45301c; }
html[data-contrast="dark"][data-wordtypes] .wt--p .bf,
html[data-contrast="high"][data-wordtypes] .wt--p .bf { background: #33244a; }
html[data-contrast="dark"][data-wordtypes] .wt--e .bf,
html[data-contrast="high"][data-wordtypes] .wt--e .bf { background: #1d3a24; }
html[data-contrast="dark"][data-wordtypes] .wt--r .bf,
html[data-contrast="high"][data-wordtypes] .wt--r .bf { background: #123833; }
html[data-contrast="dark"][data-wordtypes] .wt--n .bf,
html[data-contrast="high"][data-wordtypes] .wt--n .bf { background: #2a2a2a; }
html[data-contrast="dark"][data-wordtypes] .wt--k .bf,
html[data-contrast="dark"][data-wordtypes] .wt--z .bf,
html[data-contrast="dark"][data-wordtypes] .wt--i .bf,
html[data-contrast="dark"][data-wordtypes] .wt--s .bf,
html[data-contrast="high"][data-wordtypes] .wt--s .bf { background: #2c3438; }