/* ======================================================================
   OKTOMBO USER-COCKPIT — CO-15 „Der erste Kontakt"
   Akte 1–5 (Overlay) + Akt 6 (Live-Tour / Coach-Marks) + Paper-Konto
   ====================================================================== */
/* ---------- Overlay-Grundgerüst ---------- */
.onb{ position:fixed; inset:0; z-index:140; display:flex; flex-direction:column; --oe:cubic-bezier(.32,.72,.24,1);
  background:radial-gradient(120% 70% at 50% -10%, rgba(46,151,247,.06), transparent 60%), var(--bg);
  background-color:var(--bg); }
.onb::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(11,14,20,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(11,14,20,.022) 1px,transparent 1px); background-size:34px 34px; }
.onb, .onb__stage, .onb__top, .onb__dots{ transition:opacity .45s ease, background-color .5s ease; }
.onb__top{ position:relative; z-index:2; flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:16px 20px; }
.onb__brand{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--ink-3); }
.onb__brand img{ width:22px; height:22px; object-fit:contain; animation:onbPulse 3.2s ease-in-out infinite; }
@keyframes onbPulse{ 0%,100%{ transform:scale(1); opacity:.92; } 50%{ transform:scale(1.07); opacity:1; } }
.onb__sp{ flex:1; }
.onb__lang{ display:flex; gap:2px; font-family:var(--mono); font-size:10px; }
.onb__lang button{ all:unset; cursor:pointer; padding:4px 7px; border-radius:7px; color:var(--ink-4); letter-spacing:.08em; }
.onb__lang button.on{ color:var(--ink); background:var(--sunken); }
.onb__skip{ all:unset; cursor:pointer; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-4); padding:6px 10px; border-radius:8px; }
.onb__skip:hover{ color:var(--ink-2); background:var(--sunken); }
.onb__stage{ position:relative; z-index:1; flex:1; display:flex; align-items:safe center; justify-content:center; padding:20px 22px 74px; overflow-y:auto; }
.onb__panel{ width:min(640px,100%); }
.onb__dots{ position:absolute; left:0; right:0; bottom:22px; z-index:2; display:flex; justify-content:center; gap:8px; pointer-events:none; }
.onb__dots i{ width:7px; height:7px; border-radius:50%; background:var(--ink-5); opacity:.55; transition:.3s; }
.onb__dots i.done{ opacity:.9; background:var(--ink-4); }
.onb__dots i.on{ opacity:1; background:var(--grad); box-shadow:0 0 8px rgba(46,151,247,.5); transform:scale(1.25); }
.onb__kick{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-4); margin:0 0 14px; }
.onb__kick b{ font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.onb__row{ display:flex; align-items:center; gap:10px; margin-top:26px; }
.onb__enter{ animation:onbIn .5s var(--oe) both; }
@keyframes onbIn{ from{ opacity:0; transform:translateY(10px); } }
.onb--peek{ background:rgba(237,240,245,.55); }
.onb--peek::before{ opacity:0; }
.onb--peek .onb__stage, .onb--peek .onb__top, .onb--peek .onb__dots{ opacity:0; pointer-events:none; }

/* ---------- Akt 1 · These ---------- */
.onb-thesis{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4.6vw,50px); letter-spacing:-.03em; line-height:1.14; color:var(--ink); margin:0; max-width:15em; text-wrap:pretty; cursor:default; }
.onb-thesis .gx{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.onb-thesis--law{ font-size:clamp(22px,3.4vw,36px); }
.onb-thesis__law{ display:block; margin-top:18px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; line-height:1.7; color:var(--ink-3); text-transform:none; }
.onb-tapline{ margin:26px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-5); }

/* ---------- Akt 2 · Beweis ---------- */
.onb-glass{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0 18px; }
.onb-glass__cell{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:16px 18px 14px; }
.onb-glass__cell b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,34px); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.onb-glass__cell span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); }
.onb-proofline{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-3); max-width:46em; }
.onb-proofline b{ color:var(--ink); font-weight:600; }

/* ---------- Akt 3 · Reise (nutzt rm-* aus roadmap.css) ---------- */
.onb-rail{ margin:16px 0 20px; max-width:400px; }
.onb-rail .rm-charge{ transition:height 1.8s var(--oe); }
.onb-rail .rm-charge__comet{ opacity:0; transition:opacity .3s; }
.onb-rail.lit .rm-charge__comet{ opacity:1; }
.onb-journey{ margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-2); max-width:34em; }
.onb-journey b{ font-weight:600; }

