/* ==========================================================================
   BookTo — Einstellungen (Design-Handoff Juli 2026, Bildschirm 4)

   Vier Reiter, zweispaltig: links die Fragen, rechts dauerhaft die
   Musterseite. Kein Reiter scrollt — der Inhalt wird gewechselt, nicht
   gerollt.

   Grundregeln, die hier ueberall gelten:
     · Trefferflaeche 64 px, Hauptaktionen 88 px — nie kleiner.
     · Auswahl traegt Farbe UND Form: Fuellung plus 3 px Rand.
       Farbe allein waere in „Hoher Kontrast" und bei Farbfehlsichtigkeit
       nicht verlaesslich.
     · Kein Zustand ueber Deckkraft, nichts unter 16 px.
     · Fokus und Scan-Rahmen kommen aus --color-focus (base.css).
   ========================================================================== */

/* ── Ein Ton fuer „ausgewaehlt" ────────────────────────────────────────────
   Der Entwurf nennt Fuellung #4b698c und Rand #1a3a6a — das sind
   --color-primary und --color-primary-deep. In „Dunkel" und „Hoher
   Kontrast" ist --color-primary aber ein HELLES Blau; weisse Schrift
   darauf waere unlesbar. Dort werden Fuellung und Rand getauscht: die
   Fuellung wird dunkel, der Rand hell. Form und Bedeutung bleiben gleich. */
.setscreen,
.modal {
  --sel-bg: var(--color-primary);
  --sel-bd: var(--color-primary-deep);
  --sel-fg: var(--color-text-inverse);
  --tile-radius: 18px;
}
html[data-contrast="dark"] .setscreen,  html[data-contrast="dark"] .modal,
html[data-contrast="high"] .setscreen,  html[data-contrast="high"] .modal {
  --sel-bg: var(--color-primary-deep);
  --sel-bd: var(--color-primary);
  --sel-fg: #ffffff;
}

.setscreen { min-height: 0; }

/* ── Kopf: Zurueck, Titel, vier Reiter ─────────────────────────────────── */

.setbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 96px;
  padding: var(--space-2) var(--space-5);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: .5px solid var(--color-hairline);
  flex-wrap: wrap;
}
.setbar__back {
  width: var(--target-primary);
  height: var(--target-primary);
  min-width: var(--target-primary);
  min-height: var(--target-primary);
  flex: 0 0 auto;
}
.setbar__back svg { width: 34px; height: 34px; }

.setbar__title {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: .01em;
  flex: 1 1 auto;
  min-width: 0;
}

.settabs { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.settab {
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: 0 var(--space-5);
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: .01em;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}
.settab:hover { background: var(--color-primary-bg); }
.settab[aria-selected="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border: 3px solid var(--sel-bd);
}

/* ── Koerper: links die Fragen, rechts die Musterseite ─────────────────── */

.setbody {
  flex: 1;
  min-height: 0;
  display: grid;
  /* `minmax(0, 1fr)`, nicht `1fr`: sonst kann die Fragenspalte nicht
     schmaler werden als ihr laengster Inhalt und schiebt die Musterseite
     hinaus. Dieselbe Regel gilt in dieser App fuer jedes `fr`-Gleis, das
     Text traegt. */
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--space-5);
  padding: var(--space-5);
  overflow: hidden;
  align-items: stretch;
}

/* base.css kippt .two-col schon unter 1080 px auf eine Spalte. Der Entwurf
   ist aber fuer 1024 x 768 gezeichnet — genau die Groesse, in der die
   Musterseite daneben stehen MUSS. Erst darunter wird wirklich einspaltig. */
@media (min-width: 900px) {
  .setbody.two-col { grid-template-columns: minmax(0, 1fr) 400px !important; }
}
@media (max-width: 899px) {
  .setbody { overflow-y: auto; }
  .sample { order: -1; }
}

/* Die Spalte darf rollen, wenn der Bildschirm zu flach ist.

   Vorher hielt „kein Reiter scrollt" ausnahmslos — und kostete Inhalt: Auf
   1280 × 800 stand die mittlere Karte des Reiters „Lesen" 52 px hoch vor
   276 px Inhalt, auf dem Zielgerät 1024 × 768 sogar 48 px vor 328 px. „Lese-
   farben", „Mitmarkieren" und die halbe Textgrößen-Reihe waren damit auf
   JEDEM Gerät unerreichbar, nicht nur auf dem Telefon. Ein Reiter, den man
   nicht zu Ende sehen kann, ist schlimmer als einer, den man rollt.

   Gerollt wird nur, wenn es sein muss: die Karten unten behalten ihre
   natürliche Höhe (`flex-shrink: 0`) und verteilen überschüssigen Platz wie
   bisher. Passt alles, sieht der Reiter aus wie im Entwurf. */
