/* ==========================================================================
   BookTo — Lesen (Reader)

   NUR der Lesebildschirm. Was frueher hier mitwohnte, steht jetzt dort,
   wo es hingehoert:
     Dialoge, Schaltflaechen, Verweil-Ring/-Flaeche   → base.css
     Lesehilfen, Silbenfarben, Seitenuebergaenge      → reading.css
     Taster-Pill, Statuszeile, Legende                → lock.css
     Startseite / Bibliothek / Studio / Einstellungen → home.css,
                                                        studio.css,
                                                        settings.css

   Das Raster (Handoff, Bildschirm 3): 10 Spalten x 6 Reihen, gap 8px,
   padding 8px, border-box — sonst waere der Rahmen 1040 x 784 statt
   1024 x 768.

     R1     [ X ]  [ Seite 4 von 10 + Seitenpunkte ]  [ Aa ]
     R2-R5  [ Bild + Text                        ]  [ hoch ]
                                                    [ runter ]
     R6     [ Zurueck 3fr ] [ Vorlesen 4fr ] [ Weiter 3fr ]
     unten  Fortschritt, 8 px
   ========================================================================== */

.reader {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 8px;
  /* Der Reader haengt am Ansichtsfenster, nicht an `#app` — die
     Sicherheitsraender aus base.css erreichen ihn also nicht. Ohne diesen
     Zuschlag lag die Blaetterleiste auf dem iPhone unter dem Home-Anzeiger
     und im Querformat der Schliessen-Knopf unter der Kerbe. */
  padding:
    calc(8px + env(safe-area-inset-top, 0px))
    calc(8px + env(safe-area-inset-right, 0px))
    calc(8px + env(safe-area-inset-bottom, 0px))
    calc(8px + env(safe-area-inset-left, 0px));
  /* Der Lesegrund liegt auf der Buchseite, nicht auf der ganzen Fläche —
     sonst stünde im Dunkelmodus die helle Beschriftung der Blätterleiste
     auf weißem Grund (gemessen 1,0:1). Siehe reading.css. */
  background: var(--color-bg);
  z-index: var(--z-overlay);
  overflow: hidden;
}

/* ── Kopf — Reihe 1, Scan-Gruppe „Kopf" ───────────────────────────────────
   Eigenes Teilraster mit denselben zehn Spaltenbreiten, damit „Schliessen"
   genau eine Rasterzelle belegt und „Aa" auf den Spalten 9 und 10 sitzt. */
