/* Übungen und Trainer. Nutzt die Variablen aus site.css und theme.css. */
.trainer { margin: 1.5rem 0 2rem; }
.trainer .tr-loading, .tr-muted { color: var(--muted); }
.tr-muted.small { font-size: .85rem; }
.tr-head { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: end; margin: 0 0 1rem; }
.tr-field { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
.tr-field select { min-width: 14rem; max-width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; font: inherit; }
.tr-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.tr-tab { font: inherit; font-weight: 700; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.tr-tab:hover { border-color: var(--accent); }
.tr-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #04120a; }
.tr-stage { min-height: 8rem; }
.tr-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem 1.4rem; }
.tr-card h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.tr-card h3:focus, .tr-q legend:focus, .tr-flash .term:focus { outline: none; }
.tr-fields { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.tr-go { margin-top: .4rem; }
.tr-note { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 10px; padding: .7rem 1rem; }
.tr-note.warn { border-color: rgba(255,190,60,.5); color: #ffd98a; }
.tr-progress { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--muted); margin: 0 0 .5rem; }
.tr-score { font-variant-numeric: tabular-nums; }
.tr-bar { height: .45rem; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin: 0 0 1.1rem; }
.tr-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .2s ease; }
.tr-bar.big { height: .8rem; }
.tr-q { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.tr-q legend { font-size: 1.15rem; font-weight: 700; line-height: 1.4; padding: 0; margin: 0 0 .8rem; overflow-wrap: anywhere; }
.tr-opt { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; margin: 0 0 .5rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.tr-opt:hover { border-color: var(--accent); }
.tr-opt { font-weight: 400; font-size: 1rem; line-height: 1.45; }
/* site.css setzt „label input“ auf volle Breite. Hier muss das Auswahlfeld klein bleiben, sonst bleibt für den Text keine Breite. */
.tr-opt input { display: inline-block; width: 1.25rem; height: 1.25rem; min-height: 0; margin: .15rem 0 0; padding: 0; accent-color: var(--accent); flex: none; }
.tr-opt span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tr-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(34,230,126,.08)); }
.tr-opt.right { border-color: #22e67e; background: rgba(34,230,126,.14); }
.tr-opt.missed { border-color: #22e67e; border-style: dashed; background: rgba(34,230,126,.07); }
.tr-opt.wrong { border-color: #ff6b6b; background: rgba(255,107,107,.12); }
.tr-opt.right::after, .tr-opt.missed::after { content: "✓"; margin-left: auto; color: #22e67e; font-weight: 700; }
.tr-opt.wrong::after { content: "✗"; margin-left: auto; color: #ff6b6b; font-weight: 700; }
.tr-feedback { min-height: 1.2rem; }
.tr-verdict { font-weight: 700; margin: .4rem 0; }
.tr-verdict.ok { color: #22e67e; }
.tr-verdict.bad { color: #ff9f9f; }
.tr-expl { color: var(--muted); border-left: 3px solid var(--accent-line, rgba(34,230,126,.4)); padding-left: .8rem; margin: .5rem 0; }
.tr-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.tr-actions [hidden] { display: none; }
.tr-big { font-size: 1.5rem; font-weight: 800; margin: .3rem 0 .6rem; }
.tr-wrong { margin: 1rem 0; border: 1px solid var(--line); border-radius: 10px; padding: .6rem 1rem; }
.tr-wrong summary { cursor: pointer; font-weight: 700; }
.tr-wrong-item { border-top: 1px solid var(--line); padding: .7rem 0; }
.tr-wrong-item:first-of-type { border-top: 0; }
.tr-wrong-item .q { font-weight: 600; margin: 0 0 .2rem; }
.tr-wrong-item .a { color: #8ff0bb; margin: 0 0 .2rem; }
/* Zuordnung */
.tr-match { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.4rem; }
.tr-match .col { display: grid; gap: .5rem; align-content: start; }
.tr-item { font: inherit; text-align: left; padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; overflow-wrap: anywhere; transition: border-color .12s ease, transform .12s ease; }
.tr-item:hover:not(:disabled) { border-color: var(--accent); }
.tr-item.sel { border-color: var(--accent); background: var(--accent-soft, rgba(34,230,126,.12)); box-shadow: 0 0 0 2px var(--accent-line, rgba(34,230,126,.35)); }
.tr-item.bad { border-color: #ff6b6b; background: rgba(255,107,107,.14); animation: tr-shake .3s; }
.tr-item.ok { cursor: default; color: var(--text); }
.tr-item.c0 { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.6); }
.tr-item.c1 { background: rgba(34,230,126,.18); border-color: rgba(34,230,126,.6); }
.tr-item.c2 { background: rgba(255,190,60,.18); border-color: rgba(255,190,60,.6); }
.tr-item.c3 { background: rgba(236,72,153,.18); border-color: rgba(236,72,153,.6); }
.tr-item.c4 { background: rgba(168,85,247,.2); border-color: rgba(168,85,247,.6); }
.tr-item.c5 { background: rgba(20,184,166,.2); border-color: rgba(20,184,166,.6); }
@keyframes tr-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* Ablauf */
.tr-order { list-style: none; counter-reset: s; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.tr-step { counter-increment: s; display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.tr-step::before { content: counter(s); flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); font-weight: 700; font-size: .85rem; }
.tr-step .handle { color: var(--muted); cursor: grab; flex: none; letter-spacing: -2px; }
.tr-step .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tr-step .mv { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 1rem; cursor: pointer; }
.tr-step .mv:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tr-step .mv:disabled { opacity: .3; cursor: default; }
.tr-step.drag { opacity: .4; }
.tr-step.ok { border-color: #22e67e; background: rgba(34,230,126,.1); }
.tr-step.bad { border-color: #ff6b6b; background: rgba(255,107,107,.1); }
/* Karteikarten */
.tr-flash { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); padding: 1.4rem 1.5rem; min-height: 11rem; cursor: pointer; }
.tr-flash .term { font-size: 1.6rem; font-weight: 800; margin: .2rem 0 .8rem; overflow-wrap: anywhere; }
.tr-flash .back { border-top: 1px dashed var(--line); padding-top: .8rem; }
.tr-flash .def { font-size: 1.1rem; margin: .2rem 0 .6rem; }
.tr-flash:focus-visible, .tr-opt:focus-within, .tr-item:focus-visible, .tr-tab:focus-visible, .tr-step .mv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-boxes { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.tr-boxes li { display: grid; grid-template-columns: 11rem 1fr 2.5rem; gap: .7rem; align-items: center; font-size: .88rem; }
.tr-boxes .bb { height: .6rem; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.tr-boxes .bf { display: block; height: 100%; background: var(--accent); }
.tr-boxes .bn { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-stats { margin: 0 0 1rem; }
@media (max-width: 640px) {
  .tr-card { padding: 1rem; }
  .tr-match { grid-template-columns: 1fr; }
  .tr-boxes li { grid-template-columns: 8.5rem 1fr 2rem; }
  .tr-field select { min-width: 0; width: 100%; }
  .tr-field { width: 100%; }
  .tr-tab { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .tr-item.bad { animation: none; } .tr-bar span, .tr-opt, .tr-item { transition: none; } }