/* =====================================================================
   FUTURE TRADER — Globales Design-System (HUD / Sci-Fi, "cinematic & nutzbar")
   Marken-Tokens siehe assets/js/tailwind.config.js
   ===================================================================== */

:root{
  --void:#030303;
  --panel:#0a0a0c;
  --panel2:#121216;
  --orange:#FF5E00;
  --orange-glow:#FF8C42;
  --white:#F4F4F5;
  --border:#222225;
  --dim:#9aa0ab;
  --dimmer:#6b6b73;
  --alert:#FF003C;
  --success:#34d399;
  --panel-bg:rgba(10,10,12,.82);
  --nav-h:72px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter',sans-serif;
  background-color:#000;
  color:var(--white);
  margin:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
}

::selection{ background:var(--orange); color:var(--void); }

/* --- Scrollbar --- */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#050505; }
::-webkit-scrollbar-thumb{ background:#2a2a2e; border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--orange); }

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

h1,h2,h3,h4{ font-weight:900; letter-spacing:-.02em; line-height:1.05; }

/* Skip link (Barrierefreiheit) */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10001;
  background:var(--orange); color:#000; padding:.7rem 1.2rem; font-weight:800;
  font-family:'JetBrains Mono',monospace;
}
.skip-link:focus{ left:8px; top:8px; }

/* =====================================================================
   HINTERGRUND-EBENEN (fixiert)
   ===================================================================== */
.bg-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:-3; pointer-events:none; opacity:.85; }
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-size:46px 46px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse at center, #000 0%, transparent 78%);
}
.bg-vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 0%, transparent 55%, #030303 130%);
}
.bg-scanlines{
  position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.5;
  background:linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.18) 50%);
  background-size:100% 4px;
}

/* =====================================================================
   HUD-PANEL & SCI-FI-FORMEN
   ===================================================================== */
.hud-panel{
  background:var(--panel-bg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.06);
  position:relative;
}
.hud-panel::after{
  content:''; position:absolute; top:0; left:0; width:34%; height:2px;
  background:linear-gradient(90deg, var(--orange), transparent);
}
.hud-panel--plain::after{ display:none; }

.clip-tl{ clip-path:polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px); }
.clip-br{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.clip-both{ clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }

.neon-box{
  box-shadow:0 0 14px rgba(255,94,0,.18), inset 0 0 18px rgba(255,94,0,.07);
  border:1px solid rgba(255,94,0,.45);
}
.neon-text{
  color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.5), 0 0 22px var(--orange), 0 0 48px rgba(255,94,0,.55);
}
.glow-text{ text-shadow:0 0 10px rgba(255,94,0,.55); }

