/* Erzeugt von tools/rtl_css.py aus assets/css/hoertrainer.css — nicht von Hand aendern.
   Die Spiegelung fuer Seiten mit dir="rtl"; LTR-Seiten laden die Quelle. */
/* ==========================================================================
   Hoertrainer — nur auf der Seite des Hoertrainers geladen
   (tools/seiten_hoeren.py, `kopfzusatz`). Ausschliesslich die Token aus
   stil.css, damit hell und dunkel ohne eigene Farbtafel stimmen.

   Drei Farbentscheidungen, und keine davon ist neu:

   * **Blau ist alles, was man anfassen kann** — der Abspielknopf, die Welle,
     der Ring, die gewaehlte Einstellung. Wie auf der ganzen Seite.
   * **Rueckmeldung erst nach der Antwort**, in Blaugruen und Orange mit Haken
     und Kreuz (Okabe & Ito) — dieselben Werte wie `.uebung-karte` in
     stil.css. Waehrend der Aufgabe ist nichts gruen und nichts rot: Hoeren
     ist anstrengend genug, ohne dass die Seite vorher urteilt.
   * **Die Rollen eines Dialogs** tragen Blau, Bernstein, Violett und
     Schiefer — Toene, die auf dieser Seite weder „richtig“ noch „falsch“
     heissen und mit weisser Schrift ueber 4,5 : 1 liegen.
   ========================================================================== */

.htr {
  --ok: #0f766e; --ok-ink: #0f766e; --ok-weich: #ccfbf1;
  --fehler: #c2410c; --fehler-ink: #9a3412; --fehler-weich: #ffedd5;
  --rolle-0: #2563eb; --rolle-1: #b45309; --rolle-2: #7c3aed; --rolle-3: #475569;
  display: grid; gap: 1.25rem;
  margin: 1.6rem 0 2.2rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .htr {
    --ok: #2dd4bf; --ok-ink: #5eead4; --ok-weich: #0f2f2c;
    --fehler: #fb923c; --fehler-ink: #fdba74; --fehler-weich: #3a2312;
  }
}
:root[data-thema="dunkel"] .htr {
  --ok: #2dd4bf; --ok-ink: #5eead4; --ok-weich: #0f2f2c;
  --fehler: #fb923c; --fehler-ink: #fdba74; --fehler-weich: #3a2312;
}

.htr-titel { font-size: 1.3rem; margin: 0; }
.htr-kopf { display: grid; gap: .7rem; }
.htr-stimmen, .htr-kopf .zeile-still { margin: 0; }

.htr-einstellungen {
  display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: flex-end;
}
.htr-feld { display: flex; flex-direction: column; min-width: 0; }
.htr-feld select { min-width: min(14rem, 100%); }
.htr-etikett {
  display: block; margin: 0 0 .35rem;
  font-size: .88rem; font-weight: 600; color: var(--ink-2);
}

/* Normal / langsam: zwei Knoepfe als eine Leiste. */
.htr-tempo {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--bg-tief); border: 1px solid var(--linie);
  border-radius: var(--rund-voll);
}
.htr-tempo-knopf {
  min-height: 40px; padding: .35rem 1rem; font: inherit; font-size: .92rem;
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
  border-radius: var(--rund-voll);
}
.htr-tempo-knopf[aria-pressed="true"] {
  background: var(--karte); color: var(--ink); font-weight: 650;
  box-shadow: var(--schatten-1);
}

/* Mitlesen: ein Schalter mit Bahn, der Zustand steht in aria-pressed. */
.htr-schalter {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 40px; padding: .3rem .2rem; font: inherit; font-size: .95rem;
  color: var(--ink); background: none; border: 0; cursor: pointer;
}
.htr-schalter-bahn {
  position: relative; flex: none;
  width: 2.6rem; height: 1.5rem; border-radius: var(--rund-voll);
  background: var(--linie-kraeftig); transition: background .15s;
}
.htr-schalter-bahn::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%;
  background: var(--karte); box-shadow: var(--schatten-1);
  transition: transform .15s;
}
.htr-schalter[aria-pressed="true"] .htr-schalter-bahn { background: var(--marke); }
.htr-schalter[aria-pressed="true"] .htr-schalter-bahn::after {
  transform: translateX(-1.1rem);
}

/* Die zwei Erklaersaetze (Stimmen, Mitlesen) stehen unter der Wahl. */
.htr-hinweise { display: grid; gap: .5rem; }
.htr-hinweise .zeile-still { margin: 0; }

/* Waehrend einer Runde: nur die Schalter, keine Erklaersaetze. */
.htr-im-lauf .htr-kopf > .zeile-still,
.htr-im-lauf .htr-hinweise { display: none; }