.setcol {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Karten ────────────────────────────────────────────────────────────── */

/* Keine Karte schrumpft. Fehlt Platz, rollt die Spalte — vorher fingen die
   Karten den Mangel auf und fielen auf 52 px zusammen, wobei ihr Inhalt
   ueber die Nachbarkarte lief. */
.setcard {
  background: var(--color-surface);
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
}
/* `flex: 1 0 auto` statt `flex: 1`: wachsen ja, schrumpfen nein.

   Mit dem schrumpfenden `flex: 1` fing genau diese Karte den ganzen
   Platzmangel der Spalte allein auf — die Nachbarkarten haben feste Höhen —
   und fiel auf 48 px zusammen. `overflow: hidden` schnitt den Rest lautlos
   ab, samt der Reihe „Lesefarben": deren Zeile ist ein Spalten-Flexkasten
   mit Umbruch, und ohne Höhe bricht der zur SEITE um. Die Farbfelder standen
   auf einem 768er iPad bei x = 1021 — unsichtbar und nicht anzutippen. */
.setcard--rows,
.setcard--panel {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  min-height: 0;
}
.setcard--areas { flex: 0 0 auto; padding: var(--space-3) var(--space-4); }
.setcard--foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.setcard__title {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
}
.setcard__sub {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.35;
  margin-top: var(--space-1);
}

/* ── Leseprofil: 2 x 2 Kacheln ─────────────────────────────────────────── */

/* Zwei Kacheln nebeneinander, solange sie hineinpassen.

   Mit festem `1fr 1fr` bestimmt der laengste Begriff die Spaltenbreite —
   ein `1fr`-Gleis kann nicht schmaler werden als sein Inhalt. Auf einem
   360er Telefon mit der groessten Schrift stand die rechte Kachel dadurch
   79 px ueber dem Bildschirmrand. `auto-fit` mit einer Mindestbreite legt
   die Entscheidung dahin, wo sie hingehoert: an den vorhandenen Platz. */
.profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.profile {
  min-height: 88px;
  min-width: 0;
  overflow-wrap: break-word;
  border: 2px solid var(--color-border);
  border-radius: var(--tile-radius);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  transition: background var(--transition), border-color var(--transition);
}
.profile:hover { background: var(--color-primary-bg); }
.profile__t { font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }
.profile__d {
  font-size: var(--text-min);
  color: var(--color-text-secondary);
  line-height: 1.25;
}
.profile[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border: 3px solid var(--sel-bd);
}
.profile[aria-pressed="true"] .profile__d { color: var(--sel-fg); }

/* ── Eine Zeile = eine Frage ───────────────────────────────────────────── */

.setline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 76px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-hairline);
  flex-wrap: wrap;
}
.setline:last-child { border-bottom: 0; }
.setline__label {
  flex: 1 1 170px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}
.setline__hint {
  font-size: var(--text-min);
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.25;
}
/* Beschriftung ueber den Schaltflaechen — fuer Fragen mit vielen
   Antworten, die sonst neben der Beschriftung umbrechen wuerden. */
.setline--stack { flex-direction: column; align-items: stretch; }
.setline--stack .setline__label { flex: 0 0 auto; min-width: 0; }

.setopts { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.setopt {
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-min);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  transition: background var(--transition), border-color var(--transition);
}
.setopt:hover { background: var(--color-primary-bg); }
.setopt svg { width: 26px; height: 26px; }
.setopt[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border: 3px solid var(--sel-bd);
}
/* Gesperrt heisst hier „am Ende der Liste" — Kontrast bleibt, keine
   Halbdurchsichtigkeit (Befund 02). */