/* ---------- Akt 4 · Paper-Konto ---------- */
.onb-cap__expl{ margin:0; font-size:14px; line-height:1.65; color:var(--ink-2); max-width:40em; }
.onb-cap__expl i{ font-style:italic; color:var(--ink); }
.onb-cap__rec{ margin:18px 0 22px; font-family:var(--display); font-weight:600; font-size:clamp(17px,2.2vw,21px); letter-spacing:-.012em; line-height:1.45; color:var(--ink); max-width:30em; text-wrap:pretty; }
.onb-cap__rec .gx{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.onb-amt{ display:flex; align-items:baseline; gap:10px; border-bottom:2px solid var(--line-2); padding-bottom:8px; max-width:340px; transition:border-color .2s; }
.onb-amt:focus-within{ border-color:var(--afferent); }
.onb-amt input{ all:unset; flex:1; min-width:0; font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.onb-amt input::placeholder{ color:var(--ink-5); font-weight:600; }
.onb-amt span{ font-family:var(--display); font-weight:600; font-size:22px; color:var(--ink-4); }
.onb-presets{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.onb-chip{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--ink-3); background:var(--surface); border:1px solid var(--line-2); border-radius:99px; padding:6px 13px; cursor:pointer; transition:.14s; }
.onb-chip:hover{ border-color:var(--line-3); color:var(--ink); }
.onb-chip.on{ color:var(--ink); border-color:var(--ink); }
.onb-caphint{ min-height:18px; margin:12px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--ink-4); transition:opacity .25s; }
.onb-capnote{ margin:8px 0 0; font-size:11.5px; color:var(--ink-4); }
.onb-fly{ position:fixed; z-index:146; display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line-2); border-radius:99px; padding:7px 13px; font-family:var(--mono); font-size:11px; color:var(--ink-2); box-shadow:var(--sh-3); white-space:nowrap; transition:transform .95s var(--oe), opacity .3s ease .8s; will-change:transform; }
.onb-fly i{ width:7px; height:7px; border-radius:50%; background:var(--grad); flex:0 0 auto; }
.onb-navpulse{ position:relative; }
.onb-navpulse::after{ content:""; position:absolute; inset:-3px; border-radius:12px; border:1.5px solid rgba(46,151,247,.65); animation:onbNavPing 1s ease-out 3; pointer-events:none; }
@keyframes onbNavPing{ 0%{ transform:scale(.85); opacity:1; } 100%{ transform:scale(1.25); opacity:0; } }

/* ---------- Akt 5 · Rolle ---------- */
.onb-roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 14px; }
.onb-role{ all:unset; box-sizing:border-box; cursor:pointer; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:16px 15px 14px; display:flex; flex-direction:column; gap:7px; transition:border-color .15s, transform .2s var(--oe); }
.onb-role:hover{ transform:translateY(-2px); border-color:var(--line-3); }
.onb-role.on{ border-color:transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box; }
.onb-role b{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.onb-role span{ font-size:12px; line-height:1.5; color:var(--ink-3); }
.onb-role svg{ width:20px; height:20px; color:var(--ink-3); }
.onb-role.on svg{ color:var(--afferent); }
.onb-rolenote{ margin:0; font-size:12px; color:var(--ink-4); }

/* ---------- Akt 6 · Live-Tour (Coach-Marks) ---------- */
.tour{ position:fixed; inset:0; z-index:140; }
.tour__hole{ position:fixed; border-radius:14px; box-shadow:0 0 0 200vmax rgba(11,14,20,.44); transition:all .55s cubic-bezier(.32,.72,.24,1); pointer-events:none; }
.tour__hole::after{ content:""; position:absolute; inset:-2px; border-radius:16px; box-shadow:0 0 0 1.5px rgba(46,151,247,.6), 0 0 24px rgba(46,151,247,.28); }
.tour__tip{ position:fixed; width:min(348px,calc(100vw - 24px)); background:var(--surface); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--sh-3); padding:15px 17px 13px; transition:top .55s cubic-bezier(.32,.72,.24,1), left .55s cubic-bezier(.32,.72,.24,1); }
.tour__kick{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; line-height:1.7; color:var(--ink-4); margin:0 0 7px; }
.tour__kick b{ font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tour__body{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.tour__body b{ color:var(--ink); font-weight:600; }
.tour__row{ display:flex; align-items:center; gap:8px; margin-top:13px; flex-wrap:wrap; }
.tour__row .btn,.tour__row .btn-primary{ white-space:nowrap; }
.tour__row .sp{ flex:1; }
.tour__end{ all:unset; cursor:pointer; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-4); padding:5px 8px; border-radius:7px; }
.tour__end:hover{ color:var(--ink-2); background:var(--sunken); }
.tour__foot{ display:flex; align-items:center; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); }

/* ---------- Paper-Konto-Flächen im Cockpit ---------- */
.upk{ display:inline-flex; align-items:center; gap:7px; margin:6px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--ink-3); }
.upk::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--grad); }
.upk b{ color:var(--ink); font-weight:600; }
button.upk{ cursor:pointer; background:var(--surface); border:1px dashed var(--line-2); border-radius:99px; padding:4px 11px; }
button.upk:hover{ border-color:var(--line-3); color:var(--ink); }
.upk-line{ margin:10px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-3); }
.upk-line b{ font-weight:600; }
.upk-cta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; border:1px dashed var(--line-2); border-radius:12px; padding:9px 12px; font-size:12px; color:var(--ink-4); }
.upk-cta span{ flex:1; min-width:180px; line-height:1.5; }

@media (max-width:640px){
  .onb__stage{ align-items:flex-start; padding-top:8vh; }
  .onb-glass{ grid-template-columns:1fr 1fr; gap:10px; }
  .onb-roles{ grid-template-columns:1fr; }
  .onb__row{ flex-wrap:wrap; }
  .tour__tip{ padding:13px 14px 11px; }
}
@media (prefers-reduced-motion:reduce){
  .onb__brand img{ animation:none; }
  .onb__enter{ animation:none; }
  .onb-rail .rm-charge{ transition:none; }
  .onb-fly{ transition:opacity .2s; }
  .tour__hole,.tour__tip{ transition:none; }
}