/* Auf dem Telefon: Die Einstellungen in zwei Zeilen (Stufe; Tempo und
   Mitlesen nebeneinander), der Kastentitel nur fuer Vorleseprogramme —
   die Ueberschrift der Seite sagt dasselbe. So steht die gemischte Runde
   auf 390 x 844 im ersten Bildschirm. */
@media (max-width: 34rem) {
  .htr:not(.htr-im-lauf) .htr-titel {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .htr:not(.htr-im-lauf) .htr-einstellungen { gap: .6rem 1rem; }
  .htr:not(.htr-im-lauf) .htr-feld:first-child { flex: 1 1 100%; }
  .htr:not(.htr-im-lauf) .htr-feld select { width: 100%; min-height: 44px; }
  .htr-schalter > span:last-child { white-space: nowrap; }
  .htr-tempo-knopf { padding: .35rem .8rem; min-height: 44px; }
  .htr-schalter { min-height: 44px; }
}
.htr-im-lauf { scroll-margin-top: 5rem; }
@media (max-width: 34rem) {
  .htr-im-lauf .htr-titel { display: none; }
  .htr-im-lauf .htr-einstellungen { gap: .5rem 1rem; }
  .htr-im-lauf .htr-feld:first-child { flex: 1 1 100%; }
}

/* --- Wahl: gemischte Runde und Modi ---------------------------------------- */

.htr-wahl { display: grid; gap: 1rem; }

.htr-mix {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  padding: 1.1rem 1.2rem; text-align: right; font: inherit; color: var(--ink);
  background: var(--marke-weich); border: 1px solid var(--marke);
  border-radius: var(--rund); cursor: pointer;
  transition: box-shadow .18s, transform .12s;
}
.htr-mix:hover { box-shadow: var(--schatten-2); transform: translateY(-1px); }
.htr-mix-zeichen, .htr-mix-los {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
}
.htr-mix-zeichen { background: var(--karte); color: var(--marke-ink); }
.htr-mix-los { background: var(--marke); color: var(--knopf-ink); margin-right: auto; }
.htr-mix svg { width: 26px; height: 26px; }
.htr-mix-text { display: grid; gap: .15rem; min-width: 0; }
.htr-mix-text b { font-family: var(--schrift-titel); font-size: 1.15rem; }
.htr-mix-text span { color: var(--ink-2); font-size: .93rem; }

.htr-modi-titel { font-size: 1rem; margin: .4rem 0 0; color: var(--ink-2); }
.htr-modi {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
}
.htr-modus {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  min-height: 72px; padding: .8rem .9rem; text-align: right;
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund);
  transition: border-color .15s, transform .12s, box-shadow .2s;
}
.htr-modus:hover { border-color: var(--marke); transform: translateY(-1px); box-shadow: var(--schatten-1); }
.htr-modus-zeichen {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--marke-weich); color: var(--marke-ink);
}
.htr-modus-zeichen svg { width: 22px; height: 22px; }
.htr-modus-text { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.htr-modus-text b { font-weight: 650; font-size: .98rem; }
.htr-modus-text > span { font-size: .85rem; color: var(--ink-3); }
.htr-modus-text .htr-modus-stand { font-size: .78rem; color: var(--ink-2); }
.htr-weggelassen { margin: 0; }

/* Der Ring: Grundlinie und Wert, oben beginnend. */
.htr-ring { width: 34px; height: 34px; flex: none; transform: rotate(-90deg); }
.htr-ring circle { fill: none; stroke-width: 4; }
.htr-ring-grund { stroke: var(--linie); }
.htr-ring-wert { stroke: var(--marke); stroke-linecap: round; transition: stroke-dasharray .4s; }
.htr-ring-gross { width: 96px; height: 96px; }
.htr-ring-gross circle { stroke-width: 3.2; }

/* --- Eine Aufgabe ---------------------------------------------------------- */

.htr-lauf { min-width: 0; }
.htr-aufgabe { display: grid; gap: .9rem; }

.htr-leiste {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.htr-punkte {
  display: flex; gap: 5px; list-style: none; margin: 0; padding: 0;
  flex: 1; min-width: 8rem;
}
.htr-punkte li {
  flex: 1; height: 6px; max-width: 2.4rem; border-radius: 3px;
  background: var(--linie-kraeftig);
}
.htr-punkte li.ist-jetzt { background: var(--marke); }
.htr-punkte li.ist-richtig { background: var(--ok); }
.htr-punkte li.ist-falsch { background: var(--fehler); }
.htr-zaehler { font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.htr-schliessen {
  display: grid; place-items: center; width: 40px; height: 40px;
  margin-right: auto; padding: 0; color: var(--ink-2); cursor: pointer;
  background: none; border: 1px solid var(--linie); border-radius: 50%;
}
.htr-schliessen:hover { color: var(--ink); border-color: var(--linie-kraeftig); }
.htr-schliessen svg { width: 18px; height: 18px; }

.htr-frage { margin: 0; font-weight: 650; font-size: 1.08rem; }

.htr-spieler {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.htr-play {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: .6rem 1rem .6rem 1.3rem;
  font: inherit; font-weight: 650; font-size: 1.02rem; cursor: pointer;
  color: var(--knopf-ink); background: var(--marke);
  border: 1px solid transparent; border-radius: var(--rund-voll);
  box-shadow: var(--schatten-1);
}
.htr-play:hover { box-shadow: var(--schatten-2); }
.htr-play svg { width: 22px; height: 22px; flex: none; }
.htr-langsam { min-height: 44px; }
.htr-zeigen { min-height: 40px; }
.htr-stimme-schild {
  display: inline-block; padding: .1rem .6rem; border-radius: var(--rund-voll);
  font-size: .8rem; font-weight: 650;
  color: var(--ink-2); background: var(--bg-tief); border: 1px solid var(--linie);
}

/* Die Welle: fuenf Striche, die nur laufen, solange gesprochen wird. Ohne
   Bewegung (prefers-reduced-motion) stehen sie still in Hoehenstufen. */
.htr-welle {
  display: inline-flex; align-items: center; gap: 2px; height: 18px;
}
.htr-welle i {
  display: block; width: 3px; height: 5px; border-radius: 2px;
  background: currentColor; opacity: .55;
}
[data-spricht] .htr-welle i { opacity: 1; animation: htr-welle .9s ease-in-out infinite; }
[data-spricht] .htr-welle i:nth-child(2) { animation-delay: .12s; }
[data-spricht] .htr-welle i:nth-child(3) { animation-delay: .24s; }
[data-spricht] .htr-welle i:nth-child(4) { animation-delay: .36s; }
[data-spricht] .htr-welle i:nth-child(5) { animation-delay: .48s; }
@keyframes htr-welle {
  0%, 100% { height: 5px; }
  50% { height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-spricht] .htr-welle i { animation: none; }
  [data-spricht] .htr-welle i:nth-child(odd) { height: 14px; }
  [data-spricht] .htr-welle i:nth-child(even) { height: 9px; }
}
[data-spricht].htr-mini, [data-spricht].knopf-zweit { border-color: var(--marke); }

.htr-mitlese {
  margin: 0; padding: .6rem .9rem; font-size: 1.15rem;
  background: var(--bg-tief); border-radius: var(--rund-s);
  overflow-wrap: anywhere;
}

.htr-koerper { display: grid; gap: .8rem; min-width: 0; }
.htr-erst { margin: 0; }
.htr-lueckensatz {
  margin: 0; font-size: clamp(1.2rem, 1.05rem + .8vw, 1.6rem); line-height: 1.6;
  overflow-wrap: anywhere;
}
.htr-luecke {
  display: inline-block; min-width: 4.5em; padding: 0 .35em;
  border-bottom: 2px solid var(--marke); color: var(--marke-ink);
}
.htr-luecke.ist-gefuellt { font-weight: 650; }
.htr-zeichen {
  margin: 0; font-size: 2.6rem; line-height: 1.2; font-weight: 500;
}

/* Antworten: Daumenziele, mindestens 48 Pixel. */
.htr-optionen {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.htr-optionen-text { grid-template-columns: 1fr; }
.htr-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htr-option {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem;
  min-height: 52px; padding: .6rem .8rem .6rem 2.4rem; text-align: right;
  font: inherit; font-size: 1.05rem; color: var(--ink); cursor: pointer;
  background: var(--karte); border: 1px solid var(--linie-kraeftig);
  border-radius: var(--rund-s);
  transition: border-color .12s, background .12s;
}
.htr-option:hover:not([disabled]) { border-color: var(--marke); background: var(--marke-weich); }
.htr-option[disabled] { cursor: default; }
.htr-option[disabled]:not(.ist-loesung):not(.ist-falsch) { color: var(--ink-2); }
.htr-option-text { overflow-wrap: anywhere; }
.htr-option-lesung { flex-basis: 100%; font-size: .85rem; color: var(--ink-3); }
.htr-taste {
  display: grid; place-items: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: 6px;
  font-size: .78rem; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--linie);
}
.htr-option.ist-loesung {
  background: var(--ok-weich); border-color: var(--ok); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ok);
}
.htr-option.ist-falsch {
  background: var(--fehler-weich); border-color: var(--fehler); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--fehler);
}
.htr-marke {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.4rem; height: 1.4rem;
}
.htr-marke svg { width: 20px; height: 20px; stroke-width: 2.4; }
.ist-loesung .htr-marke { color: var(--ok-ink); }
.ist-falsch .htr-marke { color: var(--fehler-ink); }

/* Betonung: die Silben in einer Reihe, darueber ein Punkt. Nach der
   Antwort waechst der Punkt der betonten Silbe. */
.htr-silben {
  display: flex; flex-wrap: wrap; gap: .5rem; grid-template-columns: none;
}
.htr-silben .htr-option {
  flex-direction: column; justify-content: center; gap: .3rem;
  min-width: 4.2rem; padding: .7rem .9rem 1.6rem; text-align: center;
  font-size: 1.25rem;
}
.htr-silben .htr-taste { position: absolute; right: .35rem; top: .35rem; width: 1.2rem; height: 1.2rem; font-size: .7rem; }
.htr-silben .htr-marke { top: auto; bottom: .2rem; left: 50%; transform: translateX(-50%); }
.htr-silbenpunkt {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--linie-kraeftig); transition: width .2s, height .2s;
}
.htr-silben .ist-betont .htr-silbenpunkt { width: 18px; height: 18px; background: var(--marke); }

.htr-toene .htr-option { flex-wrap: nowrap; }
.htr-tonbild { flex: none; }
.htr-tonlinie { stroke: var(--linie); stroke-width: 1; fill: none; }
.htr-tonkurve {
  stroke: var(--marke); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.htr-silbenbild .htr-punkt { fill: var(--linie-kraeftig); }
.htr-silbenbild .htr-punkt-betont { fill: var(--marke); }

/* Rueckmeldung: Zeichen und Wort, in der Tinte der Rueckmeldefarbe. */
.htr-rueck {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  margin: 0; min-height: 1.6rem; font-weight: 650;
}
.htr-rueck svg { width: 20px; height: 20px; stroke-width: 2.4; flex: none; }
.htr-rueck.ist-richtig { color: var(--ok-ink); }
.htr-rueck.ist-falsch { color: var(--fehler-ink); }
.htr-ungezaehlt {
  font-weight: 500; font-size: .85rem; color: var(--ink-2);
  padding: .05rem .55rem; border-radius: var(--rund-voll); background: var(--bg-tief);
}

.htr-aufloesung {
  display: grid; gap: .45rem; padding: .9rem 1rem;
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: var(--rund-s);
}
.htr-aufloesung p { margin: 0; }
.htr-hoerzeile { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; font-size: 1.1rem; }
.htr-hoerzeile.ist-gesagt .htr-hoerzeile-text { font-weight: 650; }
.htr-hoerzeile-text { overflow-wrap: anywhere; min-width: 0; }
.htr-bedeutung { color: var(--ink-2); font-size: .95rem; }
.htr-gruppe { font-size: .92rem; color: var(--ink-2); max-width: var(--lesebreite); }
.htr-betonungsbild { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.htr-silbentext { margin: 0; font-size: 1.2rem; letter-spacing: .02em; }
.htr-silbentext b { color: var(--marke-ink); }

.htr-mini {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  color: var(--marke-ink); background: var(--karte);
  border: 1px solid var(--linie-kraeftig); border-radius: 50%;
}
.htr-mini:hover { border-color: var(--marke); }
.htr-mini svg { width: 19px; height: 19px; }

.htr-diktat { width: 100%; font-size: 1.1rem; resize: vertical; }
.htr-marken { line-height: 2; font-size: 1.05rem; }
.htr-mk {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: 0 .35rem; border-radius: 6px;
}
.htr-mk svg { width: 14px; height: 14px; stroke-width: 2.4; }
.htr-mk-gut, .htr-mk-tipp { color: var(--ok-ink); background: var(--ok-weich); }
.htr-mk-falsch, .htr-mk-fehlt, .htr-mk-zuviel { color: var(--fehler-ink); background: var(--fehler-weich); }
.htr-mk s { margin-right: .25rem; color: var(--ink-3); }
.htr-mk-zuviel { text-decoration: line-through; }

.htr-fuss, .htr-knoepfe {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.htr-fuss { justify-content: flex-end; }

/* --- Ergebnis -------------------------------------------------------------- */

.htr-ergebnis { display: grid; gap: .9rem; }
.htr-ergebnis > p { margin: 0; }
.htr-ergebnis-kopf { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.htr-ergebnis-titel { margin: 0 0 .2rem; font-size: 1.25rem; }
.htr-ergebnis-zahl { margin: 0; font-size: 1.05rem; font-weight: 650; }
.htr-ergebnis-lob { margin: .2rem 0 0; color: var(--ink-2); max-width: var(--lesebreite); }
.htr-ergebnisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.htr-ergebnisliste li {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem;
  padding: .4rem .6rem; border-radius: var(--rund-s); background: var(--karte-2);
  border: 1px solid var(--linie);
}
.htr-ergebnisliste .htr-marke { position: static; transform: none; }
.htr-ergebnisliste .ist-richtig .htr-marke { color: var(--ok-ink); }
.htr-ergebnisliste .ist-falsch .htr-marke { color: var(--fehler-ink); }
.htr-ergebnis-text { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }

/* --- Hoerverstaendnis ------------------------------------------------------ */

.htr-textliste {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
.htr-textkarte {
  display: grid; gap: .3rem; justify-items: start; width: 100%;
  padding: .9rem 1rem; text-align: right; font: inherit; color: var(--ink);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); cursor: pointer;
}
.htr-textkarte:hover { border-color: var(--marke); box-shadow: var(--schatten-1); }
.htr-textkarte b { font-size: 1.02rem; }
.htr-textkarte .marke-schild { margin: 0; }
.htr-fertig { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--ink-2); }
.htr-fertig svg { width: 16px; height: 16px; }

.htr-rollen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.htr-rolle {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .25rem .3rem .25rem .7rem; border-radius: var(--rund-voll);
  background: var(--karte-2); border: 1px solid var(--linie);
}
.htr-rolle .zeile-still { margin: 0; font-size: .8rem; }
.htr-rollenzeichen {
  display: inline-grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: .8rem; font-weight: 700; color: #ffffff; background: var(--rolle-0);
}
.htr-rolle-1 .htr-rollenzeichen { background: var(--rolle-1); }
.htr-rolle-2 .htr-rollenzeichen { background: var(--rolle-2); }
.htr-rolle-3 .htr-rollenzeichen { background: var(--rolle-3); }

.htr-hv-fragen { margin: 0; padding-right: 1.3rem; display: grid; gap: 1rem; }
.htr-hv-text { margin: 0 0 .5rem; font-weight: 600; }
.htr-beleg { margin: .5rem 0 0; font-size: .95rem; }
.htr-textschluss:empty { display: none; }
.htr-textschluss { display: grid; gap: .6rem; }
.htr-textschluss p { margin: 0; }

.htr-mitschrift {
  display: grid; gap: .55rem; padding: 1rem;
  background: var(--karte-2); border: 1px solid var(--linie); border-radius: var(--rund-s);
}
.htr-zeile { margin: 0; padding: .3rem .5rem; border-radius: var(--rund-s); line-height: 1.65; }
.htr-blase {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem;
  border-right: 4px solid var(--rolle-0); background: var(--karte);
}
.htr-blase.htr-rolle-1 { border-right-color: var(--rolle-1); }
.htr-blase.htr-rolle-2 { border-right-color: var(--rolle-2); }
.htr-blase.htr-rolle-3 { border-right-color: var(--rolle-3); }
.htr-blase .htr-rollenzeichen { align-self: center; }
.htr-zeile.ist-dran { background: var(--marke-weich); }

/* --- Text unter dem Trainer ---------------------------------------------- */

.htr-text h2 { font-size: 1.15rem; margin: 1.6rem 0 .4rem; }
.htr-text p { margin: 0; }

@media (max-width: 34rem) {
  .htr-mix { padding: .9rem; gap: .75rem; }
  .htr-mix-los { display: none; }
  .htr-play { flex: 1 1 100%; justify-content: center; }
  .htr-ergebnis-kopf .htr-ring-gross { width: 76px; height: 76px; }
}

/* Wohin nach der Runde (tools/seiten_hoeren.py, _weiter). */
.htr-weiter { margin-top: 2rem; }
.htr-weiter-wege { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Solange offen ist, ob der Trainer oder der Hinweis „keine Stimme" kommt
   (hoertrainer.js wartet bis zu drei Sekunden auf die Stimmen des
   Browsers), steht darunter noch nichts. Sonst stand es zuerst direkt unter
   der Ueberschrift und sprang danach um die ganze Kastenhoehe nach unten
   (CLS 0,25 auf dem Telefon, tools/springen_pruefen.mjs). Ohne Skript gilt
   die Regel nicht (data-js). */
html[data-js] [data-rolle="ohne-stimme"][hidden] + .htr[hidden] ~ * { display: none !important; }