/* lvt.css — nur das, was die Linienverfolgung zusaetzlich braucht.
   engine.css bleibt unangetastet: Test 1 laeuft damit im Feld. */

/* Grundgroesse: so gross, wie der Platz hergibt.
   Vorher standen hier feste 560 px. Auf einem Bildschirm mit 1920 px Breite ist das ein
   Briefmarkenbild - und wer die Linien schlecht auseinanderhaelt, scheitert dann an den
   Augen statt an der Aufgabe (Martin, 18.07.). */
.lvt-buehne {
  width: 100%;
  max-width: min(94vw, 860px);
  margin: 0 auto 14px;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.lvt-buehne--klein { max-width: min(90vw, 460px); }

.lvt-bild {
  display: block;
  width: 100%;
  height: auto;
  /* Das Bild darf nie schmaler werden als die Kaestchen breit sind, sonst tippt man
     auf dem Handy zwischen zwei Ziffern. */
  min-width: 280px;
}

/* ---------------------------------------------------------------- Vollbild
   Im Vollbild zaehlt die HOEHE, nicht die Breite: Das Bild ist 4:3, ein breiter Schirm
   ist 16:9. Wer nur die Breite ausreizt, schiebt die Kaestchen unter den unteren Rand -
   und ausgerechnet die braucht man zum Antworten. */
.lt:fullscreen,
.lt:-webkit-full-screen {
  background: #fff;
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lt:fullscreen .lvt-buehne { max-width: min(96vw, 132vh); }
.lt:fullscreen .lvt-bild { max-height: 74vh; }
.lt:fullscreen .lvt-frage { font-size: 17px; }
.lt:fullscreen .lvt-regel { font-size: 15px; }

/* Ersatz, wenn echtes Vollbild nicht geht (etwa in einem eingebetteten Rahmen ohne
   Erlaubnis): Dann wird wenigstens der Rahmen ausgereizt. */
.lt--gross .lvt-buehne { max-width: min(98vw, 1100px); }
.lt--gross .lvt-frage { font-size: 17px; }

.lvt-werkzeuge {
  display: flex;
  justify-content: flex-end;
  max-width: min(94vw, 860px);
  margin: 0 auto 6px;
}
.lvt-werkzeuge button {
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border: 1px solid #dde3ea;
  border-radius: 7px;
  background: #fff;
  color: #3b4653;
  cursor: pointer;
}
.lvt-werkzeuge button:hover { background: #f5f8fd; border-color: #b9c6d6; }
.lt--gross .lvt-werkzeuge { max-width: min(98vw, 1100px); }

/* Die Kaestchen reagieren auf Beruehrung, damit klar ist, dass sie anklickbar sind. */
.lvt-kaestchen--klick rect { transition: fill .12s ease; }
.lvt-kaestchen--klick:hover rect:first-child { fill: #eef3fb; }

.lvt-frage {
  text-align: center;
  color: #5c6875;
  font-size: 14px;
  margin: 0 0 6px;
}

/* Steht unter jedem Bild. Deutlich genug, um gelesen zu werden, ruhig genug, um beim
   zwanzigsten Bild nicht zu nerven — deshalb keine Warnfarbe. */
.lvt-regel {
  text-align: center;
  color: #6b7787;
  font-size: 13px;
  margin: 0 0 12px;
}

.lvt-regelkasten {
  border-left: 3px solid #1f6feb;
  background: #f5f8fd;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 16px 0;
}
.lvt-regelkasten strong { display: block; margin-bottom: 6px; }
.lvt-regelkasten p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.lvt-regelkasten p:last-child { margin-bottom: 0; }

/* Die drei Laengen nebeneinander, gleich breit — sie sind gleichrangig.
   Auf schmalen Schirmen untereinander, sonst wird jeder Knopf zu einem Wortstapel. */
.lvt-laengen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 18px;
}
@media (min-width: 520px) {
  .lvt-laengen { grid-template-columns: repeat(3, 1fr); }
}
.lvt-wahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lvt-wahl .lt-knopf { width: 100%; }
.lvt-wahl small { color: #6b7787; font-size: 12px; }

/* Die drei Kennzahlen unter den beiden Kacheln. Eigene Klasse, weil "lt-verlauf" in
   engine.css eine feste Hoehe von 90 px hat — die gehoert dort der Verlaufsgrafik. */
.lvt-kennzahlen {
  margin: 0 0 18px;
  border-top: 1px solid #e3e8ee;
}
.lvt-kennzahlen p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 2px;
  border-bottom: 1px solid #f0f3f6;
  font-size: 14px;
}
.lvt-kennzahlen b { font-variant-numeric: tabular-nums; }

/* Hier standen bis zum 20.07. Stile fuer zwei Ankuendigungsschirme ("Nächste Aufgabe",
   Pfeil ohne Linien). Der Umbau ist am selben Tag zurueckgenommen worden - siehe den
   Dateikopf von test.js. Ersatzlos entfernt statt auskommentiert: Ungenutzte Regeln in
   einer Datei, die sich zwei Tests teilen, sind eine Einladung zum Missverstaendnis. */

.lvt-verlaufsgrafik {
  margin: 18px auto 8px;
  max-width: 420px;
  text-align: center;
}
.lvt-verlauf-svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  background: #fff;
}
.lvt-verlaufsgrafik small {
  display: block;
  color: #6b7787;
  font-size: 12px;
  padding-top: 6px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .lvt-kaestchen--klick rect { transition: none; }
}

/* Die frueheren Laeufe. Bewusst schlicht: Sie sind Nebeninformation, nicht das Ergebnis. */
.lvt-frueher {
  margin: 22px auto 8px;
  max-width: 480px;
}
.lvt-frueher h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7787;
  margin: 0 0 8px;
}
.lvt-frueher table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lvt-frueher th {
  text-align: right;
  font-weight: 600;
  color: #6b7787;
  padding: 4px 0;
  border-bottom: 1px solid #dde3ea;
}
.lvt-frueher th:first-child, .lvt-frueher td:first-child { text-align: left; }
.lvt-frueher td {
  text-align: right;
  padding: 4px 0;
  border-bottom: 1px solid #f0f3f6;
  font-variant-numeric: tabular-nums;
}
.lvt-frueher small { display: block; color: #6b7787; font-size: 12px; padding-top: 8px; }

/* Zeitleiste JE AUFGABE (nur im Test): leert sich über das Limit; leer = Aufgabe verfällt.
   Breite wie die Bühne, damit sie bündig darunter sitzt. */
.lvt-limit {
  height: 8px; border-radius: 4px; background: #e6ebf0; overflow: hidden;
  margin: 8px auto 2px; max-width: min(94vw, 860px);
}
.lvt-limit i { display: block; height: 100%; width: 100%; background: #3f7cac; border-radius: 4px; }
.lvt-limit--aus i { background: #c0392b; }

/* Kurzer Hinweis beim Ablauf einer Aufgabe. */
.lvt-abgelaufen {
  text-align: center; padding: 48px 16px; font-size: 17px; font-weight: 600;
  color: #c0392b; line-height: 1.45;
}