/* Gemeinsames Grundgerüst aller fünfzehn Tafeln.
   Alle Maße stehen hier fest, damit beim Blättern von einer Tafel zur
   nächsten nichts springt: Bühne, Textfeld und Bedienleiste sitzen auf
   jeder Seite an derselben Stelle, egal wie viel darin passiert. */

@font-face{
  font-family:"Nunito Sans";
  src:url("schrift/nunito-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
:root{
  --papier:#f4ecdd;
  --papier-hell:#fbf5e9;
  --tinte:#3b3128;
  --tinte-hell:#8a7a66;
  --an:#d98d3a;
  --an-blass:rgba(217,141,58,.16);
  --ab:#5a7f9c;
  --schatten:rgba(90,70,50,.20);
  --linie:rgba(90,70,50,.22);

  /* Die festen Maße. Nur hier ändern, nie in einer einzelnen Tafel. */
  --buehne-hoehe:344px;
  --text-hoehe:5.9em;
}
*{box-sizing:border-box}
body{
  margin:0;padding:22px 24px 26px;min-height:100vh;
  background:var(--papier);color:var(--tinte);
  font:16px/1.6 "Nunito Sans","Segoe UI",system-ui,sans-serif;
  display:flex;
}
.blatt{max-width:980px;margin:auto;width:100%}
.kopf{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinte-hell);margin:0 0 12px}

/* Die Bühne: fester Rahmen, in dem jede Tafel ihr eigenes Bild zeigt. */
.buehne{background:var(--papier-hell);border-radius:14px;padding:22px 24px;
  box-shadow:0 1px 0 var(--schatten);
  height:var(--buehne-hoehe);overflow:hidden;position:relative}

/* Der Erzähltext. Feste Höhe für vier Zeilen, damit die Leiste darunter
   nicht wandert, wenn ein Satz länger ist als der vorige. */
/* Volle Breite: Bei 36em blieb ein Viertel der Zeile leer, und lange
   Texte brauchten dadurch eine Zeile mehr, als ins Feld passte. */
.satz{height:var(--text-hoehe);margin:14px 0 0;font-size:19.5px;line-height:1.45;
  overflow:hidden}
.satz b{font-weight:700}
.satz .leise{color:var(--tinte-hell)}
/* Mitlaufende Schrift: Wörter, die der Sprecher noch nicht gesagt hat,
   stehen blass da. Ohne Ton sind alle gleich hell. */
.satz .wort{opacity:.3;transition:opacity .18s ease}
.satz .wort.da{opacity:1}

.leiste{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.taste{font:inherit;font-size:14px;font-weight:600;padding:11px 20px;border-radius:999px;
  cursor:pointer;border:none;background:var(--tinte);color:var(--papier-hell);
  box-shadow:0 3px 0 var(--schatten)}
.taste:active{transform:translateY(2px);box-shadow:0 1px 0 var(--schatten)}
.taste.leise{background:transparent;color:var(--tinte-hell);
  box-shadow:none;border:1.5px solid var(--linie)}
/* Die Punkte zeigen nicht nur den Stand, man kann sie auch anspringen.
   Wer etwas nicht verstanden hat, klickt den Schritt noch einmal an,
   statt die ganze Tafel von vorn ansehen zu müssen. */
.fortschritt{display:flex;gap:5px;margin-left:6px;align-items:center}
.punkt{width:9px;height:9px;padding:0;border:none;border-radius:50%;
  background:rgba(90,70,50,.2);cursor:pointer;
  transition:background .25s,transform .18s,box-shadow .25s}
.punkt:hover{background:rgba(90,70,50,.45);transform:scale(1.25)}
.punkt.da{background:var(--an)}
.punkt.hier{transform:scale(1.5);box-shadow:0 0 0 3px rgba(217,141,58,.24)}

/* Schrittweise blättern */
.pfeil{font:inherit;font-size:15px;font-weight:700;width:34px;height:34px;
  border-radius:50%;cursor:pointer;border:1.5px solid var(--linie);
  background:transparent;color:var(--tinte-hell);line-height:1;padding:0}
.pfeil:hover:not(:disabled){color:var(--tinte);border-color:rgba(90,70,50,.5)}
.taste:disabled,.pfeil:disabled{opacity:.32;cursor:default;
  box-shadow:none;transform:none}

.blaettern{display:flex;gap:10px;align-items:center;margin-left:auto}
.blaettern a{font-size:13px;font-weight:600;color:var(--tinte-hell);text-decoration:none;
  padding:7px 13px;border-radius:999px;border:1.5px solid var(--linie);white-space:nowrap}
.blaettern a:hover{color:var(--tinte);border-color:rgba(90,70,50,.5)}
.blaettern a.weiter{color:var(--papier-hell);background:var(--tinte);
  border-color:var(--tinte);box-shadow:0 3px 0 var(--schatten)}

@media (max-width:760px){
  :root{--buehne-hoehe:282px;--text-hoehe:7.2em}
  body{padding:14px 15px 18px}
  .buehne{padding:16px 15px}
  .satz{font-size:17px}
  .blaettern{margin-left:0;width:100%;margin-top:4px}
}