.reader__top {
  grid-column: 1 / 11;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.reader__close {
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
}
.reader__close svg { width: 40px; height: 40px; }

.reader__aa {
  grid-column: 9 / 11;
  width: 100%;
  height: 100%;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.5rem;
}
.reader__aa svg { width: 32px; height: 32px; }

/* Kopfmitte: Statuszeile der Taster-Steuerung (nur wenn sie an ist) und
   darunter Seitenzahl und Seitenpunkte. */
.reader__head {
  grid-column: 2 / 9;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Knapp: Statuszeile und Punktereihe teilen sich eine Rasterreihe
     (rund 118 px bei 1024 x 768). */
  gap: var(--space-1);
}
.reader__scanbar { justify-content: flex-start; }

.reader__pages {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.reader__count {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.3125rem;
  color: var(--color-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Seitenpunkte statt „3 / 10" — antippbar, 64 px, nie schmaler.
   Passen sie einmal nicht (sehr schmale Geraete), wird die Reihe
   geschoben statt umgebrochen; die aktuelle Seite wird eingerueckt. */
.reader__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Platz fuer den Fokusring (3 px + 3 px Abstand), sonst schneidet ihn
     die scrollende Reihe ab. */
  padding: 6px 4px;
}
.reader__dots::-webkit-scrollbar { width: 0; height: 0; display: none; }

.reader__dot {
  flex: 0 0 var(--target-min);
  width: var(--target-min);
  height: var(--target-min);
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding: 0;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-hairline);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.reader__dot:hover { background: var(--color-primary-bg); }

/* Aktuelle Seite: Fuellung UND kraeftiger Rand — Farbe allein traegt in
   den Kontrastmodi zu wenig. */
.reader__dot[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 3px solid var(--color-primary-deep);
}
.reader__dot[aria-current="page"]:hover { background: var(--color-primary); }

/* „…" schliesst die Reihe ab und springt zum naechsten Seitenblock. */
.reader__dot--more { letter-spacing: .08em; }

/* ── Lesefläche — Reihen 2 bis 5, Scan-Gruppe „Lesefläche" ────────────────
   Die Gruppe umfasst Bild, Text und die beiden Bildlauf-Tasten. Damit sie
   ein gemeinsamer Rahmen umschliessen kann, ist sie ein eigener Kasten mit
   demselben Spaltenraster wie der Bildschirm. */
.reader__read {
  grid-column: 1 / 11;
  grid-row: 2 / 6;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}

/* Die Seite selbst scrollt NICHT. Das Bild steht fest, darunter läuft der
   Textkasten. Bei Unterstützter Kommunikation und beim Lesenlernen trägt
   das Bild die Bedeutung mit — wenn es beim Vorlesen nach oben wegwandert,
   verliert man den Anker, an dem das Verstehen hängt. */
.reader__page {
  /* Bis Spalte 10: Die Blaetter-Tasten rechts brauchen nur EINE Spalte statt
     zwei (Lars, 02.08.2026). Das sind rund 10 % mehr Breite fuer die Buchseite;
     die Taste bleibt bei 1400 px Fensterbreite 132 px breit - weit ueber den
     44 px aus WCAG 2.5.5. */
  grid-column: 1 / 10;
  grid-row: 1 / 5;
  display: grid;
  /* `minmax(0, auto)` statt `auto` fuer die Bildreihe: Bei sehr grosser
     Schrift auf einem flachen Bildschirm (22 px Grundschrift, 667 x 375)
     stand hier sonst mehr Inhalt, als die Seite hoch war, und `overflow:
     hidden` schnitt ihn unten ab. Jetzt gibt das Bild nach — es ist
     `object-fit: cover`, verliert also nur Rand, waehrend Abgeschnittenes
     ganz weg war.

     Und der Textkasten bekommt einen Boden. Ohne ihn nahm das Bild auf
     667 x 375 mit der groessten Schrift die ganze Seite, der Text stand
     0 px hoch da — ein Lesebildschirm ohne Text. */
  grid-template-rows: minmax(0, auto) minmax(4.5rem, 1fr);
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  min-height: 0;
  overflow: hidden;
}

/* ── Titelseite ───────────────────────────────────────────────────────────
   Die Ansicht vor Seite 1: Umschlag, Titel, wer es gemacht hat, wie lang
   es ist. Sie beantwortet, was man vor dem Lesen wissen will, und macht
   sichtbar, dass hier ein Buch anfängt.

   Umgeschaltet wird über `data-view` am Reader — Titelseite und Buchseite
   liegen im selben Kasten, damit die Verweil-Ziele beim Wechsel nicht neu
   angemeldet werden müssen. */

.reader__cover { display: none; }

.reader[data-view="title"] .reader__cover {
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  justify-items: center;
  align-content: center;
  gap: var(--space-3);
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-3) var(--space-4);
}
.reader[data-view="title"] .reader__imgwrap,
.reader[data-view="title"] .reader__textbox { display: none; }

/* ── Schlussseite ───────────────────────────────────────────────────────
   Dieselbe Umschaltung wie beim Umschlag. Zwei grosse Ziele, sonst nichts —
   wer hier ankommt, hat das Buch durch und soll nicht suchen muessen. */

.reader__ende { display: none; }

/* Die Seite ist ein Raster mit `justify-items: center` und zwei Reihen fuer
   Bild und Text. Auf der Schlussseite sind beide leer — ohne diese Regel
   schrumpft die Spalte auf die Textbreite und die Knoepfe stehen als
   schmale Saeule in der Mitte (gemessen: 170 px statt voller Breite). */
.reader[data-view="ende"] .reader__page {
  grid-template-rows: 1fr;
  justify-items: stretch;
}

.reader[data-view="ende"] .reader__ende {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-4);
  text-align: center;
}
.reader[data-view="ende"] .reader__coverimg,
.reader[data-view="ende"] .reader__cover,
.reader[data-view="ende"] .reader__imgwrap,
.reader[data-view="ende"] .reader__textbox { display: none; }

.reader__endehint {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
}

.reader__endeacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 26rem;
}

/* Grosse Ziele: Diese Knoepfe muessen mit Blick und Taster sicher zu treffen
   sein, nicht nur mit dem Finger. 64 px ist die Untergrenze, unter der
   Verweilsteuerung unzuverlaessig wird. */
.reader__endebtn {
  min-height: 64px;
  font-size: var(--text-lg);
  justify-content: center;
  gap: var(--space-2);
}

/* Der Umschlag steht hochkant und größer als ein Seitenbild — er ist hier
   das Hauptmotiv, nicht die Begleitung zum Text. */
.reader__coverimg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}
.reader__img--cover {
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: min(560px, 100%);
  object-fit: contain;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}
.reader__img--none {
  width: 220px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  border: 2px dashed var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary);
}
.reader__noico { width: 84px; height: 84px; }

