/* Deutsch -- Textdetektiv (Issue #184). Bewusst heller Papierstil statt der
   dunklen Dungeon-Optik der uebrigen Lernwege-Module (dungeonScene.js/
   climbScene.js) -- diese Uebung nutzt keine Canvas-Physik-Engine, "das
   genaue Lesen ist hier die eigentliche Lernhandlung" (Issue-Text), die
   Darstellung ist ein Lesetext, kein Spielbildschirm. Gleiche Grundfarben
   wie adultsView.js/learningPathsAdultView.js (tokens.css). */
.text-detective-view {
  height: 100%;
  overflow-y: auto;
  background: var(--paper-light);
  color: var(--ink-primary);
  padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) 20px;
}

.text-detective-note {
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 4px 0 12px;
}

.text-detective-level-group {
  margin: 16px 0;
}

.text-detective-level-group h3 {
  margin: 0 0 8px;
}

.text-detective-case-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text-detective-case-button {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--paper-shadow);
  border-radius: 8px;
  background: var(--paper-warm);
  color: var(--ink-primary);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.text-detective-back-button {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--paper-shadow);
  border-radius: 6px;
  background: var(--paper-light);
  color: var(--ink-secondary);
  font-size: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}

/* Lesetext: Pilotstandard-Schriftgroesse 16px, kurze Absaetze, grosszuegiger
   Zeilenabstand (learning_design/03_pilotprofil_thore.md: "Schriftgroesse
   16 fuer Lerntexte, kurze Absaetze, sichtbare Zwischenstopps"). */
.text-detective-text {
  font-size: 16px;
  line-height: 1.7;
  max-width: 620px;
}

.text-detective-text p {
  margin: 0 0 14px;
}

/* Anklickbare Stellen bleiben optisch Teil des Lesetextes -- ein dezenter
   Punktunterstrich statt Knopf-/Kaesten-Optik (Issue: "sollen sich optisch
   weiterhin wie ein Lesetext und nicht wie eine Reihe voneinander
   getrennter Antwortkaesten anfuehlen"). Fehlerstellen und richtige
   Ablenker sehen bewusst GLEICH aus, sonst wuerde die Form selbst schon
   verraten, welche Stellen Fehler sind. */
.text-detective-span {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--ink-secondary);
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-detective-span:focus-visible {
  outline: 2px solid var(--magic-cyan);
  outline-offset: 2px;
}

.text-detective-choices {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--paper-shadow);
  border-radius: 8px;
  background: var(--paper-warm);
}

.text-detective-choices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.text-detective-choice-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--paper-shadow);
  border-radius: 6px;
  background: var(--paper-light);
  color: var(--ink-primary);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.text-detective-cancel-button {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--paper-shadow);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 14px;
  cursor: pointer;
}

.text-detective-message {
  color: var(--ink-primary);
  font-weight: 600;
  margin: 8px 0;
}

.text-detective-progress {
  color: var(--ink-secondary);
  margin-top: 16px;
}

.text-detective-hint-button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--paper-shadow);
  border-radius: 6px;
  background: var(--paper-light);
  color: var(--ink-primary);
  font-size: 14px;
  cursor: pointer;
}

.text-detective-hint {
  color: var(--ink-secondary);
}

.text-detective-final .text-detective-text {
  margin-top: 8px;
}