/* Lesegeschichten - Lese- und Quizansicht. Ergänzt quiz/trainer.css (Farbvariablen, Grundlayout,
   .card/.mode-btn/.options/.feedback usw. werden von dort übernommen) um alles, was mit dem
   Lesefluss selbst zu tun hat: Schriftgrößen-Stufen, Absatzbreite, Scroll- vs. Wisch-Modus. */

#app { --lg-schrift: 19px; --lg-zeilenhoehe: 1.7; --lg-max-breite: 34em; --tap-target: 44px; }

.lg-werkzeuge { display: flex; align-items: center; justify-content: flex-end; padding: .5rem .7rem; }
.lg-werkzeuge .chips { gap: .4rem; }
.lg-werkzeuge .chip { min-height: var(--tap-target); min-width: var(--tap-target); display: flex; align-items: center; justify-content: center; }
.lg-werkzeuge .chip.aktiv { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.lg-track { position: relative; }

.lg-seite {
  max-width: var(--lg-max-breite);
  margin: 0 auto 1.4rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lg-seite h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.lg-seite p {
  font-size: var(--lg-schrift);
  line-height: var(--lg-zeilenhoehe);
  margin: 0 0 .9rem;
}
.lg-seite p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Wisch-Modus ---- */
/* Nur aktiv, wenn JS läuft UND der Leser umgeschaltet hat - #lgTrack bekommt dann
   data-modus="wisch" per JS gesetzt. Ohne JS bleibt die obige, gestapelte Scroll-Ansicht
   die einzige, die es gibt. */
#lgTrack[data-modus="wisch"] {
  display: flex;
  overflow: hidden;
  touch-action: pan-y;
}
#lgTrack[data-modus="wisch"] .lg-seite {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0;
  min-height: 50vh;
}
#lgTrack[data-modus="wisch"].lg-ziehend {
  transition: none;
}
#lgTrack[data-modus="wisch"]:not(.lg-ziehend) {
  transition: transform 300ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #lgTrack[data-modus="wisch"]:not(.lg-ziehend) { transition: none; }
}

.lg-wisch-knoepfe { margin-top: .8rem; }

/* trainer.css setzt auf .row-end/.chips bereits display:flex - das gewinnt gegen das UA-
   Stylesheet-Regel fuer [hidden] (gleiche Spezifitaet, Autor-Stylesheet vor User-Agent-
   Stylesheet). Ohne diese Regel bliebe ein per JS "hidden" gesetzter Button trotzdem sichtbar -
   derselbe Fall wie #vollbildBtn[hidden] bei den Live-Spielen. */
.lg-wisch-knoepfe[hidden] { display: none; }

@media (min-width: 700px) {
  .lg-seite { padding: 1.6rem 1.8rem; }
}

/* ---------------------------------------------------------------- Name-Bildschirm (Gast) ---- */
#lgNameEingabe {
  font: inherit; font-size: 1rem; padding: .75rem .9rem; min-height: var(--tap-target);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
}
#lgNameEingabe:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#lgQuizWer { margin: -.3rem 0 0; }