/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  BRIAN Modul-Orbit — gekapselte Komponente                         ║
   ║  · alle Klassen mo-* (kollisionsfrei via Prefix)                   ║
   ║  · nutzt Host-:root-Variablen (--ink/--red/--data/--mut/--line/…)  ║
   ║  · data-driven: window.BrianModulOrbit.frame(p,out) von außen      ║
   ║  · Bühne, Fenster und Kopf sind 1:1 die Journey-Maße:              ║
   ║    .screen-pos/.screen (Scrollpose) und das .narr-Band             ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* z 51: über der Stories-Bühne (50), unter dem Konfigurator (52), der ihn ablöst */
#modulorbit{position:fixed;inset:0;z-index:51;opacity:0;pointer-events:none;background:#fcfcfd;
  font-family:var(--sans);color:var(--ink);overflow:hidden}

/* ── Kopf: exakt das Narrations-Band der Journey (.narr/.say) —
   gleiche Höhe, gleiche Typo, keine Oberüberschrift (Orientierung
   tragen Navbar + Kapitel-Label, wie in den Phasen 01–04) ── */
.mo-head{position:absolute;top:0;left:0;right:0;z-index:5;height:25vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;text-align:center;padding:54px 30px 0;
  will-change:transform,opacity;opacity:0;pointer-events:none}
.mo-say{font-size:clamp(20px,2.3vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.22;
  color:var(--ink);max-width:740px}
.mo-hl{color:var(--red)}
.mo-sub{font-size:14px;line-height:1.55;color:var(--mut);max-width:64ch}

/* ── Bühne + Fenster: exakt .screen-pos/.screen der Journey ── */
.mo-stage{position:absolute;inset:0;margin:auto;width:min(1200px,92vw);height:min(66vh,640px);
  /* margin:auto statt translate(-50%,-50%): der Halbpixel-Versatz des Transforms
     rasterte die gesamte Fensterebene weich */
  perspective:1600px;z-index:2}
.mo-screen{width:100%;height:100%;transform-origin:center center;will-change:transform,opacity;
  display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#fff;
  box-shadow:0 50px 130px -45px rgba(14,56,85,.45),0 8px 26px -12px rgba(14,56,85,.2)}

.mo-chrome{display:flex;align-items:center;gap:8px;padding:13px 18px;background:#f3f5f7;
  border-bottom:1px solid var(--line);flex-shrink:0}
.mo-tl{display:flex;gap:7px}
.mo-tl i{width:11px;height:11px;border-radius:50%;display:block}
.mo-tl i:nth-child(1){background:#e2564e}
.mo-tl i:nth-child(2){background:#e2b04e}
.mo-tl i:nth-child(3){background:#5ec27a}
.mo-url{margin-left:14px;font-family:var(--mono);font-size:11px;color:var(--mut-2);background:#fff;
  border:1px solid var(--line);padding:5px 13px;border-radius:7px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-live{margin-left:auto;flex-shrink:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:#3a9d63;display:flex;align-items:center;gap:7px;white-space:nowrap}
.mo-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#5ec27a;
  box-shadow:0 0 8px #5ec27a}
/* Punkt pulst, wenn ein weiteres Modul angedockt hat (wie im Journey-Chrome) */
.mo-live.mo-blink::before{animation:moPulseDot .6s ease}
@keyframes moPulseDot{0%{transform:scale(1)}40%{transform:scale(1.9)}100%{transform:scale(1)}}

/* Diagrammfläche: identischer Verlauf + Punktraster wie .diagram in der Journey */
.mo-body{position:relative;flex:1;overflow:hidden;
  background:radial-gradient(560px 440px at 50% 50%,rgba(43,123,176,.10),transparent 64%),
             linear-gradient(180deg,#fdfefe,#f5f9fb)}
.mo-body::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(14,56,85,.045) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 82%);
          mask-image:radial-gradient(circle at 50% 50%,#000,transparent 82%)}
.mo-cv{position:absolute;inset:0;width:100%;height:100%}
/* Kern-Beschriftung: sitzt unter dem B (Kern liegt bei 52 % der Fläche).
   Zentrierung über text-align statt translate(-50%) — der Halbpixel-Versatz
   des Transforms machte die Zeile auf der gekippten Ebene unscharf. */
.mo-core-l{position:absolute;left:0;right:0;top:52%;margin-top:34px;text-align:center;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);white-space:nowrap;
  opacity:0;pointer-events:none;will-change:opacity}

/* ── Klick-/Fokus-Ebene über dem Canvas ──
   Ein <a> pro Modul, pro Frame nur per transform bewegt (kein Layout).
   Zentrierung steckt im negativen margin, damit transform frei bleibt. */
.mo-hits{position:absolute;inset:0;pointer-events:none}
.mo-hit{position:absolute;left:0;top:0;width:120px;height:64px;margin:-32px 0 0 -60px;
  border-radius:12px;display:block;cursor:pointer;text-decoration:none;
  will-change:transform,opacity;opacity:0}
.mo-hit span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}   /* Name für Screenreader, visuell trägt ihn das Canvas */
.mo-hit:focus{outline:none}
.mo-hit:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ── Abschlusszeile: am unteren Viewport-Rand — exakt dort, wo in der Journey
   der Stepper (Schritte 01–04) sitzt (#stepper: bottom 26px, zentriert) ── */
.mo-outro{position:absolute;left:0;right:0;bottom:26px;z-index:6;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.6;color:var(--mut);
  text-align:center;padding:0 24px;opacity:0;will-change:transform,opacity;pointer-events:none}

/* Mobile: Fenster aufrecht — die Kipp-Perspektive trägt auf kleinen Schirmen nicht */
@media(max-width:759px){
  /* Kopfband: Höhe folgt dem Inhalt (25vh war zu knapp — der Text lief in die Navbar) */
  .mo-head{height:auto;min-height:0;padding:80px 18px 0;gap:7px}
  .mo-say{font-size:19px;line-height:1.25}
  .mo-sub{font-size:12.5px;line-height:1.5}
  /* Fenster: gleiche Mobil-Höhe wie Journey-Screen und Konfigurator */
  .mo-stage{perspective:none;height:clamp(320px,calc(100vh - 310px),600px);height:clamp(320px,calc(100svh - 310px),600px)}
  .mo-chrome{padding:10px 12px}
  .mo-url{margin-left:8px;font-size:10px;padding:4px 8px}
  .mo-live{font-size:9px;letter-spacing:.06em}
  .mo-core-l{font-size:9px;margin-top:30px}
  /* Abschlusszeile: rechts von der Zurück-Pille */
  .mo-outro{bottom:14px;padding:0 16px 0 64px;font-size:10.5px;line-height:1.45;letter-spacing:.02em;text-align:left}
}
/* Kurze Handy-Schirme: der Kern-Schriftzug kollidiert dort mit den Modulnamen an den Seiten */
@media(max-width:759px) and (max-height:720px){
  .mo-core-l{display:none}
}
/* Bewegungsarme Darstellung: kein Punkt-Blinken */
@media(prefers-reduced-motion:reduce){
  .mo-live.mo-blink::before{animation:none}
}