/* ======================================================================
   OKTOMBO — LAUNCH OVERLAY (Design-Handoff 1:1, komponenten-gescopet)
   Quelle: design_handoff_launch_overlay/"Oktombo Launch Overlay.html"
   Abweichungen vom Original — bewusst, dokumentiert, wertneutral:
     1. Alle Regeln unter #launchLock gescopet. GRUND [BELEGT]: tokens.css
        definiert :root{--bg:#F1F4F8}; ungescopet haette das Overlay das
        Cockpit-Theme umgefaerbt. Werte/Easings/Timings unveraendert.
     2. z-index 10 -> 310. GRUND [BELEGT]: .loader liegt auf z300,
        .login auf z200. Registrierte Klickblocker-Ausnahme (s. Spec).
     3. @keyframes patrolX/patrolY/blink -> loPatrolX/loPatrolY/loBlink
        (Namensraum-Schutz; Keyframe-Inhalte identisch).
     4. Layer 0 (.behind) entfernt — das echte Login liegt darunter.
     5. Alle Overlay-Klassen mit lo- praefixiert. GRUND [BELEGT]: user.css
        definiert global .themebtn{position:absolute;top:14px;right:14px;
        z-index:220} — der Toggle waere aus der .tools-Zeile gerissen worden.
        Praefix = strukturelle Immunitaet statt Einzelfall-Reparatur.
     6. Font-Stacks um var(--display)/var(--mono) als Fallback ergaenzt.
   ====================================================================== */
/* ============ TOKENS — identical to Login + Loader v7 ============ */
#launchLock{--bg:#05070D;--bg2:#070A12;--panel:#0C1119;--field:#0B101A;--rule:#1C2735;--tx:#E7EDF4;--mut:#71829A;--mut2:#4A5A70;--glow:rgba(56,150,240,.14);--lift:none;--veil1:rgba(7,10,18,.88);--veil2:rgba(5,7,13,.945);--scrim:rgba(5,7,13,.74);--hair:rgba(120,195,255,.42)}
[data-theme="day"] #launchLock{--bg:#F2F5F9;--bg2:#EDF1F7;--panel:#FFFFFF;--field:#FFFFFF;--rule:#DCE3EE;--tx:#141A26;--mut:#5A6980;--mut2:#8B98AC;--glow:rgba(70,110,200,.12);--lift:0 2px 10px rgba(30,50,90,.08);--veil1:rgba(237,241,247,.90);--veil2:rgba(242,245,249,.945);--scrim:rgba(244,247,251,.7);--hair:rgba(46,151,247,.42)}
/* aus dem Original zurueckgeholt: a{text-decoration:none} — beim Scopen
   faelschlich als Layer-0-Beiwerk verworfen, per Sichtpruefung gefunden. */