.warning-strip{
  height:4px; width:100%;
  background:repeating-linear-gradient(45deg, #050505, #050505 10px, var(--orange) 10px, var(--orange) 20px);
}

/* kicker / eyebrow label */
.kicker{
  font-family:'Share Tech Mono',monospace; color:var(--orange);
  text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
  display:inline-flex; align-items:center; gap:.55rem;
}
.kicker::before{ content:''; width:26px; height:1px; background:var(--orange); display:inline-block; }

.mono{ font-family:'JetBrains Mono',monospace; }
.tech{ font-family:'Share Tech Mono',monospace; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:'JetBrains Mono',monospace; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; font-size:.82rem;
  padding:.85rem 1.5rem; cursor:pointer; border:1px solid transparent;
  position:relative; overflow:hidden; transition:all .2s ease; white-space:nowrap;
  min-height:44px;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:focus-visible{ outline:2px solid var(--orange-glow); outline-offset:3px; }

/* Primär – Tactical */
.btn-tactical{
  background:rgba(255,94,0,.06); border-color:var(--orange); color:var(--orange);
  z-index:1;
}
.btn-tactical::before{
  content:''; position:absolute; inset:0; left:-100%;
  background:var(--orange); z-index:-1;
  transition:transform .35s cubic-bezier(.75,0,.125,1); transform:skewX(-14deg);
}
.btn-tactical:hover,.btn-tactical:focus-visible{ color:#000; background:var(--orange); box-shadow:0 0 22px rgba(255,94,0,.4); }
.btn-tactical:hover::before{ transform:skewX(-14deg) translateX(115%); }

/* Solid */
.btn-solid{ background:var(--orange); color:#000; border-color:var(--orange); }
.btn-solid:hover{ background:var(--orange-glow); border-color:var(--orange-glow); box-shadow:0 0 26px rgba(255,94,0,.5); }

/* Ghost */
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--white); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); box-shadow:0 0 16px rgba(255,94,0,.18); }

.btn-lg{ padding:1.05rem 2rem; font-size:.92rem; }
.btn-block{ width:100%; }

/* "Link folgt"-Zustand (Platzhalter aktiv) */
.btn[data-pending="1"]{ cursor:not-allowed; opacity:.85; }
.btn[data-pending="1"]::after{
  content:'· LINK FOLGT'; font-size:.62rem; margin-left:.5rem; opacity:.7; letter-spacing:.1em;
}

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(3,3,3,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:background .3s, border-color .3s;
}
.site-header.scrolled{ background:rgba(3,3,3,.92); border-bottom-color:rgba(255,94,0,.35); }
.nav-inner{
  width:100%; max-width:1320px; margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ width:38px; height:38px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text .b1{ font-family:'JetBrains Mono',monospace; font-weight:800; font-size:1.02rem; letter-spacing:.02em; color:var(--white); }
.brand-text .b2{ font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.34em; color:var(--orange); text-transform:uppercase; margin-top:3px; }

.nav-links{ display:flex; align-items:center; gap:.3rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:600;
  color:var(--dim); text-transform:uppercase; letter-spacing:.04em;
  padding:.55rem .8rem; position:relative; transition:color .2s;
}
.nav-links a::after{
  content:''; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--white); }
.nav-links a.active::after{ transform:scaleX(1); }

.nav-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-toggle{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); color:var(--orange); cursor:pointer;
}
.nav-toggle:focus-visible{ outline:2px solid var(--orange-glow); outline-offset:2px; }
.nav-toggle span{ display:block; width:20px; height:2px; background:currentColor; position:relative; transition:.2s; }
.nav-toggle span::before,.nav-toggle span::after{ content:''; position:absolute; left:0; width:20px; height:2px; background:currentColor; transition:.25s; }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Mobile menü */
.mobile-menu{
  position:fixed; top:var(--nav-h); left:0; width:100%; z-index:999;
  background:rgba(3,3,3,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--orange); padding:1rem 1.5rem 1.5rem;
  transform:translateY(-120%); transition:transform .35s cubic-bezier(.16,1,.3,1);
  max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.mobile-menu.open{ transform:translateY(0); }
/* Nav-Link-Styling nur für echte Menü-Links, NICHT für Buttons (.btn) im Menü */
.mobile-menu a:not(.btn){
  display:block; font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--white); padding:.95rem .4rem; border-bottom:1px solid var(--border);
  font-size:1rem;
}
.mobile-menu a:not(.btn):hover,.mobile-menu a:not(.btn).active{ color:var(--orange); }

/* =====================================================================
   LAYOUT-HELFER
   ===================================================================== */
.wrap{ max-width:1320px; margin:0 auto; padding:0 1.5rem; }
.wrap-narrow{ max-width:880px; margin:0 auto; padding:0 1.5rem; }
.section{ padding:5.5rem 0; position:relative; }
.section-sm{ padding:3.5rem 0; }
main{ position:relative; z-index:1; }
.page-top{ padding-top:calc(var(--nav-h) + 3rem); }

.section-head{ margin-bottom:3rem; }
.section-head h2{ font-size:clamp(2rem,5vw,3.2rem); margin:.8rem 0 0; }
.section-head p{ color:var(--dim); max-width:640px; margin:1rem 0 0; }

/* =====================================================================
   KARTEN
   ===================================================================== */
.card{
  background:var(--panel-bg); border:1px solid var(--border); position:relative;
  transition:transform .25s, border-color .25s, box-shadow .25s; overflow:hidden;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(255,94,0,.5); box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,94,0,.15); }
.card-accent::before{
  content:''; position:absolute; top:0; left:0; height:3px; width:0; background:var(--orange);
  transition:width .3s ease;
}
.card-accent:hover::before{ width:100%; }

.badge{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; padding:.28rem .6rem; border:1px solid var(--border);
  color:var(--dim); background:rgba(255,255,255,.02);
}
.badge-orange{ color:var(--orange); border-color:rgba(255,94,0,.45); background:rgba(255,94,0,.07); }
.badge-soon{ color:var(--orange-glow); border-color:rgba(255,140,66,.4); background:rgba(255,140,66,.08); }

/* Stat / KPI */
.stat-num{ font-family:'Share Tech Mono',monospace; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--orange); line-height:1; }
.stat-label{ font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); margin-top:.5rem; }

