/* ==========================================================================
   meinHERMES — Trainer (Dach und Teil «Zuordnen»)

   Derselbe Modernist-Entwurf wie der Überblick: flach, kein Radius, Struktur
   aus Linien, Rot nur als Akzent. Das Bild einer Übung ist der Graph —
   Bahnen, Knoten und Kanten tragen die Klassen aus css/graph.css; hier stehen
   nur die Zustände der Kästen (leer, belegt, geprüft), der Pool und das
   Gerüst der Seite.
   ========================================================================== */

/* Nur die Übung selbst (Phase, Modul, Gesamtbild) braucht die volle Breite;
   die Trainer-Seite mit Leiste und Teilen bleibt in der Inhaltsbreite. */
body[data-route="trainer"][data-teil="uebung"] .view { max-width: none; padding: 18px 20px 40px; }

/* --- Teil-Leiste: Zuordnen · Lernkarten · Quiz ------------------------------ */

.tr-teile { margin-bottom: 20px; }
.tr-teile .chip { height: 34px; gap: 7px; font-size: 12.5px; }
.tr-teile .chip[aria-current="page"] {
  color: var(--text);
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--akzent);
}
.tr-teile .chip svg { width: 15px; height: 15px; }

.tr-mikro {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.tr-mikro--gruppe { margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--rand); }

/* --- Schalter «Leere Kästen» (Übersicht und Übung) -------------------------- */

.tr-arten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-arten__titel {
  margin-right: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.tr-art {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--rand);
  background: var(--weiss);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tr-art:hover { border-color: var(--text); }
.tr-art[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 -3px 0 var(--akzent); }
.tr-art[aria-pressed="false"] { color: var(--text-leise); }
.tr-art[aria-pressed="false"] .gswatch { filter: grayscale(1); opacity: .5; }
.tr-art .gswatch { width: 20px; height: 20px; }
/* In der schmalen Seitenleiste der Übung steht der Titel über den Schaltern. */
.tr-seite .tr-arten__titel { flex: 1 0 100%; margin: 0; }

/* --- Übersicht ------------------------------------------------------------- */

.tr-hub { max-width: var(--maxbreite); margin: 0 auto; }
.tr-hub .tr-arten { margin-top: 4px; }
.tr-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.tr-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  background: var(--weiss);
  color: var(--text);
  text-decoration: none;
}
.tr-karte:hover, .tr-karte:focus-visible { border-color: var(--akzent); }
.tr-karte--voll { border-color: var(--gut); }
.tr-karte__kopf { display: flex; align-items: center; gap: 8px; }
.tr-karte__kopf .kat-ikone { flex: 0 0 auto; color: var(--akzent); }
.tr-karte__titel { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.tr-karte__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-leise); }
.tr-karte__beste { font-weight: 700; color: var(--text-weich); }
.tr-karte--voll .tr-karte__beste { color: var(--gut); }
.tr-quelle { margin: 30px 0 0; font-size: 12.5px; color: var(--text-leise); }

/* --- Übung: Gerüst ---------------------------------------------------------- */

.tr-uebung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "kopf kopf" "buehne seite";
  gap: 14px 20px;
  align-items: start;
}
@media (max-width: 899.98px) {
  .tr-uebung { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "buehne" "seite"; }
  /* Bühne und Pool teilen sich den Schirm: die Bühne bleibt kürzer, damit
     der Weg Element → Kasten ohne langes Scrollen geht. */
  .tr-buehne { max-height: 58vh; }
}

.tr-kopf { grid-area: kopf; display: flex; flex-direction: column; gap: 6px; }
.tr-zurueck { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); text-decoration: none; }
.tr-zurueck:hover { color: var(--akzent-text); }
.tr-kopf__zeile { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tr-kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-text); }
.tr-titel { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.022em; line-height: 1.1; }
.tr-zaehler { font-size: 13px; color: var(--text-weich); }
.tr-beste { font-size: 12px; font-weight: 700; color: var(--text-leise); }

