/* rt.css — Geraet und Ablauf des Reaktionstests (RT). engine.css bleibt unangetastet.
   Aufbau wie am Original: oben das dunkle Reizfeld, darunter Reaktionstaste und Ruhetaste —
   der Zeigefinger ruht unten und wandert nach oben. Handy zuerst: alles passt bei 360x640
   ohne Scrollen (Grundregel Martin 22.10.). */

.rt-geraet { max-width: 520px; margin: 0 auto 12px; user-select: none; -webkit-user-select: none; }

/* --- Reizfeld --- */
.rt-display {
  position: relative; background: #2b3138; border-radius: 12px;
  height: 140px; margin: 0 0 14px;
  display: flex; align-items: center; justify-content: center; gap: 36px;
}
.rt-lampe {
  width: 74px; height: 74px; border-radius: 50%; background: #171b20;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55); box-sizing: border-box;
}
/* Aus: nur ein farbiger Ring, damit man weiss, welche Lampe gelb und welche rot ist. */
.rt-lampe--gelb { border: 3px solid #6e5b14; }
.rt-lampe--rot  { border: 3px solid #6b1c20; }
.rt-lampe--gelb.rt-an { background: #f5c518; box-shadow: 0 0 22px 6px #f5c518, inset 0 1px 2px rgba(255,255,255,.45); }
.rt-lampe--rot.rt-an  { background: #d0212b; box-shadow: 0 0 22px 6px #d0212b, inset 0 1px 2px rgba(255,255,255,.45); }
/* Lautsprecher: zeigt nur beim Probehoeren an, dass Ton kommt — im Test bleibt er dunkel,
   der Ton muss gehoert werden (wie am Original). */
.rt-lautsprecher {
  position: absolute; right: 12px; top: 10px; font-size: 20px; opacity: .25; filter: grayscale(1);
}
.rt-lautsprecher.rt-an { opacity: 1; filter: none; }
.rt-countdown {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font: 700 64px/1 Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #f4f4f4; text-shadow: 0 3px 14px rgba(0,0,0,.55); background: rgba(43,49,56,.85); border-radius: 12px;
  pointer-events: none;
}
.rt-countdown--an { display: flex; }

/* --- Bedienfeld --- */
.rt-bedienfeld { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rt-reaktion {
  width: 124px; height: 124px; border-radius: 50%; border: 0; cursor: pointer;
  background: #1f6f78; color: #fff; box-shadow: 0 6px 0 #154e55, 0 8px 18px rgba(0,0,0,.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: 700 15px/1.2 Inter, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: none;
  padding: 0 10px; text-align: center; hyphens: manual;
}
.rt-reaktion small { font-weight: 500; font-size: 11px; opacity: .8; }
.rt-reaktion:active { transform: translateY(4px); box-shadow: 0 2px 0 #154e55; }
.rt-ruhe {
  width: 100%; height: 76px; border-radius: 14px; cursor: pointer;
  border: 2px dashed #9aa6b2; background: #f3f5f7; color: #33434e;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 700 15px/1.2 Inter, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: none;
}
.rt-ruhe small { font-weight: 500; font-size: 12px; color: #6d7573; }
.rt-ruhe--an { border: 2px solid #2e8b57; background: #e7f4ec; color: #1f6b42; }

/* Zielgruppe unter der Ueberschrift (Martin, 24.10.) */
.rt-zielgruppe { display: inline-block; margin: -4px 0 10px; padding: 4px 10px; border-radius: 999px;
  background: #e7f0f1; color: #1f6f78; font-weight: 700; font-size: 14px; }

/* --- Ablauf --- */
.rt-lauf { display: flex; justify-content: space-between; font-size: 14px; color: #5b6a75; margin: 0 0 8px; }
.rt-feedback { min-height: 2.6em; text-align: center; margin: 4px 0 8px; font-size: 15px; color: #33434e; }
.rt-feedback--gut { color: #1f6b42; font-weight: 600; }
.rt-feedback--daneben { color: #b3431a; font-weight: 600; }
.rt-tonhinweis { background: #fff7e0; border: 1px solid #f1d58a; border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.rt-probe { display: block; margin: 8px auto 14px; }
.rt-regelkasten { background: #f6f4ef; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.rt-regelkasten strong { display: block; margin-top: 4px; }
.rt-regelkasten p { margin: 2px 0 8px; }
.rt-kennzahlen p { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e3ded4; padding: 6px 0; margin: 0; }

@media (max-width: 480px) {
  .rt-display { height: 112px; gap: 28px; margin-bottom: 10px; }
  .rt-lampe { width: 60px; height: 60px; }
  .rt-reaktion { width: 108px; height: 108px; }
  .rt-ruhe { height: 70px; }
  .rt-bedienfeld { gap: 10px; }
}