.reader__booktitle {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vh, 2.75rem);
  line-height: 1.15;
  color: var(--book-fg, var(--color-text));
  max-width: 26em;
  margin: 0;
}
.reader__byline {
  font-size: clamp(1.0625rem, 2vh, 1.375rem);
  color: var(--color-text-secondary);
}
.reader__byline[hidden] { display: none; }
.reader__meta {
  font-family: var(--font-label);
  font-size: var(--text-min);
  letter-spacing: .02em;
  color: var(--color-text-secondary);
}

/* Ohne „Zurück" teilen sich Vorlesen und Anfangen die Reihe. „Anfangen"
   bekommt das Übergewicht — es ist das, was hier fast jeder will. */
.reader[data-view="title"] .reader__bar { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }

/* Das Buchsymbol in der Seitenreihe: gleiche Größe wie eine Seitenzahl. */
.reader__dot--title { padding: 0; }
.reader__dotico { width: 30px; height: 30px; }

.reader__textbox {
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  /* Keine sichtbare Bildlaufleiste — gerollt wird mit den großen Tasten
     rechts, die erscheinen, sobald der Text länger ist. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reader__textbox::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Ohne Bildlauf-Tasten nutzt die Lesefläche alle zehn Spalten. */
.reader:not(.has-scroll) .reader__page { grid-column: 1 / 11; }

.reader__imgwrap {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Das Seitenbild waechst mit der Seite und schrumpft mit ihr.

   Vorher standen 268 px fest, abgeloest von zwei Sprungmarken bei 640 und
   440 px Hoehe. Zwischen den Sprungmarken passte es nicht: auf einem quer
   gehaltenen Telefon blieben fuer den Text 27 px. `min()` nimmt immer den
   kleineren der beiden Werte — am Schreibtisch die 268 px aus dem Entwurf,
   auf flachen Bildschirmen den Anteil an der Hoehe. */
/* ⚠️ `contain`, NIE `cover` (Lars 2026-07-28: „Bild abgeschnitten").
   Der Kasten stand auf 520 x min(268px, 30vh) — je nach Bildschirm ein
   Seitenverhaeltnis von 1,9:1 bis 2,3:1. Die Buchbilder sind 4:3. Gemessen
   fielen dabei 42 % des Bildes weg, beim Baeren im Tier-ABC oben der Kopf.
   In einem Buch fuer Menschen, die ueber das Bild zum Text finden, ist das
   Bild kein Schmuck: was fehlt, fehlt beim Verstehen.

   `width: auto` bei fester Hoehe laesst das Bild sein eigenes Verhaeltnis
   behalten — es entsteht also auch kein Rahmen aus leerer Flaeche. Die
   Hoehenformel bleibt, damit die Seite bei grosser Schrift weiter nachgibt. */
.reader__img {
  width: auto;
  /* Deckel angehoben (Lars, 02.08.2026 - Bild groesser). Vorher 520 x 268 px:
     Auf einem 2000-px-Bildschirm stand das Bild verloren in der Flaeche,
     obwohl es bei diesen Buechern die Bedeutung mittraegt. Die vh-Anteile
     bleiben die eigentliche Grenze - auf flachen Schirmen bremsen sie wie
     bisher, damit der Text darunter nicht verdraengt wird. */
  max-width: min(760px, 100%);
  /* Der vh-Anteil ist die eigentliche Grenze, nicht der Pixelwert: Das Bild
     folgt seiner Hoehe, die Breite ergibt sich aus dem Seitenverhaeltnis.
     Von 30vh auf 46vh (Lars, 02.08.2026) - auf 1400 x 860 waechst es damit
     von 390 auf rund 530 px Breite. Der Textkasten behaelt seinen Boden von
     4.5rem, der Grenzfall 667 x 375 mit 22-px-Schrift bleibt gedeckt. */
  height: min(560px, 46vh);
  object-fit: contain;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}
.reader__img--emoji {
  width: auto;
  height: auto;
  font-size: min(34vh, 240px);
  line-height: 1;
  box-shadow: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Der Text ist immer sichtbar, nur seine Groesse ist einstellbar
   (--text-story). Linksbuendig und ohne Silbentrennung: So verlangt es die
   Leichte Sprache, und der Zeilenanfang bleibt leicht wiederzufinden.
   Farbe, Abstaende und Zeilenhoehe kommen aus reading.css. */
/* Der Textblock steht unter dem Bild, nicht neben ihm.

   Die Zeilen bleiben linksbündig und ohne Silbentrennung — nur der BLOCK
   wird mittig gesetzt. Ohne das klebte er auf breiten Bildschirmen am
   linken Rand, während das Bild in der Mitte stand: gemessen auf 1990 px
   Bildmitte 797, Textmitte 568, also 229 px auseinander. Zwei Blöcke, die
   nichts miteinander zu tun zu haben schienen.

   `margin-left/right` statt `margin-inline`: Die Kurzform kennen die
   älteren WebViews nicht, für die dieses Projekt gebaut ist. */
.reader__text {
  align-self: stretch;
  width: 100%;
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 auto;
  font-size: var(--text-story);
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
  /* Getrennt wird nicht — aber ein Wort, das in keine Zeile passt, muss
     umbrechen duerfen. Sonst laeuft es aus dem Textkasten heraus und
     `overflow: hidden` an der Seite schneidet es ab: bei groesster Schrift
     auf einem quer gehaltenen Telefon gemessen, 7 px ueber dem Rand.
     `break-word` greift nur in genau diesem Fall, nie sonst. */
  overflow-wrap: break-word;
}

/* Bildlauf-Tasten — Spalten 9 und 10, je zwei Rasterreihen hoch.
   Sichtbar nur, wenn der Text nicht ganz auf die Seite passt. */
.reader__scroll {
  /* Eine Spalte statt zwei - der Platz gehoert der Buchseite. */
  grid-column: 10;
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: var(--radius-lg);
}
.reader__scroll--up   { grid-row: 1 / 3; }
.reader__scroll--down { grid-row: 3 / 5; }
.reader__scroll svg { width: 48px; height: 48px; }
.reader__scroll[hidden] { display: none; }

/* ── Legende der Taster-Steuerung ─────────────────────────────────────────
   Liegt ueber dem unteren Rand der Lesefläche, direkt ueber der
   Blaetterleiste. Nie anklickbar — sie erklaert nur. */
.reader__legend {
  grid-column: 2 / 10;
  grid-row: 5;
  align-self: end;
  justify-self: center;
  z-index: 3;
  pointer-events: none;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-2);
  max-width: 100%;
}
.reader__legend span + span {
  border-left: 1px solid var(--color-hairline);
  padding-left: var(--space-4);
}

/* ── Blaettern — Reihe 6, Scan-Gruppe „Blättern" ──────────────────────── */
.reader__bar {
  grid-column: 1 / 11;
  grid-row: 6;
  display: grid;
  /* `minmax(0, …)` an jedem Gleis: sonst richtet sich die Spaltenbreite
     nach der laengsten Beschriftung und die Leiste laeuft bei grosser
     Schrift ueber den Rand. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 8px;
}

/* Jeder Knopf hat seine feste Spalte (Lars 2026-07-28: „Vorlesen und Weiter
   an der gleichen Stelle und Größe").

   Ohne feste Zuordnung ruecken die Knoepfe nach, sobald einer fehlt: auf der
   Titelseite gibt es kein „Zurück" und kein „Wort üben", also sass „Vorlesen"
   dort in der ERSTEN Spalte und war breiter — beim Blaettern auf Seite 1
   sprang es zurueck und wurde schmaler. Beim Vorlesen und Weiterblaettern
   sind das die beiden Knoepfe, die man blind trifft; sie duerfen sich nicht
   bewegen. Die leere Spalte auf der Titelseite ist der Preis dafuer, und er
   ist richtig herum bezahlt. */
.reader__bar > .reader__nav--prev { grid-column: 1; }
.reader__bar > .reader__play      { grid-column: 2; }
.reader__bar > .reader__nav--next { grid-column: 3; }

.reader__nav,
.reader__play {
  height: 100%;
  min-height: var(--target-primary);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
}

.reader__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 2px solid var(--color-hairline);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  transition: background var(--transition), border-color var(--transition);
}
.reader__nav:hover { background: var(--color-primary-bg); }
.reader__nav svg { width: 38px; height: 38px; }
.reader__play svg { width: 38px; height: 38px; }

/* „Zurück" verschwindet auf der Titelseite (setNavState setzt `hidden`).
   Diese Regel ist dafür nötig: `display: inline-flex` weiter oben stammt aus
   dem Stylesheet der Seite und schlägt das `display: none`, das der Browser
   für [hidden] mitbringt — ohne sie bliebe der Knopf trotz `hidden` stehen.
   Dieselbe Falle ist bei .reader__byline und .reader__scroll schon
   abgeräumt. */
.reader__nav--prev[hidden] { display: none; }

/* Der Verweilpunkt der geteilten Engine ist ausgenommen: mit `relative`
   zaehlt er im Fluss mit und schiebt die zentrierte Beschriftung zur Seite,
   sobald der Zeiger auf dem Knopf steht. */
.reader__nav > *:not(.dwell-dot) {
  position: relative;
  z-index: 1;
}

/* ⚠️ Hier standen einmal `padding-right: 84px` für einen Verweilring und
   eine Sonderregel für die mitlaufende Fläche. Beides ist weg: „Weiter"
   verhält sich jetzt wie jeder andere Knopf (Lars 2026-07-29: „Ruhiges
   Dwell wie andere Buttons auch bitte"). Siehe screens/reader.js. */

/* Am Ende des Buches: Klartext statt Deckkraft. Der Knopf bleibt lesbar,
   er sagt nur, warum es nicht weitergeht (Befund 02). */
.reader__nav[aria-disabled="true"] {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.reader__nav[aria-disabled="true"]:hover { background: var(--color-surface-alt); }

/* ── Fortschritt — 8 px am unteren Rand ───────────────────────────────── */
.reader__progress {
  position: absolute;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  height: 8px;
  background: var(--color-border);
  z-index: 2;
}
.reader__progress i {
  display: block;
  height: 100%;
  background: var(--color-primary);
  transition: width var(--transition);
}

/* ── Leseprofil-Dialog (Knopf „Aa") ───────────────────────────────────────
   Gestell und Rahmen kommen aus base.css (.modal), hier steht nur das
   Kachelraster. */
.reader-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

/* Wortarten färben — direkt im „Aa"-Overlay, nicht nur in den Einstellungen
   (Lars 2026-07-29). Drei gleich große Ziele; die Wahl wirkt sofort auf den
   Text dahinter, deshalb bleibt der Dialog offen. */
.reader-wt {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
}
.reader-wt__title {
  font-family: var(--font-label);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.reader-wt__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.reader-wt__btn {
  min-height: var(--target-primary);
  font-size: var(--text-lg);
  border-radius: 18px;
  border-color: var(--color-hairline);
  background: var(--color-surface);
}
.reader-wt__btn[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.reader-profiles .btn {
  min-height: var(--target-primary);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-color: var(--color-hairline);
  background: var(--color-surface);
  border-radius: 18px;
}
.reader-profiles .btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 3px solid var(--color-primary-deep);
}
.reader-profiles strong { font-size: 1.1875rem; font-weight: 700; }
.reader-profiles small { font-size: var(--text-min); font-weight: 400; line-height: 1.3; }

/* ── Vor der ersten Seite ─────────────────────────────────────────────────
   Zwei Fälle enden hier: das Buch gibt es nicht (mehr), oder es hat noch
   keine Seiten — so eines kann über „Einlesen" hereinkommen. Statt einer
   Titelseite, deren „Anfangen" mit „Das ist die letzte Seite." antwortet,
   steht hier ein Satz und ein Weg zurück. */
.reader__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
}
.reader__emptytitle {
  margin: 0;
  max-width: 26em;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--color-text);
}
.reader__emptytext {
  max-width: 34em;
  font-size: var(--text-lg);
  color: var(--color-text);
}
.reader__empty .btn {
  min-height: var(--target-primary);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-lg);
}

/* ── Wort üben / Wort hören ───────────────────────────────────────────────
   Der vierte Knopf in der Blätterleiste — der Weg zum einzelnen Wort für
   Augensteuerung und Taster (Wörter im Fließtext sind bewusst KEINE
   Verweil-Ziele: Lesen ist Verweilen). Erscheint nur, wenn Verweilen
   oder Taster-Steuerung an sind (screens/reader.js). */
.reader__bar.has-wordpick {
  grid-template-columns:
    minmax(0, 2.5fr) minmax(0, 2.5fr) minmax(0, 3.5fr) minmax(0, 2.5fr);
}
/* Vier Spalten — auch hier steht jeder Knopf fest. */
.reader__bar.has-wordpick > .reader__nav--prev { grid-column: 1; }
.reader__bar.has-wordpick > .reader__word      { grid-column: 2; }
.reader__bar.has-wordpick > .reader__play      { grid-column: 3; }
.reader__bar.has-wordpick > .reader__nav--next { grid-column: 4; }
.reader__word[hidden] { display: none; }
/* Titelseite: „Wort" ist versteckt, es gelten wieder zwei Spalten —
   die data-view-Regel oben hat die höhere Spezifität und greift. */

/* ── Angehörte Wörter (Einstellung helpcount) ─────────────────────────────
   Kleine Beobachtungszahl für Begleitpersonen: Seite · Buch. */
.reader__heard {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: var(--text-min);
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reader__heard[hidden] { display: none; }
.reader__heardico { width: 22px; height: 22px; flex: 0 0 auto; }

/* ── Wort-Coach: „Erst selbst versuchen" ──────────────────────────────────
   Panel unten über der Blätterleiste, an derselben Stelle wie die
   Wort-Erklärung (.explain in reading.css) — ein Ort für „mehr zu diesem
   Wort". Die Wortanzeige trägt .bookface/.booktext und sieht damit genau
   aus wie das Buch: gleiche Schrift, gleiche Farben, gleiche Abstände. */
/* Lars 2026-07-28: „vielleicht kein Popup?" — richtig, ein Overlay verdeckte
   ausgerechnet den Text, um den es geht. Die Wort-Hilfe sitzt jetzt als
   BREITE LEISTE am unteren Rand der Leseflaeche ueber die volle Breite. */
.wcoach {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  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);
}
.wcoach__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wcoach__hint {
  flex: 1;
  font-family: var(--font-label);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.wcoach__head .btn--round {
  width: var(--target-min);
  height: var(--target-min);
  flex: 0 0 auto;
}
.wcoach__word {
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: calc(var(--text-story) * 1.15);
  line-height: 1.4;
  overflow-wrap: break-word;
}
.wcoach__syl {
  display: inline-block;
  padding: 0 .05em;
  margin: 0 .07em;
  border-radius: 6px;
}
/* Laut für Laut: die Laute stehen von vornherein sichtbar getrennt — man
   soll SEHEN, aus welchen Stücken das Wort besteht, bevor der erste Ton
   kommt. Der klingende Laut bekommt dann dieselbe Marke wie eine Silbe. */
.wcoach__laut {
  display: inline-block;
  padding: .04em .16em;
  margin: 0 .1em;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--color-border);
}
/* Ein Feld ist EINE Einheit — seine Kästchen dürfen nie umbrechen. Als
   Flex-Element schrumpfte das Feld sonst mit, und „eh" stand als e ÜBER h
   (gemessen 2026-07-28). Passt das Wort nicht in eine Zeile, bricht
   stattdessen die Reihe der Felder um. */
.wcoach__laut, .wcoach__syl { flex: 0 0 auto; white-space: nowrap; }
.wcoach__nav .wcoach__word { flex-wrap: wrap; }

.wcoach__syl.is-on,
.wcoach__laut.is-on,
.wcoach__word.is-on { background: var(--book-hl); }
.wcoach__laut.is-on { box-shadow: inset 0 0 0 2px var(--color-primary); }
/* Wort davor / danach: grosse Ziele links und rechts vom Wort, damit man
   ohne Treffer auf kleine Textwoerter weiterkommt (Verweilen, Taster). */
/* Die Leiste geht über die ganze Breite, ihr INHALT aber nicht: auf einem
   breiten Bildschirm standen „Wort davor | WORT | Wort danach" sonst an den
   äußersten Rändern und die drei Knöpfe darunter über zwei Meter verteilt
   (Lars 2026-07-28: „sehr weit auseinander unten in der Reihe"). Als Satz
   liest sich die Reihe nur, wenn die Wörter beieinander stehen. */
.wcoach__nav,
.wcoach__acts {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
.wcoach__nav {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  flex-wrap: nowrap;            /* davor | WORT | danach — nie untereinander */
}
.wcoach__nav .wcoach__word {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Grosse Ziele (Lars: „deutlich groesser") — deutlich ueber dem
   Dwell-Mindestmass von 64 px. */
.wcoach__step {
  min-height: 88px;
  flex: 0 0 auto;
  padding-inline: var(--space-4);
  font-size: var(--text-lg);
}
.wcoach__step .btn__ico { width: 32px; height: 32px; }
.wcoach__step[disabled] { opacity: .35; }
.wcoach__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wcoach__acts .btn {
  min-height: var(--target-min);
  flex: 1 1 auto;
}
.wcoach__acts .btn[hidden] { display: none; }

/* ── Wörter-Dialog: ein Wort mit großen Zielen wählen ─────────────────────
   Jeder Knopf in Buchschrift und Buchfarben — das Wort sieht aus wie im
   Buch, nur größer.

   Lars 2026-07-29: „Das Overlay größer bitte. Es soll möglichst einfach
   sein." Der Dialog nimmt jetzt die verfügbare Breite (`modal__box--wide`),
   die Wörter stehen mittig und sind 88-px-Ziele statt 64 — das ist die
   Größe, die für Augensteuerung und Taster gedacht ist, und hier wird
   ausschließlich ausgewählt. */
.wpick .modal__head { justify-content: center; }
.wpick .modal__foot { justify-content: center; }
.wpick__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: var(--space-4);
}
.wpick__word {
  min-height: var(--target-primary);
  min-width: 160px;
  font-size: var(--text-2xl);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
}

/* ── Schmale und flache Geraete ───────────────────────────────────────────
   Das Raster und die Feldgroessen bleiben unveraendert; es fallen nur
   Beschriftungen weg, die anderswo noch einmal stehen. */
@media (max-width: 900px) {
  .reader__count { display: none; }
  .reader__heard { display: none; }
}

/* Unter 760 px traegt das Zehnspalten-Raster die Bedienknoepfe nicht mehr:
   eine Spalte ist dort schmaler als 64 px. Gemessen war „Buch schliessen"
   auf einem 390er iPhone 30 px breit und auf 360 px sogar 27 px — die
   Vorgabe sind 48 px zum Tippen und 64 px zum Verweilen.

   Kopfzeile und Lesefeld bekommen deshalb feste Randspalten in Zielgroesse
   und geben den Rest der Mitte. Das Sechs-Reihen-Raster des Bildschirms
   bleibt unangetastet — nur diese beiden Teilraster rechnen anders. */
@media (max-width: 760px) {
  .reader__top {
    grid-template-columns: var(--target-min) minmax(0, 1fr) auto;
  }
  .reader__close { grid-column: 1; }
  .reader__head  { grid-column: 2; }
  .reader__aa    { grid-column: 3; min-width: var(--target-min); }

  .reader__read { grid-template-columns: minmax(0, 1fr) var(--target-min); }
  .reader__page   { grid-column: 1; }
  .reader:not(.has-scroll) .reader__page { grid-column: 1 / 3; }
  .reader__scroll { grid-column: 2; }

  .reader__legend { grid-column: 1 / 11; }
}

@media (max-width: 640px) {
  .reader__nav .nav-label { display: none; }
  /* Ohne Beschriftung braucht die Leiste keine Knopf-Innenraender mehr —
     und darf sie auch nicht haben: mit der groessten Schrift stand „Weiter"
     auf einem 360er Telefon sonst ueber dem Rand. */
  .reader__nav, .reader__play {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .reader__nav svg, .reader__play svg { width: 32px; height: 32px; }
  .reader__scroll svg { width: 34px; height: 34px; }
  .reader__close svg { width: 30px; height: 30px; }
  .reader__page { padding: var(--space-2); }
  .reader__legend { display: none; }
  .wcoach { width: calc(100% - 2 * var(--space-3)); padding: var(--space-3); }
  .wcoach__word { font-size: var(--text-story); }
}

/* Flache Geraete — Telefon im Querformat.

   Sechs gleich hohe Reihen gehen nur auf, solange eine Reihe die 88 px der
   Blaetterleiste traegt; das braucht 584 px Hoehe. Auf einem 844 x 390
   liegenden iPhone blieben 56 px pro Reihe, die Knoepfe „Zurueck /
   Vorlesen / Weiter" ragten 24 px unter den Bildschirmrand und der
   Fortschrittsbalken lag darauf.

   Darum hier: Kopf und Blaetterleiste nehmen ihre eigene Hoehe, die vier
   Lesereihen teilen sich den Rest. Die Zielgroessen bleiben; das Bild wird
   kleiner, das regelt `min(268px, 30vh)` an `.reader__img` weiter oben. */
@media (max-height: 620px) {
  .reader { grid-template-rows: auto repeat(4, minmax(0, 1fr)) auto; }
}

/* Flach UND breit: Bild und Text nebeneinander.

   Untereinander bleiben auf einem quer gehaltenen Telefon rund 166 px fuer
   beide — mit der groessten Schrift reicht das fuer anderthalb Zeilen und
   ein Bild von 13 px, also fuer nichts. Quer liegt die Breite dagegen
   brach: 667 px, von denen die Seite nur einen Bruchteil nutzt.

   Also nebeneinander: links das Bild, rechts der Text. Das Bild bleibt
   sichtbar — beim Lesenlernen und in der Unterstuetzten Kommunikation
   traegt es die Bedeutung mit — und der Text bekommt volle Hoehe.
   Die Titelseite (`.reader__cover`) nimmt weiter die ganze Breite. */
@media (max-height: 620px) and (min-width: 600px) {
  .reader__page {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
  }
  .reader__cover   { grid-column: 1 / -1; grid-row: 1; }
  .reader__imgwrap { grid-column: 1; grid-row: 1; height: 100%; align-items: center; }
  .reader__img     { width: 100%; height: 100%; max-height: 100%; }
  .reader__textbox { grid-column: 2; grid-row: 1; height: 100%; }
}

/* Flach und schmal — Telefon quer, aber sehr klein. Untereinander bleibt
   es hier, nebeneinander waeren beide Spalten zu schmal. Damit das Bild
   nicht die letzte Textzeile frisst, gibt es nach: die Bildreihe darf auf
   0 schrumpfen (`.reader__page`), und das Bild geht mit. */
@media (max-height: 620px) and (max-width: 599px) {
  .reader__imgwrap { min-height: 0; overflow: hidden; }
  .reader__img { max-height: 100%; }
}

/* Wort-Leiste offen: der Buchtext bekommt unten so viel Platz, wie die
   Leiste wirklich braucht (screens/reader.js misst und setzt --wcoach-h).
   Ohne das verdeckte die Leiste den Text, den man gerade uebt. */
.reader__page.has-wcoach .reader__text {
  padding-bottom: calc(var(--wcoach-h, 200px) + var(--space-4));
}

/* Nachbarwoerter auf den Navigationsknoepfen: sie tragen .bookface/.booktext
   und damit dieselbe Schrift, dieselben Farben und dieselben Lesehilfen wie
   der Buchtext (Lars 2026-07-28). Der Knopf bleibt dabei ein Knopf — nur das
   Wort darin sieht aus wie im Buch. */
.wcoach__peek {
  background: none;
  font-size: var(--text-story);
  line-height: 1.3;
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wcoach__peek:empty { display: none; }
.wcoach__step { gap: var(--space-2); }

/* ── Wortwechsel: die Reihe gleitet weiter ────────────────────────────────
   Wer „Wort danach" waehlt, sieht die drei Woerter gemeinsam nach LINKS
   hinausgleiten und die neuen von RECHTS hereinkommen (und umgekehrt) — die
   Richtung entspricht der Leserichtung im Satz.

   Lars 2026-07-29: „alle 3 Wörter gleichmäßig rein- und rausfliegen …
   synchron und fließen." Deshalb:
   · EIN Zustand am Kasten steuert alle drei — kein Element hat eine eigene
     Dauer oder Verzoegerung mehr (vorher .48 s / .58 s / +.07 s Versatz).
   · Die Strecke ist ein fester Pixelwert. Bei Prozentwerten legt jedes Wort
     je nach Breite eine andere Strecke zurueck, und die Reihe zerfaellt in
     drei Einzelbewegungen.
   · Hinaus beschleunigend, herein abbremsend — zusammen liest sich das als
     EINE durchgehende Bewegung.
   Tempo: 2 x .3 s. Vorher war es mit .34 s vorbei, bevor der Blick nachkam
   (Lars 2026-07-28: „zu schnell"). */
.wcoach {
  --wc-flug: .3s;
  --wc-flug-weg: 72px;
}
#wcword,
.wcoach__peek {
  transition: transform var(--wc-flug) cubic-bezier(0, 0, .2, 1),
              opacity   var(--wc-flug) linear;
}
/* Hinaus — beschleunigend. */
.wcoach.wc-raus-next #wcword,
.wcoach.wc-raus-next .wcoach__peek,
.wcoach.wc-raus-prev #wcword,
.wcoach.wc-raus-prev .wcoach__peek {
  opacity: 0;
  transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}
.wcoach.wc-raus-next #wcword,
.wcoach.wc-raus-next .wcoach__peek { transform: translateX(calc(var(--wc-flug-weg) * -1)); }
.wcoach.wc-raus-prev #wcword,
.wcoach.wc-raus-prev .wcoach__peek { transform: translateX(var(--wc-flug-weg)); }

/* Startseite des Hereingleitens (wird ohne Uebergang gesetzt). */
.wcoach.wc-rein-next #wcword,
.wcoach.wc-rein-next .wcoach__peek { transform: translateX(var(--wc-flug-weg)); opacity: 0; }
.wcoach.wc-rein-prev #wcword,
.wcoach.wc-rein-prev .wcoach__peek { transform: translateX(calc(var(--wc-flug-weg) * -1)); opacity: 0; }
.wcoach.wc-sofort #wcword,
.wcoach.wc-sofort .wcoach__peek { transition: none; }

/* Das Nachbarwort gleitet in seinem Knopf, nicht darueber hinaus. */
.wcoach__step { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #wcword, .wcoach__peek { transition: none; }
}

/* ── Fehlersuche: welche Stimme hat gesprochen? ─────────────────────────
   Nur sichtbar, wenn Einstellungen > Vorlesen > „Stimme anzeigen" an ist.
   Bewusst schmal und unaufgeregt — ein Werkzeug, kein Ausstattungsmerkmal.
   Rot, sobald die Stimme nicht zur Sprache des Buches passt. */
/* NICHT ins Reader-Raster legen: Ohne `grid-row` landet ein Kind in einer
   impliziten siebten Reihe, und `.reader` hat `overflow: hidden` — die
   Zeile war dann da, aber abgeschnitten (erster Versuch, 02.08.2026).
   Sie liegt deshalb fest oben ueber allem. */
.reader__voicedebug {
  position: fixed;
  top: calc(4px + env(safe-area-inset-top, 0px));
  left: calc(4px + env(safe-area-inset-left, 0px));
  right: calc(4px + env(safe-area-inset-right, 0px));
  z-index: 99999;
  background: #1d1d1f;
  color: #fff;
  border: 2px solid #fff;
  pointer-events: none;
  font-family: var(--font-label, monospace);
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  word-break: break-word;
}
.reader__voicedebug.is-falsch {
  background: #7a1020;
  color: #fff;
  font-weight: 600;
}