/* --- Bühne ----------------------------------------------------------------- */

.tr-buehne-huelle { grid-area: buehne; position: relative; min-width: 0; }
.tr-buehne {
  overflow: auto;
  max-height: calc(100vh - 150px);
  min-height: 240px;
  padding: 14px 14px 52px;
  background: var(--graph-bg);
  border: 1px solid var(--rand);
}
.tr-buehne.ist-am-ziehen, .tr-buehne.ist-am-ziehen * { cursor: grabbing; }

.tr-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--rand);
}
.tr-zoom__knopf, .tr-zoom__passend {
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text-leise);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tr-zoom__passend { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-left: 1px solid var(--rand); }
.tr-zoom__knopf:hover, .tr-zoom__passend:hover { color: var(--text); }
.tr-zoom__wert { min-width: 44px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-weich); }

/* --- Bild: der Graph mit Kästen --------------------------------------------- */

.tr-graph { display: block; height: auto; max-width: none; font-family: var(--schrift); }
/* Im Bild sind nur die Kästen zu bedienen: Modultitel und vorgegebene
   Knoten bleiben still (im Graph sind sie anklickbar). */
.tr-graph .gtext--untergruppe { pointer-events: none; cursor: default; }
.tr-gegeben { cursor: default; }
.tr-gegeben:hover .gk__form { stroke-width: 1.5; }
.tr-gegeben.gk--rolle:hover .gk__label, .tr-gegeben.gk--meilenstein:hover .gk__label { text-decoration: none; }

/* Überfahren eines Kastens: er, seine Nachbarn und die Verbindungen dazwischen. */
.tr-knoten > g, .tr-graph .gkante { transition: opacity .12s ease; }
.tr-graph.ist-hervorhebung .tr-knoten > g:not(.ist-aktiv) { opacity: .35; }
.tr-graph.ist-hervorhebung .gkante:not(.ist-aktiv) { opacity: .1; }
.tr-graph.ist-hervorhebung .gkante.ist-aktiv { stroke-width: 2.6; opacity: 1; }

.tr-ziel { cursor: pointer; outline: none; }
.tr-ziel .gk { cursor: inherit; }
.tr-ziel--belegt { cursor: grab; }
.tr-ziel--richtig, .tr-ziel--falsch, .tr-ziel--leer { cursor: default; }
.tr-ziel__rahmen { stroke: none; transition: stroke .12s ease, fill-opacity .12s ease; }

/* Leer: die Form des Knotens blass und gestrichelt, ohne Namen — auch bei
   Rollen, die im Graph ohne Kasten stehen. */
.tr-ziel--offen .gk__form { fill-opacity: .5; stroke-width: 1.2; stroke-dasharray: 4 3; }
.tr-ziel--offen .gk__glyph { opacity: .4; }
.tr-ziel--offen.tr-ziel--rolle .gk__form { fill: var(--gk-rolle-bg); stroke: var(--gk-rolle); }
.tr-ziel--offen:hover .gk__form { stroke-width: 1.2; }

/* Ein Element ist gewählt oder wird gezogen: die leeren Kästen seiner Art warten. */
.tr-ziel--bereit .tr-ziel__rahmen,
.tr-graph[data-zieht="rolle"] .tr-ziel--rolle.tr-ziel--offen .tr-ziel__rahmen,
.tr-graph[data-zieht="aufgabe"] .tr-ziel--aufgabe.tr-ziel--offen .tr-ziel__rahmen,
.tr-graph[data-zieht="ergebnis"] .tr-ziel--ergebnis.tr-ziel--offen .tr-ziel__rahmen {
  stroke: var(--akzent); stroke-width: 1.5; stroke-dasharray: 4 3;
}
.tr-graph:not(.ist-geprueft) .tr-ziel:hover .tr-ziel__rahmen,
.tr-graph:not(.ist-geprueft) .tr-ziel:focus-visible .tr-ziel__rahmen,
.tr-ziel.ist-drueber .tr-ziel__rahmen {
  stroke: var(--akzent); stroke-width: 2; stroke-dasharray: none; fill: var(--akzent); fill-opacity: .08;
}
.tr-ziel.ist-am-ziehen .tr-ziel__inhalt { opacity: .35; }

