/* Hörtext — „Erst hören, dann lesen" (assets/js/hoertext.js).
   Eigene Datei, nur auf den Lesetextseiten eingebunden; nur Token aus
   stil.css. Kein Gelb: Bernstein ist für Hinweise reserviert. */

.ht-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  max-width: 40rem; margin: 0 0 .8rem;
}
.ht-schalter {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 32px; cursor: pointer; color: var(--ink-2);
}
.ht-schalter input { width: 1.1rem; height: 1.1rem; margin: 0; }
.ht-bedienung { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ht-bedienung[hidden] { display: none; }
.ht-bedienung .knopf { min-height: 32px; }
.ht-bedienung .knopf[hidden] { display: none; }
.ht-stand { color: var(--ink-2); font-size: .92rem; }

.ht-hinweis {
  max-width: 40rem; margin: 0 0 .8rem; padding: .7rem .9rem;
  background: var(--bg-tief); color: var(--ink-2); border-radius: 10px;
}
.ht-hinweis[hidden] { display: none; }

/* Verdeckt: unscharf und nicht anwählbar. Für Screenreader verdeckt das
   Skript den Text mit aria-hidden. */
.lesetext.ht-verdeckt { user-select: none; background: var(--bg-tief); }
.lesetext.ht-verdeckt p,
.lesetext.ht-verdeckt .vorlesen {
  filter: blur(7px);
  pointer-events: none;
}

/* Der gerade gesprochene Absatz. */
.lesetext p.ht-jetzt {
  border-left: 3px solid var(--marke);
  background: var(--marke-weich);
  padding-left: .7rem;
  margin-left: -.85rem;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .lesetext p { transition: filter .2s ease; }
}
@media (forced-colors: active) {
  .lesetext p.ht-jetzt { border-left-color: Highlight; }
  .lesetext.ht-verdeckt p { filter: none; visibility: hidden; }
}