.setopt[aria-disabled="true"] {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.setopt[aria-disabled="true"]:hover { background: var(--color-surface-alt); }

/* ── Farbfelder 64 x 64, 8 px Innenabstand ─────────────────────────────── */

.setswatch {
  width: var(--target-min);
  height: var(--target-min);
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding: var(--space-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
}
.setswatch__in {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
/* Der Haken traegt die Auswahl mit: bei einer weissen Flaeche sagt die
   Farbe allein gar nichts.

   Fuellung und Schrift muessen dasselbe Paar benutzen wie jeder
   ausgewaehlte Knopf: --sel-bg mit --sel-fg. Vorher stand ein festes
   #ffffff auf --sel-bd — und --sel-bd wird in „Dunkel" und „Hoher
   Kontrast" zum HELLEN Blau. Gemessen 2,48:1, ausgerechnet dort, wo
   jemand das Schema wegen seiner Augen gewaehlt hat. */
.setswatch__ok {
  display: none;
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sel-bg);
  color: var(--sel-fg);
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sel-bd);
}
.setswatch__ico { width: 16px; height: 16px; }
.setswatch[aria-pressed="true"] {
  border: 3px solid var(--sel-bd);
  padding: 7px;
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.setswatch[aria-pressed="true"] .setswatch__ok { display: flex; }

/* ── Lesefarben als Paar ────────────────────────────────────────────────
   Ein Feld zeigt beides zugleich: den Lesegrund als Flaeche, die
   Schriftfarbe als „Aa" darauf. Grund und Schrift kommen als Inline-Stil
   aus COL_PAIRS (settings.js) — es sind BUCHfarben, keine App-Farben, sie
   duerfen sich mit dem Farbschema also gerade NICHT aendern. Genau so
   sieht die Buchseite spaeter aus.

   Die Auswahl traegt Farbe UND Form: 3 px Rand plus Haken. */
.setpair {
  flex: 1 1 72px;
  min-width: 72px;
  height: var(--target-min);
  min-height: var(--target-min);
  padding: 0 var(--space-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
}
.setpair__ab {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
/* Gleiche Marke wie beim Farbfeld — nur oben rechts, damit sie das „Aa"
   nicht verdeckt. */
.setpair__ok {
  display: none;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sel-bg);
  color: var(--sel-fg);
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sel-bd);
}
.setpair[aria-pressed="true"] {
  border: 3px solid var(--sel-bd);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.setpair[aria-pressed="true"] .setpair__ok { display: flex; }

/* ── Bereiche im Reiter „Steuerung" und Themen im Reiter „Rechtliches" ─── */

.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}
.area {
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition), border-color var(--transition);
}
.area:hover { background: var(--color-primary-bg); }
.area[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border: 3px solid var(--sel-bd);
}

/* ── Stufen des Zahlenschlosses ────────────────────────────────────────── */

.steps { display: grid; gap: var(--space-3); }
.step {
  min-height: 88px;
  border: 2px solid var(--color-border);
  border-radius: var(--tile-radius);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition), border-color var(--transition);
}
.step:hover { background: var(--color-primary-bg); }
.step__t { font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }
.step__d {
  font-size: var(--text-min);
  color: var(--color-text-secondary);
  line-height: 1.3;
}
.step[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border: 3px solid var(--sel-bd);
}
.step[aria-pressed="true"] .step__d { color: var(--sel-fg); }

/* ── Erklaerungen ──────────────────────────────────────────────────────── */

.setnote {
  font-size: var(--text-min);
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.setnote strong { color: var(--color-text); }
.setnote--warn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-weight: 600;
}
.setnote--warn svg { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 1px; }

/* ── Stimmenwahl ───────────────────────────────────────────────────────── */

.voicerow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.voicerow__name {
  flex: 1 1 180px;
  min-width: 180px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
}

/* ── Sprache der App: Suchfeld plus grosse Kacheln ─────────────────────────
   101 Sprachen als Auswahlliste waeren mit Augensteuerung nicht zu
   treffen. Darum Kacheln zu zwoelf, dazu ein Suchfeld fuer alle, die
   tippen koennen. */