#launchLock a{text-decoration:none}
#launchLock .lo-mono{font-family:'JetBrains Mono',var(--mono,monospace);font-variant-numeric:tabular-nums}
/* ============ LAYER 0 · the real login surface — visible, blurred, blocked ============ */
/* ============ LOCKDOWN OVERLAY ============ */
#launchLock{position:fixed;inset:0;z-index:310;transition:opacity .9s ease,visibility .9s}
#launchLock.gone{opacity:0;visibility:hidden;pointer-events:none}
#launchLock .lo-veil{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0%,var(--veil1),var(--veil2) 70%);transition:background .45s ease}
/* ---- the loader · login scale, patrolling the whole screen (pure GPU transform) ---- */
#launchLock .lo-fx{--s:min(76vmin,460px);--rx:calc(50vw - var(--s)/2 - 22px);--ry:calc(50vh - var(--s)/2 - 22px);
position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);
pointer-events:none;will-change:transform;animation:loPatrolX 79s cubic-bezier(.42,0,.58,1) -39.5s infinite alternate}
#launchLock .lo-fx__in{position:absolute;inset:0;will-change:transform;animation:loPatrolY 53s cubic-bezier(.42,0,.58,1) -26.5s infinite alternate}
@keyframes loPatrolX{from{transform:translate3d(calc(var(--rx)*-1),0,0)}to{transform:translate3d(var(--rx),0,0)}}
@keyframes loPatrolY{from{transform:translate3d(0,calc(var(--ry)*-.94),0)}to{transform:translate3d(0,calc(var(--ry)*.94),0)}}
#launchLock #loFxc{width:100%;height:100%;display:block;transform:translateZ(0);backface-visibility:hidden}
/* ============ UI ============ */
#launchLock .lo-ui{--safe-top:max(22px,calc(env(safe-area-inset-top) + 12px));--safe-bot:max(clamp(20px,4vh,40px),calc(env(safe-area-inset-bottom) + 16px));--safe-x:clamp(18px,4vw,46px);
position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:var(--safe-top) max(var(--safe-x),env(safe-area-inset-right)) var(--safe-bot) max(var(--safe-x),env(safe-area-inset-left))}
#launchLock .lo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#launchLock .lo-brand{display:flex;align-items:center;gap:12px}
#launchLock .lo-brand img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 0 14px var(--glow))}
#launchLock .lo-brand b{display:block;font-size:13.5px;font-weight:700;letter-spacing:.22em;padding-left:.22em}
#launchLock .lo-brand span{display:block;font-family:'JetBrains Mono',var(--mono,monospace);font-size:7.5px;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--mut2);margin-top:5px}
#launchLock .lo-tools{display:flex;align-items:center;gap:2px}
#launchLock .lo-tbtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--mut2);-webkit-tap-highlight-color:transparent;transition:color .25s}
#launchLock .lo-tbtn svg{width:14.5px;height:14.5px;fill:currentColor}
#launchLock .lo-tbtn:hover,#launchLock .lo-tbtn:focus-visible{color:var(--tx);outline:none}
#launchLock .lo-themebtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--mut2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s}
#launchLock .lo-themebtn:hover{color:var(--mut)}
#launchLock .lo-themebtn .lo-ico{position:relative;width:17px;height:17px}
#launchLock .lo-themebtn svg{position:absolute;inset:0;width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;transition:opacity .3s,transform .5s cubic-bezier(.22,1,.36,1)}
#launchLock .lo-themebtn .lo-sun{opacity:0;transform:rotate(-60deg) scale(.6)}
[data-theme="day"] #launchLock .lo-themebtn .lo-sun{opacity:1;transform:none}
[data-theme="day"] #launchLock .lo-themebtn .lo-moon{opacity:0;transform:rotate(60deg) scale(.6)}
#launchLock .lo-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(18px,3.2vh,34px)}
#launchLock .lo-hero::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,116%);height:min(400px,118%);transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(50% 52% at 50% 50%,var(--scrim),transparent 72%)}
#launchLock .lo-hero>*{position:relative}
#launchLock .lo-cd{display:flex;align-items:flex-start;justify-content:center}
#launchLock .lo-cd__u{display:flex;flex-direction:column;align-items:center;gap:clamp(9px,1.2vh,14px);padding:0 clamp(15px,2vw,30px)}
#launchLock .lo-cd__u+.lo-cd__u{border-left:1px solid var(--rule)}
#launchLock .lo-cd__v{font-size:clamp(32px,4.6vw,64px);font-weight:400;line-height:.9;letter-spacing:.005em;font-variant-numeric:tabular-nums;will-change:opacity}
#launchLock .lo-cd__l{font-family:'JetBrains Mono',var(--mono,monospace);font-size:clamp(6.6px,.62vw,8px);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:var(--mut2)}
#launchLock .lo-say{font-family:'JetBrains Mono',var(--mono,monospace);font-size:clamp(9.5px,.86vw,11px);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center}
#launchLock .lo-say .lo-dots{display:inline-block;width:0;overflow:visible;white-space:nowrap}
#launchLock .lo-say .lo-dots span{animation:loBlink 1.5s infinite}
#launchLock .lo-say .lo-dots span:nth-child(2){animation-delay:.24s}
#launchLock .lo-say .lo-dots span:nth-child(3){animation-delay:.48s}
@keyframes loBlink{0%,60%,100%{opacity:.18}30%{opacity:1}}
#launchLock .lo-enter{display:none;height:46px;padding:0 26px;align-items:center;gap:10px;border:0;border-radius:999px;cursor:pointer;font-family:'Space Grotesk',var(--display,sans-serif);font-weight:600;font-size:14.5px;color:#fff;background:linear-gradient(100deg,#1FE0B0,#2E97F7 34%,#7B5BF5 64%,#EC4B92);box-shadow:0 6px 22px rgba(70,110,220,.25)}
#launchLock.live .lo-enter{display:inline-flex}
/* documents — names only, divider language of the countdown */
#launchLock .lo-docs{display:flex;justify-content:center;align-items:stretch}
#launchLock .lo-doc{position:relative;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 clamp(18px,2.7vw,42px);font-family:'Space Grotesk',var(--display,sans-serif);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--mut2);-webkit-tap-highlight-color:transparent;transition:color .3s ease}
#launchLock .lo-doc+.lo-doc{border-left:1px solid var(--rule)}
#launchLock .lo-doc::after{content:"";position:absolute;left:clamp(18px,2.7vw,42px);right:clamp(18px,2.7vw,42px);bottom:9px;height:1px;background:linear-gradient(90deg,transparent,#2E97F7,#7B5BF5,transparent);transform:scaleX(0);transition:transform .45s cubic-bezier(.22,1,.36,1)}
#launchLock .lo-doc:hover,#launchLock .lo-doc:focus-visible{color:var(--tx);outline:none}
[data-theme="night"] #launchLock .lo-doc:hover,[data-theme="night"] #launchLock .lo-doc:focus-visible{text-shadow:0 0 24px rgba(120,195,255,.45)}
#launchLock .lo-doc:hover::after,#launchLock .lo-doc:focus-visible::after{transform:scaleX(1)}
@media (max-width:620px){
#launchLock .lo-ui{--safe-x:16px}
#launchLock .lo-brand span{display:none}
#launchLock .lo-hero{gap:22px}
#launchLock .lo-cd__v{font-size:11.4vw;line-height:.88}
#launchLock .lo-cd__u{padding:0 clamp(10px,3.4vw,20px);gap:10px}
#launchLock .lo-cd__l{font-size:6.4px;letter-spacing:.2em;padding-left:.2em}
#launchLock .lo-say{font-size:9px;letter-spacing:.34em;padding-left:.34em}
#launchLock .lo-docs{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:420px;margin:0 auto}
#launchLock .lo-doc{height:54px;padding:0 8px;font-size:10px;letter-spacing:.16em}
#launchLock .lo-doc+.lo-doc{border-left:0}
#launchLock .lo-doc:nth-child(odd){border-right:1px solid var(--rule)}
#launchLock .lo-doc:nth-child(-n+2){border-bottom:1px solid var(--rule)}
#launchLock .lo-doc::after{left:14px;right:14px;bottom:11px}
#launchLock .lo-tbtn,#launchLock .lo-themebtn{width:44px;height:44px}
}
@media (max-width:380px){#launchLock .lo-cd__v{font-size:11vw}#launchLock .lo-cd__u{padding:0 9px}#launchLock .lo-cd__l{font-size:6px;letter-spacing:.14em;padding-left:.14em}}
@media (prefers-reduced-motion:reduce){#launchLock .lo-fx,#launchLock .lo-fx__in{animation:none}#launchLock .lo-say .lo-dots span{animation:none;opacity:.5}}
/* ---- Lock-Zustand: was unter dem Vorhang passieren darf ----------------
   Der Performance-Vertrag des Handoffs verlangt EIN bewegtes Canvas.
   #loader (eigenes Canvas, dpr bis 6) wird hart abgeschaltet; das
   Login-Panel bleibt als statisch geblurrte Flaeche stehen (Schritt 3). */
html.okto-lock, html.okto-lock body{overflow:hidden}
html.okto-lock #loader{display:none!important}
html.okto-lock .login{filter:blur(9px);transform:translateZ(0);pointer-events:none;user-select:none}
html.okto-lock #shell{display:none!important}
/* ---- Crew-Punkt: unauffaellig, aber sicher treffbar ------------------- */
#launchPeek{position:fixed;right:10px;bottom:10px;z-index:320;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:.22;transition:opacity .3s ease}
#launchPeek:hover,#launchPeek:focus-visible{opacity:.85;outline:none}
#launchPeek i{display:block;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(100deg,#1FE0B0,#2E97F7 34%,#7B5BF5 64%,#EC4B92);transition:transform .3s ease}
#launchPeek:hover i{transform:scale(1.25)}
#launchPeek.on i{transform:scale(.62)}
@media (prefers-reduced-motion:reduce){#launchPeek i{transition:none}}
/* ---- deaktivierte Dokumentnamen (Ziel existiert noch nicht) ----------- */
#launchLock .lo-doc.lo-is-soon{opacity:.4;pointer-events:none;cursor:default}
/* ===== Zugangscode — die stille Tuer =================================== */
#launchLock .lo-gate{ position:relative; width:min(430px,78vw); margin:0 auto; }
#launchLock .lo-code{ width:100%; background:none; border:0; outline:none;
  display:block; text-align:center; font-family:'JetBrains Mono',var(--mono,monospace);
  font-size:clamp(17px,4.2vw,24px); font-weight:600; letter-spacing:.30em;
  text-indent:.30em; color:var(--tx); caret-color:#2E97F7;
  padding:10px 0 16px; -webkit-appearance:none; border-radius:0; }
#launchLock .lo-code::placeholder{ color:var(--mut2); letter-spacing:.22em;
  text-transform:uppercase; font-weight:500; opacity:.55; }
#launchLock .lo-code:disabled{ opacity:.45; }
#launchLock .lo-gate__line{ position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rule); overflow:visible; }
#launchLock .lo-gate__line::after{ content:""; position:absolute; inset:-1px 0 auto 0; height:2px;
  background:linear-gradient(90deg,#1FE0B0,#2E97F7 34%,#7B5BF5 64%,#EC4B92);
  transform:scaleX(0); transform-origin:center;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease; opacity:.9; }
#launchLock .lo-gate:focus-within .lo-gate__line::after{ transform:scaleX(1); }
#launchLock .lo-gate.ok .lo-gate__line::after{ transform:scaleX(1);
  box-shadow:0 0 18px rgba(46,151,247,.55); }
#launchLock .lo-gate.err .lo-gate__line::after{ transform:scaleX(1);
  background:var(--dn,#EC4B92); }
#launchLock .lo-gate.err{ animation:loShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes loShake{ 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
#launchLock .lo-hint{ margin:15px 0 0; text-align:center;
  font-family:'JetBrains Mono',var(--mono,monospace); font-size:9px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; color:var(--mut2);
  transition:color .3s ease,opacity .3s ease; min-height:12px; }
#launchLock .lo-hint.ok{ color:#1FE0B0; }
#launchLock .lo-hint.err{ color:var(--dn,#EC4B92); }
#launchLock .lo-gate.ok .lo-code{ color:#1FE0B0; text-shadow:0 0 22px rgba(31,224,176,.35); }
@media (prefers-reduced-motion:reduce){
  #launchLock .lo-gate.err{ animation:none; }
  #launchLock .lo-gate__line::after{ transition:none; }
}