/* © 2026 bit Software GmbH — SkyStorm Fallen. All rights reserved. */
/* welcome.css — Gestalt der Landingpage, geteilt von welcome.html (de) und welcome-en.html (en).
   14.09.2026: aus dem Dokument herausgelöst, damit die englische Seite keine zweite
   Abschrift der Gestalt trägt, die beim nächsten Umbau driftet. */
  :root {
    --bg: #04060c;
    --ink: #e7eefb;
    --muted: #8fa3c4;
    --accent: #4db6ff;
    --accent-2: #7cf0c4;
    --line: rgba(120,150,200,0.16);
    --terran: #4a90d9;
    --delta: #ef6a2c;
    --wraith: #9a6ff0;
    --maxw: 1220px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.6; overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
  h1,h2,h3,.display { font-family: 'Oswald', 'Barlow Condensed', system-ui, sans-serif; }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
    letter-spacing: 2.5px; text-transform: uppercase; font-size: 1rem;
    padding: 0.9rem 2rem; border-radius: 2px; cursor: pointer; border: 0;
    background: linear-gradient(135deg, #4db6ff, #2e7fe6); color: #041124;
    box-shadow: 0 8px 30px rgba(60,150,240,0.35); position: relative; overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(60,150,240,0.55); filter: brightness(1.08); }
  .btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(160,190,230,0.35); box-shadow: none; backdrop-filter: blur(4px); }
  .btn.ghost:hover { border-color: var(--accent); background: rgba(77,182,255,0.08); }

  /* nav */
  header.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 100; height: 68px;
    display: flex; align-items: center; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
    border-bottom: 1px solid transparent;
  }
  header.nav.solid { background: rgba(4,6,12,0.82); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .brand { display: flex; align-items: center; gap: .7rem; font-family: 'Oswald'; font-weight: 700; font-size: 1.25rem; letter-spacing: 3px; }
  .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent)); box-shadow: 0 0 16px var(--accent); }
  .brand small { color: var(--muted); font-weight: 300; letter-spacing: 4px; }
  .nav-links { display: flex; align-items: center; gap: 2rem; }
  .nav-links a:not(.btn) { font-family: 'Barlow Condensed'; text-transform: uppercase; letter-spacing: 2px; font-size: .95rem; color: var(--muted); transition: color .15s; }
  .nav-links a:not(.btn):hover { color: var(--ink); }
  .nav-links .btn { padding: .6rem 1.4rem; font-size: .85rem; }
  .nav-links a.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2rem; padding: 0 .55rem; border: 1px solid rgba(160,190,230,.35); border-radius: 2px; color: var(--ink); font-size: .8rem; }
  .nav-links a.lang:hover { border-color: var(--accent); }

  /* hero */
  .hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
  #stars { position: absolute; inset: 0; z-index: 1; opacity: .7; }
  .hero-media { position: absolute; inset: -8% 0 0 0; z-index: 0; background: url('/content/landing/hero.webp') center/cover no-repeat; will-change: transform; }
  .hero-vig { position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(120% 90% at 70% 20%, transparent 20%, rgba(4,6,12,.55) 70%, var(--bg) 100%),
                linear-gradient(0deg, var(--bg) 2%, rgba(4,6,12,.35) 40%, rgba(4,6,12,.15) 70%); }
  .hero-content { position: relative; z-index: 3; padding-bottom: 8vh; max-width: 780px; }
  .eyebrow { font-family: 'Barlow Condensed'; color: var(--accent-2); letter-spacing: 6px; text-transform: uppercase; font-size: .9rem; margin-bottom: 1.2rem; }
  .hero h1 { font-weight: 700; font-size: clamp(3.2rem, 9vw, 7rem); line-height: .92; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
  .hero h1 .fallen { display: block; font-weight: 300; letter-spacing: 14px; background: linear-gradient(120deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero p.lead { color: #cdd9ee; font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin: 1.5rem 0 2.2rem; max-width: 40rem; }
  .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
  .hero-tags { margin-top: 1.6rem; display: flex; gap: 1.4rem; flex-wrap: wrap; color: var(--muted); font-family: 'Barlow Condensed'; letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; }
  .hero-tags span { display: flex; align-items: center; gap: .4rem; }
  .hero-tags b { color: var(--accent-2); font-weight: 600; }
  .scrollcue { position: absolute; z-index: 3; left: 50%; bottom: 1.6rem; transform: translateX(-50%); width: 22px; height: 36px; border: 2px solid rgba(180,200,235,.45); border-radius: 12px; }
  .scrollcue::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--accent-2); transform: translateX(-50%); animation: cue 1.6s ease-in-out infinite; }
  @keyframes cue { 0%,100% { opacity: 0; transform: translate(-50%,0);} 50% { opacity: 1; transform: translate(-50%,9px);} }

  /* reveal */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* lore strip */
  .lore { position: relative; text-align: center; padding: 7rem 0; border-top: 1px solid var(--line); }
  .lore .quote { font-family: 'Oswald'; font-weight: 300; font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.25; letter-spacing: 1px; max-width: 46rem; margin: 0 auto; }
  .lore .quote em { font-style: normal; color: var(--accent-2); }
  .lore .attrib { color: var(--muted); font-family: 'Barlow Condensed'; letter-spacing: 3px; text-transform: uppercase; margin-top: 1.5rem; font-size: .85rem; }

  /* section titling */
  .sec-head { max-width: 44rem; }
  .kicker { font-family: 'Barlow Condensed'; color: var(--accent); letter-spacing: 5px; text-transform: uppercase; font-size: .82rem; }
  .sec-head h2 { font-weight: 600; font-size: clamp(2rem, 4.5vw, 3.2rem); text-transform: uppercase; letter-spacing: 1px; margin: .6rem 0 .8rem; }
  .sec-head p { color: var(--muted); }

  /* faction cinematic showcases */
  .faction { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--line); }
  .faction .bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; will-change: transform; }
  .faction .scrim { position: absolute; inset: 0; z-index: 1; }
  .faction.left .scrim  { background: linear-gradient(90deg, rgba(4,6,12,.92) 30%, rgba(4,6,12,.35) 65%, transparent 100%), linear-gradient(0deg, var(--bg), transparent 30%, transparent 70%, var(--bg)); }
  .faction.right { justify-content: flex-end; text-align: right; }
  .faction.right .scrim { background: linear-gradient(270deg, rgba(4,6,12,.92) 30%, rgba(4,6,12,.35) 65%, transparent 100%), linear-gradient(0deg, var(--bg), transparent 30%, transparent 70%, var(--bg)); }
  .fac-card { position: relative; z-index: 2; max-width: 540px; }
  .fac-index { font-family: 'Oswald'; font-weight: 700; font-size: 1rem; letter-spacing: 4px; color: var(--muted); }
  .fac-name { font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.6rem); text-transform: uppercase; line-height: .95; letter-spacing: 2px; margin: .3rem 0 .4rem; }
  .fac-chip { display: inline-block; font-family: 'Barlow Condensed'; letter-spacing: 2px; text-transform: uppercase; font-size: .82rem; padding: .3rem .85rem; border-radius: 2px; border: 1px solid; margin-bottom: 1.1rem; }
  .fac-role { font-family: 'Barlow Condensed'; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
  .fac-quote { font-family: 'Oswald'; font-weight: 300; font-size: 1.4rem; line-height: 1.35; }
  .faction.right .fac-card { margin-left: auto; }
  .t-terran { color: var(--terran); } .b-terran { border-color: var(--terran); color: #9cc7f2; }
  .t-delta  { color: var(--delta);  } .b-delta  { border-color: var(--delta);  color: #f4a074; }
  .t-wraith { color: var(--wraith); } .b-wraith { border-color: var(--wraith); color: #c3a9f5; }

  /* features */
  .block { padding: 7rem 0; border-top: 1px solid var(--line); }
  .feats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; margin-top: 3rem; }
  .feat { background: linear-gradient(180deg, rgba(20,32,56,.55), rgba(10,16,30,.55)); border: 1px solid var(--line); border-radius: 8px; padding: 1.7rem 1.5rem; transition: transform .15s ease, border-color .15s ease; }
  .feat:hover { transform: translateY(-4px); border-color: rgba(77,182,255,.4); }
  .feat .ic { font-size: 1.7rem; }
  .feat h4 { font-family: 'Oswald'; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 1.2rem; margin: .8rem 0 .4rem; }
  .feat p { color: var(--muted); font-size: .93rem; }

  /* gallery */
  .shots { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 3rem; }
  .shot { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background-size: cover; background-position: center; }
  .shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,6,12,.85), transparent 55%); }
  .shot span { position: absolute; z-index: 2; left: .9rem; bottom: .8rem; font-family: 'Barlow Condensed'; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-size: .9rem; text-shadow: 0 2px 10px #000; }

  /* news */
  .news { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 3rem; }
  .einladung { display: inline-block; margin: 0 0 .8rem; padding: .35rem .8rem; border: 1px solid rgba(124,240,196,.5); border-radius: 999px; color: var(--accent-2); font-size: .85rem; }
  .einladung[hidden] { display: none; }
  .post { background: rgba(12,20,38,.5); border: 1px solid var(--line); border-radius: 8px; padding: 1.4rem 1.4rem 1.5rem; transition: border-color .15s, transform .15s; }
  .post:hover { border-color: rgba(124,240,196,.4); transform: translateY(-3px); }
  .post .type { font-family: 'Barlow Condensed'; letter-spacing: 2px; text-transform: uppercase; font-size: .72rem; color: var(--accent-2); }
  .post .date { color: var(--muted); font-size: .78rem; float: right; }
  .post h4 { font-family: 'Oswald'; font-weight: 500; font-size: 1.18rem; margin: .5rem 0 .5rem; line-height: 1.2; }
  .post p { color: var(--muted); font-size: .9rem; }

  /* final cta */
  .finale { position: relative; text-align: center; padding: 8rem 0; overflow: hidden; border-top: 1px solid var(--line); }
  .finale .bg { position: absolute; inset: 0; background: url('/content/landing/hero.webp') center/cover no-repeat; opacity: .28; z-index: 0; transform: scaleX(-1); }
  .finale .scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(4,6,12,.3), var(--bg) 75%); }
  .finale .inner { position: relative; z-index: 2; }
  .finale h2 { font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; letter-spacing: 2px; }
  .finale p { color: var(--muted); margin: .9rem 0 2rem; font-size: 1.1rem; }

  footer { border-top: 1px solid var(--line); padding: 2.5rem 0; color: var(--muted); font-size: .85rem; }
  .foot-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
  .foot-links { display: flex; gap: 1.4rem; font-family: 'Barlow Condensed'; text-transform: uppercase; letter-spacing: 2px; }
  .foot-links a:hover { color: var(--ink); }

  /* faction units row (1.4-inspired "EINHEITEN") */
  .fac-units { margin-top: 1.6rem; }
  .fac-units .lbl { font-family: 'Barlow Condensed'; letter-spacing: 3px; text-transform: uppercase; font-size: .75rem; color: var(--muted); margin-bottom: .6rem; }
  .fac-units .row { display: flex; gap: .7rem; }
  .faction.right .fac-units .row { justify-content: flex-end; }
  .unit { width: 92px; height: 92px; border: 1px solid var(--line); border-radius: 6px; background: #060a12 center/cover no-repeat; box-shadow: inset 0 0 30px rgba(0,0,0,.6); transition: transform .15s ease, border-color .15s ease; }
  .unit:hover { transform: translateY(-3px) scale(1.04); }
  .faction.left .unit:hover { border-color: var(--terran); }

  /* platform band */
  .platform { text-align: center; padding: 5.5rem 0; border-top: 1px solid var(--line); background: radial-gradient(ellipse at center, rgba(30,50,90,.18), transparent 70%); }
  .platform h2 { font-weight: 600; font-size: clamp(1.8rem,4vw,2.8rem); text-transform: uppercase; letter-spacing: 1px; }
  .platform p { color: var(--muted); margin: .7rem auto 2.4rem; max-width: 34rem; }
  .plats { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
  .plat { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 108px; padding: 1.2rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(12,20,38,.4); }
  .plat .pic { font-size: 1.9rem; }
  .plat .nm { font-family: 'Barlow Condensed'; letter-spacing: 1.5px; text-transform: uppercase; font-size: .9rem; }
  .plat .st { font-size: .72rem; color: var(--muted); font-family: 'Barlow Condensed'; letter-spacing: 1px; text-transform: uppercase; }
  .plat.live { border-color: rgba(124,240,196,.45); }
  .plat.live .st { color: var(--accent-2); }
  .plat.soon { opacity: .72; }

  /* cookie notice */
  .cookie { position: fixed; z-index: 200; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(680px, calc(100% - 2rem));
    background: rgba(9,14,26,.96); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .cookie p { color: var(--muted); font-size: .85rem; flex: 1 1 300px; margin: 0; }
  .cookie a { color: var(--accent); }
  .cookie .cbtns { display: flex; gap: .6rem; }
  .cookie .cbtn { font-family: 'Barlow Condensed'; text-transform: uppercase; letter-spacing: 1.5px; font-size: .82rem; padding: .5rem 1.1rem; border-radius: 4px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink); }
  .cookie .cbtn.primary { background: linear-gradient(135deg,#4db6ff,#2e7fe6); border: 0; color: #041124; font-weight: 600; }
  .cookie.hide { display: none; }

  @media (max-width: 900px) {
    .feats, .shots, .news { grid-template-columns: 1fr; }
    .feats { grid-template-columns: 1fr 1fr; }
    .nav-links a:not(.btn):not(.lang) { display: none; }
    .nav-links { gap: .8rem; }
    .nav-links .btn { white-space: nowrap; padding: .55rem 1rem; }
    .faction, .faction.right { text-align: left; justify-content: flex-start; }
    .faction.right .scrim { background: linear-gradient(90deg, rgba(4,6,12,.92) 30%, rgba(4,6,12,.4) 70%, rgba(4,6,12,.7) 100%), linear-gradient(0deg, var(--bg), transparent 40%); }
    .faction.right .fac-card { margin-left: 0; }
  }
  @media (max-width: 560px) { .feats { grid-template-columns: 1fr; } .brand small { display: none; } }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } #stars { display:none; } }