/* Nach der Prüfung steht in jedem Kasten das gesuchte Element (bei «richtig»
   das gelegte, es kann ein gleichwertiges sein). */
.tr-ziel--richtig .tr-ziel__rahmen { stroke: var(--gut); stroke-width: 2.5; }
.tr-ziel--falsch .tr-ziel__rahmen { stroke: var(--akzent); stroke-width: 2.5; fill: var(--akzent); fill-opacity: .08; }
.tr-ziel--leer .tr-ziel__inhalt { opacity: .5; }
.tr-ziel--leer .tr-ziel__rahmen { stroke: var(--text-leise-hell); stroke-width: 1.5; stroke-dasharray: 3 2; }
.tr-graph.ist-geprueft .tr-ziel:focus-visible .tr-ziel__rahmen { stroke-dasharray: none; }

/* --- Seite: Schalter, Knöpfe, Pool, Auswertung ------------------------------ */

.tr-seite { grid-area: seite; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 900px) {
  /* Die Seite ist so hoch wie die Bühne; nur der Pool rollt, Knöpfe bleiben stehen. */
  .tr-seite { max-height: calc(100vh - 150px); }
  .tr-pool { flex: 1 1 auto; min-height: 120px; overflow-y: auto; }
  .tr-ergebnis { flex: 0 1 auto; max-height: 45vh; overflow-y: auto; }
}
.tr-knoepfe { margin: 0; }
.tr-hinweis { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-leise); }
.tr-legende { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-weich); }
.tr-legende li { display: flex; align-items: center; gap: 8px; }

.tr-suche { margin: 0; }
.tr-suche__feld { min-height: 36px; font-size: 13.5px; }
.tr-suche__stand { display: block; margin-top: 4px; font-size: 12px; color: var(--text-leise); }

.tr-pool { display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.tr-pool__leer { margin: 0; font-size: 13px; color: var(--text-leise); }
.tr-pool__titel { margin: 8px 0 2px; }
.tr-pool__titel:first-child { margin-top: 0; }
.tr-pool__gruppe { display: flex; flex-wrap: wrap; gap: 2px 4px; align-content: flex-start; }

/* Die Elemente im Pool sind Knoten wie im Graph, etwas kleiner. */
.tr-chip {
  display: inline-flex;
  max-width: 100%;
  padding: 1px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: grab;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.tr-chip .tr-knotenbild { display: block; max-width: 100%; height: auto; }
.tr-chip .gk { cursor: inherit; }
.tr-chip:focus-visible { outline: 2px solid var(--fokus); outline-offset: 0; }
.tr-chip.ist-gewaehlt { outline: 2px solid var(--akzent); outline-offset: 0; }
.tr-chip.ist-am-ziehen { opacity: .35; cursor: grabbing; }
.tr-chip:disabled { cursor: default; opacity: .5; }
body.tr-zieht, body.tr-zieht * { cursor: grabbing; }
.tr-geist {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .22));
}
.tr-geist .tr-knotenbild { display: block; }

.tr-ergebnis { padding: 12px 14px; border: 1px solid var(--rand); background: var(--weiss); outline: none; }
.tr-ergebnis__zahl { margin: 0 0 10px; font-size: 15px; }
.tr-ergebnis__zahl b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.tr-ergebnis .tr-mikro { margin-top: 12px; }
.tr-liste { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.tr-liste li { margin: 0 0 4px; }
.tr-liste__falsch { text-decoration: line-through; color: var(--akzent-text); }

@media print {
  .tr-zoom, .tr-knoepfe, .tr-hinweis, .tr-arten { display: none; }
  .tr-buehne { max-height: none; overflow: visible; border: 0; }
}