.langsearch { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.langsearch__in {
  flex: 1;
  min-height: var(--target-min);
  font-size: 1.25rem;
  border-radius: var(--radius-md);
}

/* Wie bei `.profiles`: nicht drei Spalten erzwingen, sondern so viele, wie
   in 64 px Zielgroesse nebeneinander passen. */
.langgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); }
.lang {
  min-height: var(--target-min);
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition), border-color var(--transition);
}
.lang:hover { background: var(--color-primary-bg); }
.lang__native {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.lang__code { font-size: var(--text-min); color: var(--color-text-secondary); }
.lang[aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
  border: 3px solid var(--sel-bd);
}
.lang[aria-pressed="true"] .lang__code { color: var(--sel-fg); }

.langpager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.langpager__at { font-size: var(--text-min); font-weight: 600; text-align: center; }

/* ── Rechtliches ─────────────────────────────────────────────────────────
   Impressum, Datenschutz und Barrierefreiheitserklaerung sind lang und
   duerfen nicht abgeschnitten werden. `justify-content: flex-start` statt
   `space-evenly`: Fliesstext faengt oben an, er wird nicht ueber die Hoehe
   verteilt. Gerollt wird in `.setcol` — ein zweiter Rollbereich hier
   verschluckte auf flachen Geraeten den Anfang der Erklaerung. */

.legaltext {
  justify-content: flex-start;
  gap: var(--space-3);
}
.legaltext p { font-size: 1.0625rem; line-height: 1.55; }
.legaltext .hint { font-size: var(--text-min); }
.legaltext ul { margin: 0; padding-left: var(--space-5); }
.legaltext li {
  font-size: 1.0625rem;
  line-height: 1.55;
  margin-bottom: var(--space-2);
}

/* ── Alle 14 Einzelfragen (Dialog) ─────────────────────────────────────── */

/* Gerollt wird im Dialogkoerper (`.modal__body`), nicht hier — ein
   `overflow: hidden` an dieser Stelle kappte auf flachen Geraeten die
   untere Haelfte der vierzehn Fragen, ohne Rollbalken. */
.owngrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  align-content: start;
}
@media (max-width: 899px) { .owngrid { grid-template-columns: minmax(0, 1fr); } }

/* Der gemessene Kontrast steht ueber die ganze Breite direkt unter den
   beiden Farbzeilen, auf die er sich bezieht. Im Dialog „Eigenes" duerfen
   Grund und Schrift einzeln gewaehlt werden — dann muss aber sichtbar
   sein, was dabei herauskommt. */
.owngrid .ownwarn { grid-column: 1 / -1; }
.owngrid .ownwarn .setnote { margin-bottom: 0; }

/* ── Musterseite ────────────────────────────────────────────────────────
   Dieselben Regeln wie im Buch (reading.css), nur auf .sample__text
   gemuenzt: die Probe soll nicht schoener aussehen als die echte Seite. */

