/* =========================================================================
   Hülle der Schulung 11.2.8 § 5 — Gestaltung der Online-Schulung 11.2.3.9 mF
   HRI-Berlin · Human Reliability Institute
   -------------------------------------------------------------------------
   Aus der Vorlage übernommen: Werkbank, Schiene, Blatt, dieselben Maße und
   dieselben Rollen (tokens.css, base.css sind unverändert kopiert).

   Die Hülle trägt Schiene und Rahmen. Kopfzeile und Wiedergabepille zeichnet
   der Kurs selbst — siehe assets/css/eingebettet.css. Grund: der iSpring-
   Player reagiert nur auf echte Zeigereingaben; eine Bedienung in der Hülle
   könnte ihn nicht auslösen und wäre eine Attrappe.

   Abweichung von der Vorlage: die Schiene führt keine Kapitelkette. Das
   Kurspaket kennt weder Kapitel noch Folientitel; an ihrer Stelle steht der
   Steckbrief der Schulung in derselben Zeilenform.
   ========================================================================= */

/* =========================================================  Gerüst  ==== */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap-shell);
  height: 100dvh;
  padding: var(--gap-shell);
  background: var(--bg-app);
  transition: grid-template-columns var(--mo-normal) var(--ease-move);
}
.app[data-rail="zu"] { grid-template-columns: 0 minmax(0, 1fr); }

/* ======================================================  Schiene  ====== */
.rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: var(--bg-rail);
  border-radius: var(--r-2xl);
}

.rail__head { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
/* Marke der Schulungsplattform: HRI × Zoning, in derselben Ecke wie dort.
   Das Zeichen liegt in zwei Fassungen vor - die dunkle traegt hellen Text,
   deshalb wird umgeschaltet statt invertiert. */
.rail__logo { width: 148px; height: auto; margin: 0 var(--sp-2) var(--sp-5); }
.rail__logo--dunkel { display: none; }
:root[data-theme="dark"] .rail__logo--hell { display: none; }
:root[data-theme="dark"] .rail__logo--dunkel { display: block; }

.rail__kicker {
  display: block;
  margin: 0 var(--sp-2) var(--sp-2);
  color: var(--brand-fg);   /* Rot als Schrift, nicht als Fläche */
}
.rail__title {
  margin: 0 var(--sp-2);
  font-size: var(--fs-lg);
  line-height: 1.16;
  letter-spacing: var(--track-display);
  color: var(--fg-strong);
}

/* ---- Fortschrittskarte: die dunkle Sonderfläche ---- */
.rail__meter {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--bg-inverse);
  color: rgba(255, 255, 255, .62);
}
.meter {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}
.meter .num {
  font-size: var(--fs-lg);
  line-height: 1;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.meter:not(:first-child) .num { font-size: var(--fs-2xs); font-weight: var(--fw-bold); }

.meter__bar {
  height: 8px;
  margin-top: var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  transition: width var(--mo-slow) var(--ease-move);
}
.meter__fill[data-full="ja"] { background: var(--ok); }

/* ---- Steckbrief statt Kapitelkette ---- */
.chain { padding: 0 var(--sp-3) var(--sp-3); }
.chain__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  color: var(--fg-subtle);
}

.fakt {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
}
.fakt + .fakt { margin-top: 2px; }
.fakt__glyph {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  background: var(--bg-fill);
  color: var(--fg-subtle);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.fakt__text b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--track-tight);
  color: var(--fg-default);
}
.fakt__sub {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--fg-subtle);
}

.rail__hinweis {
  margin: var(--sp-4) var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  color: var(--fg-subtle);
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.rail__foot {
  display: flex; gap: var(--sp-1);
  padding: var(--sp-3);
  margin: 0 var(--sp-2) var(--sp-1);
  border-top: 1px solid var(--line-subtle);
}
.rail__foot .btn {
  flex: 1;
  --btn-bg: transparent;
  --btn-fg: var(--fg-muted);
  padding: 0 var(--sp-2);
}
.rail__foot .btn:hover:not(:disabled) { --btn-bg: var(--bg-fill); --btn-fg: var(--fg-strong); }
.rail__foot .btn[aria-pressed="true"] { --btn-bg: var(--accent); --btn-fg: var(--bg-canvas); }

/* ========================================================  Bühne  ====== */
/* Die Bühne ist nur der Platz. Blatt, Kopfzeile und Wiedergabepille zeichnet
   der Kurs selbst — seine Bedienung bleibt echt und bedienbar. */
.stage {
  position: relative;
  min-width: 0; min-height: 0;
  overflow: hidden;                 /* Popups des Kurses enden an der Rundung */
  border-radius: var(--r-2xl);
}
.stage__frame {
  display: block;
  width: 100%; height: 100%;
  border: 0;
  background: transparent;
}
/* Der Schienenschalter sitzt optisch in der Kopfzeile des Kurses, liegt aber
   in der Hülle: nur sie kennt die Schiene. */
.stage__rail-schalter {
  position: absolute; z-index: 3;
  top: 11px; left: var(--sp-4);
  --btn-fg: var(--fg-muted);
}
.stage__rail-schalter:hover { --btn-bg: var(--bg-fill); --btn-fg: var(--fg-strong); }

.stage__laden {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: var(--r-2xl);
  background: var(--bg-canvas);
  color: var(--fg-subtle);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}
.stage__laden[hidden] { display: none; }

/* ==================================================  Dunkles Bild  ==== */
/* Die Vorlage kennt eine dunkle Variante und schaltet sie nur auf
   ausdrückliche Wahl. Die Farbrollen liegen bereits in tokens.css; hier
   stehen nur die zwei Stellen, die eine eigene Behandlung brauchen. */
.theme-icon { flex: none; }

/* ======================================================  Schmal  ====== */
@media (max-width: 900px) {
  /* Die Schiene verlässt hier das Raster (sie schwebt); beide Zustände haben
     deshalb genau eine Spalte — sonst schrumpft die Bühne auf null. */
  .app,
  .app[data-rail="zu"] { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; z-index: 20;
    inset: var(--gap-shell) auto var(--gap-shell) var(--gap-shell);
    width: var(--rail-w);
    box-shadow: var(--sh-3);
    transition: transform var(--mo-normal) var(--ease-move);
  }
  .app[data-rail="zu"] .rail { transform: translateX(calc(-100% - var(--gap-shell) * 2)); }
}