/* =====================================================================
   FORMULARE
   ===================================================================== */
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-bottom:.5rem; }
.input,.textarea,select.input{
  width:100%; background:#070709; border:1px solid var(--border); color:var(--white);
  padding:.85rem 1rem; font-family:'JetBrains Mono',monospace; font-size:.9rem; transition:border-color .2s, box-shadow .2s;
}
.input::placeholder,.textarea::placeholder{ color:#54545c; }
.input:focus,.textarea:focus,select.input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,94,0,.12); }
.textarea{ min-height:140px; resize:vertical; }
.form-note{ font-size:.72rem; color:var(--dimmer); font-family:'JetBrains Mono',monospace; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ border-top:1px solid var(--border); background:rgba(5,5,6,.6); position:relative; z-index:1; margin-top:2rem; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding:3.5rem 0 2.5rem; }
.footer-col h4{ font-family:'Share Tech Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--orange); margin:0 0 1.1rem; font-weight:400; }
.footer-col a{ display:block; color:var(--dim); font-size:.86rem; padding:.32rem 0; transition:color .2s; }
.footer-col a:hover{ color:var(--orange); }
.footer-brand p{ color:var(--dim); font-size:.86rem; max-width:320px; margin:1rem 0 0; }
.footer-bottom{ border-top:1px solid var(--border); padding:1.3rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-bottom .disclaimer{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--dimmer); max-width:760px; line-height:1.7; }
.barcode{ display:flex; height:24px; align-items:center; gap:1px; opacity:.35; }
.barcode i{ display:block; height:100%; background:var(--white); }

/* =====================================================================
   INTRO-OVERLAY (nur Startseite, überspringbar)
   ===================================================================== */
#intro{
  position:fixed; inset:0; z-index:10000; background:#030303;
  display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.5rem,5vw,4rem);
  transition:opacity .5s ease;
}
#intro .intro-title{ font-family:'Share Tech Mono',monospace; color:var(--orange); font-size:clamp(2rem,6vw,4rem); letter-spacing:-.02em; }
#intro .intro-sub{ font-family:'JetBrains Mono',monospace; color:var(--dim); font-size:.8rem; margin-top:.4rem; }
#intro .intro-lines{ margin-top:2rem; font-family:'Share Tech Mono',monospace; color:var(--orange); font-size:.85rem; min-height:120px; }
#intro .intro-lines div{ margin-bottom:.35rem; text-shadow:0 0 6px rgba(255,94,0,.5); opacity:0; }
#intro .intro-lines div.show{ opacity:1; }
.intro-skip{
  position:absolute; top:1.5rem; right:1.5rem; font-family:'JetBrains Mono',monospace; font-size:.72rem;
  color:var(--dim); border:1px solid var(--border); padding:.5rem .9rem; cursor:pointer; background:transparent;
  text-transform:uppercase; letter-spacing:.1em;
}
.intro-skip:hover{ color:var(--orange); border-color:var(--orange); }

/* =====================================================================
   APP-WRAPPER (Training Hub iframes)
   ===================================================================== */
.app-frame-wrap{ position:relative; border:1px solid var(--border); background:#000; }
.app-frame-wrap iframe{ width:100%; height:calc(100vh - var(--nav-h) - 40px); min-height:680px; border:0; display:block; }
.cta-band{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.1rem 1.4rem; border:1px solid var(--border); background:rgba(10,10,12,.7);
}
.cta-band p{ margin:0; color:var(--dim); font-family:'JetBrains Mono',monospace; font-size:.84rem; }

/* =====================================================================
   RECHTSTEXTE / LEGAL
   ===================================================================== */
.legal{ color:var(--dim); font-size:.95rem; }
.legal h2{ color:var(--white); font-size:1.35rem; margin:2.4rem 0 .8rem; }
.legal h3{ color:var(--white); font-size:1.05rem; margin:1.6rem 0 .6rem; }
.legal p{ margin:0 0 1rem; }
.legal ul{ margin:0 0 1.1rem 1.3rem; }
.legal li{ margin-bottom:.45rem; }
.legal a{ color:var(--orange); }
.legal a:hover{ text-decoration:underline; }
.legal strong{ color:var(--white); }
.legal hr{ border:none; border-top:1px solid var(--border); margin:2rem 0; }
/* Klar markierter Platzhalter zum Ausfüllen */
.ph{ background:rgba(255,94,0,.12); border:1px dashed rgba(255,94,0,.55); color:var(--orange-glow);
     padding:.05rem .45rem; font-family:'JetBrains Mono',monospace; font-size:.85em; border-radius:2px; }
.legal-note{ border:1px solid rgba(255,94,0,.4); background:rgba(255,94,0,.06); padding:1rem 1.2rem; margin-bottom:2rem;
     font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--dim); }

/* =====================================================================
   SCROLL-REVEAL
   ===================================================================== */
/* Nur wenn JS aktiv ist (html.js), starten Reveals versteckt — sonst immer sichtbar (No-JS/SEO-Fallback). */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.js .reveal.in{ opacity:1; transform:none; }

/* =====================================================================
   ANIMATIONEN
   ===================================================================== */
@keyframes pulseBar{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.float{ animation:floaty 6s ease-in-out infinite; }
.blink{ animation:blink 1.4s steps(1) infinite; }

.live-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); animation:blink 1.6s ease-in-out infinite; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:860px){
  .nav-links,.nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .section{ padding:4rem 0; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
  .app-frame-wrap iframe{ height:calc(100vh - var(--nav-h)); }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .bg-canvas{ display:none; }
}