.sample {
  background: var(--color-surface);
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  min-width: 0;
  /* Die Probe zeigt, was eine Einstellung bewirkt — abgeschnitten zeigt sie
     das Gegenteil. Gemessen: auf 1024 × 768 blieben von 488 px Musterseite
     343 px, auf einem 390er iPhone 42 px. Jetzt behaelt die Seite ihre Hoehe
     und die Probe rollt, wenn der Bildschirm zu flach ist. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sample__head { display: flex; align-items: center; gap: var(--space-3); }
.sample__title {
  flex: 1;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
}
.sample__speak {
  width: var(--target-min);
  height: var(--target-min);
  min-width: var(--target-min);
  min-height: var(--target-min);
  flex: 0 0 auto;
}
.sample__speak svg { width: 28px; height: 28px; }

.sample__page {
  flex: 1 0 auto;
  min-height: 0;
  border-radius: var(--tile-radius);
  padding: var(--space-4);
  background: var(--book-bg, #ffffff);
  color: var(--book-fg, #1a1a1a);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Die Musterseite zeigt, wie die echte Seite aussieht — also auch beim Bild
   `contain` wie dort (css/reader.css). Mit `cover` fielen hier 47 % weg. */
.sample__img {
  width: auto;
  max-width: 100%;
  height: 120px;
  object-fit: contain;
  /* Die Probe ist ein Spalten-Flexkasten und streckt ihre Kinder auf volle
     Breite — `width: auto` waere sonst wirkungslos und das Bild staende in
     einem leeren Rahmen statt in seinem eigenen Verhaeltnis. */
  align-self: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
/* Die Probe muss dieselbe Groesse nehmen wie die echte Seite: --text-story
   kommt aus der Einstellung „Textgroesse im Buch", die direkt daneben
   steht (js/ui.js setzt sie bei jeder Aenderung neu). Feste 24 px hiessen:
   die Einstellung tut sichtbar nichts. */
.sample__text {
  font-size: var(--text-story);
  line-height: var(--book-line, 1.5);
  letter-spacing: var(--book-letter-space, 0em);
  word-spacing: var(--book-word-space, 0em);
  hyphens: none;
  /* Wie .reader__text: getrennt wird nicht, aber ein Wort, das in keine
     Zeile passt, darf umbrechen statt aus der Probe zu laufen. */
  overflow-wrap: break-word;
  margin: 0;
}
.sample__note {
  font-size: var(--text-min);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Schriftarten im Buch — gleiche Kette wie .reader__text */
html[data-bookfont="normal"] .sample__text  { font-family: var(--font-body); }
html[data-bookfont="serif"]  .sample__text  { font-family: var(--font-headline); }
html[data-bookfont="dyslexic"] .sample__text {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Verdana', sans-serif;
  letter-spacing: max(var(--book-letter-space), .04em);
  font-weight: 500;
}
html[data-bookfont="mono"] .sample__text {
  font-family: 'DM Mono', 'Consolas', monospace;
}

/* Satz- und Wortmarkierung: ein Satz und ein Wort stehen beispielhaft
   „gerade gesprochen" da, sonst waere die Einstellung unsichtbar. */
.sample__page[data-highlight="sentence"] .tts-sentence.is-active,
.sample__page[data-highlight="both"]     .tts-sentence.is-active {
  background: var(--book-hl-s);
  box-shadow: 0 0 0 .18em var(--book-hl-s);
}
.sample__page[data-highlight="word"] .tts-word.is-active,
.sample__page[data-highlight="both"] .tts-word.is-active {
  background: var(--book-hl);
  box-shadow: 0 0 0 .1em var(--book-hl);
}
.sample__page[data-highlight="off"] .tts-word.is-active,
.sample__page[data-highlight="off"] .tts-sentence.is-active {
  background: none;
  box-shadow: none;
}

/* Wortgestalt — Kaestchen wie im Buch */
.sample__text .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;
}
html[data-contrast="dark"] .sample__text .tts-word:has(.bf),
html[data-contrast="high"] .sample__text .tts-word:has(.bf) {
  background: rgba(255,255,255,.08);
}

/* ── Ehrliche Kennzeichnung: Info-Knöpfe, Einordnungs-Badges, Erklär-Dialog
   (js/evidence.js). Farbe trägt hier NIE allein: Jedes Badge hat Rand und
   Klartext, der Text bleibt in --color-text (AAA in allen Schemata). ── */

.setline__labelrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.setcard__titlerow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.setcard__titlerow .setcard__title { margin-bottom: 0; }

/* Der Info-Knopf: rund, 64 px — dasselbe Mindestmaß wie jedes Verweil-Ziel
   im Projekt, damit auch Augensteuerung die Auskunft erreicht. */
.evinfo {
  width: var(--target-min);
  height: var(--target-min);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  position: relative;
}
.evinfo:hover,
.evinfo:focus-visible { background: var(--color-primary-bg); }
.evinfo__ico { width: 30px; height: 30px; }
html[data-contrast="dark"] .evinfo,
html[data-contrast="high"] .evinfo { color: var(--color-primary-light); }

.evbadge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: var(--font-label);
  font-size: var(--text-min);
  white-space: nowrap;
}
.evbadge--belegt      { border-color: var(--color-success); background: var(--color-success-bg); }
.evbadge--komfort     { border-color: var(--color-primary); background: var(--color-primary-bg); }
.evbadge--unbelegt    { border-color: var(--color-warning); background: var(--color-warning-bg); }
.evbadge--unerforscht { border-color: var(--color-border-strong); background: var(--color-surface-alt); }

.evd__body { display: flex; flex-direction: column; gap: var(--space-3); }
.evd__kind {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-hairline);
}
.evd__kindsub { color: var(--color-text-secondary); font-size: var(--text-base); }
.evd__p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-width: 72ch;
}
.evd__sources {
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}
.evd__sources h3 {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.evd__sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evd__sources li {
  font-size: var(--text-min);
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.evd__note {
  font-size: var(--text-min);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Startknopf des Lese-Vergleichs (Reiter „Lesen"). */
.rcstart { display: flex; justify-content: center; padding: var(--space-2) 0; }

/* ── „Was liest sich am besten?" (js/readcheck.js) ─────────────────────── */

.rc__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 72ch;
}
.rc__intro p { font-size: var(--text-base); line-height: var(--leading-normal); }
.rc__note {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* Der Lese-Durchgang: nichts als der Text, ruhig zentriert. Farben kommen
   aus .bookface/.booktext (die eigenen Lesefarben), die verglichene
   Typografie steht inline am Element. */
.rc__stage {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc__text {
  max-width: 34em;
  text-align: left;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

/* Ergebnis-Zeilen: Rang, Name, Zeit, Übernehmen. */
.rc__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}
.rcrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.rcrow--best {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}
.rcrow__rank {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--text-lg);
  min-width: 1.6em;
  text-align: right;
}
.rcrow__label {
  flex: 1;
  font-size: var(--text-base);
  min-width: 0;
}
.rcrow__best {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-success);
  font-family: var(--font-label);
  font-size: var(--text-min);
}
.rcrow__time {
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  white-space: nowrap;
}
.rcrow .btn { min-height: var(--target-min); }