@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Orbitron:wght@600;700;800;900&display=swap');
:root{--bg:#09070e;--panel:rgba(19,15,28,.72);--line:rgba(255,255,255,.1);--text:#fff;--muted:#b5adbd;--purple:#8065ff;--pink:#e458aa;--green:#56e69d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}.topbar{height:68px;position:fixed;z-index:20;top:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 max(24px,calc((100vw - 1180px)/2));background:rgba(7,5,12,.28);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#7f69ff,#ed4e9f);position:relative;box-shadow:0 8px 26px rgba(123,89,255,.35)}.brand-mark i{position:absolute;width:7px;height:20px;background:#fff;transform:skew(-17deg);top:10px;border-radius:2px}.brand-mark i:first-child{left:12px}.brand-mark i:last-child{right:11px;height:13px;top:17px}.brand>span:last-child{display:flex;flex-direction:column}.brand b{font-family:Orbitron;font-size:16px;letter-spacing:1px}.brand small{font-size:7px;letter-spacing:2.4px;color:#b8afc3;margin-top:2px}.nav{justify-self:center;display:flex;gap:30px}.nav a{font-size:12px;font-weight:700;color:#ddd6e4}.nav a:hover{color:#fff}.play-top,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-weight:800;font-size:12px}.play-top{height:40px;padding:0 19px;background:linear-gradient(135deg,#7b62ff,#6047e9);box-shadow:0 10px 30px rgba(100,71,233,.35)}.menu-btn{display:none}.hero{position:relative;min-height:790px;display:flex;align-items:center;justify-content:center;padding:105px 22px 36px;overflow:hidden}.hero-bg,.hero-shade,.hero-grid{position:absolute;inset:0}.hero-bg{background:linear-gradient(180deg,#1b1328 0%,#171020 45%,#0a080f 100%);overflow:hidden}.sky{position:absolute;inset:0;background:radial-gradient(circle at 48% 30%,rgba(156,88,255,.32),transparent 30%),radial-gradient(circle at 76% 28%,rgba(230,70,145,.18),transparent 25%)}.mountains{position:absolute;left:0;right:0;bottom:16%;height:45%;opacity:.6;background:linear-gradient(155deg,transparent 0 25%,#171020 26% 37%,transparent 38%),linear-gradient(205deg,transparent 0 28%,#1c1424 29% 42%,transparent 43%)}.city{position:absolute;left:0;right:0;bottom:0;height:33%;opacity:.8;background:repeating-linear-gradient(90deg,#0d0a12 0 45px,#171020 46px 72px,#0b0910 73px 105px);clip-path:polygon(0 45%,6% 45%,6% 10%,11% 10%,11% 35%,16% 35%,16% 0,21% 0,21% 48%,28% 48%,28% 22%,35% 22%,35% 52%,42% 52%,42% 12%,48% 12%,48% 42%,55% 42%,55% 4%,62% 4%,62% 50%,70% 50%,70% 20%,77% 20%,77% 42%,85% 42%,85% 9%,91% 9%,91% 48%,100% 48%,100% 100%,0 100%)}.character{position:absolute;bottom:12%;width:260px;height:560px;filter:drop-shadow(0 25px 25px rgba(0,0,0,.5));opacity:.75}.character .head{position:absolute;width:95px;height:115px;border-radius:44% 44% 42% 42%;background:linear-gradient(145deg,#2d2339,#141019);left:82px;top:0}.character .body{position:absolute;width:230px;height:430px;left:15px;top:95px;border-radius:44% 44% 15% 15%;background:linear-gradient(145deg,#21192b,#0d0b11 65%)}.character .weapon{position:absolute;width:300px;height:35px;background:#121017;top:270px;left:-30px;transform:rotate(-18deg);border-radius:10px}.character-left{left:3%;transform:rotate(-5deg)}.character-center{left:50%;transform:translateX(-50%) scale(1.1);opacity:.55}.character-right{right:2%;transform:rotate(4deg) scaleX(-1)}.character-right .weapon{transform:rotate(-10deg)}.car{position:absolute;right:7%;bottom:0;width:360px;height:145px;border-radius:100px 120px 15px 15px;background:linear-gradient(160deg,#242131,#0a090d 65%);transform:skewX(-8deg);opacity:.8}.car:before,.car:after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:#070609;border:10px solid #1a1720;bottom:-24px}.car:before{left:45px}.car:after{right:40px}.hero-shade{background:linear-gradient(90deg,rgba(5,4,8,.58),rgba(10,7,15,.18) 30%,rgba(10,7,15,.1) 65%,rgba(5,4,8,.58)),linear-gradient(180deg,rgba(8,5,12,.25),rgba(8,5,12,.12) 50%,#09070e 100%)}.hero-grid{opacity:.16;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:55px 55px}.hero-content{position:relative;z-index:3;width:min(100%,1040px);text-align:center;margin-top:30px}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border:1px solid rgba(255,255,255,.13);border-radius:99px;background:rgba(15,12,22,.55);backdrop-filter:blur(10px);font-size:11px;color:#d9d2df}.status-pill i{width:9px;height:9px;border-radius:50%;background:#777}.status-pill i.online{background:#48e891;box-shadow:0 0 15px rgba(72,232,145,.65)}.status-pill b{color:#82798a}.eyebrow{font-size:10px;letter-spacing:4px;color:#d8c4ff;margin:35px 0 10px;font-weight:800}.hero h1{font-family:Orbitron;margin:0;font-size:clamp(54px,7.2vw,103px);line-height:.97;letter-spacing:-4px;text-shadow:0 8px 35px rgba(0,0,0,.45)}.hero h1 span{background:linear-gradient(90deg,#7772ff,#d15cbf);-webkit-background-clip:text;background-clip:text;color:transparent}.intro{width:min(720px,100%);margin:25px auto 0;color:#d1cad6;font-size:16px;line-height:1.65}.hero-actions{display:flex;justify-content:center;gap:15px;margin-top:34px}.btn{height:54px;padding:0 26px;border:1px solid rgba(255,255,255,.12);transition:.2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:linear-gradient(135deg,#7666ff,#604ae7);box-shadow:0 18px 38px rgba(103,73,232,.28)}.btn.secondary{background:rgba(20,15,27,.55);backdrop-filter:blur(10px)}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);width:min(790px,100%);margin:62px auto 0;border:1px solid rgba(255,255,255,.1);border-radius:17px;overflow:hidden;background:rgba(17,13,24,.45);backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.24)}.stats-row article{min-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgba(255,255,255,.08)}.stats-row article:last-child{border:0}.stat-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:10px;background:rgba(128,101,255,.14);color:#8d7bff}.stat-icon.pink{background:rgba(228,88,170,.13);color:#e45aaa}.stat-icon.green{background:rgba(86,230,157,.13);color:#56e69d}.stat-icon.violet{background:rgba(186,102,255,.13);color:#ba66ff}.stats-row strong{font-family:Orbitron;font-size:25px}.stats-row small{font-size:9px;color:#aaa2b1;margin-top:7px}.scroll{position:absolute;z-index:3;bottom:13px;left:50%;transform:translateX(-50%);width:24px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:20px}.scroll span{position:absolute;top:7px;left:10px;width:3px;height:8px;border-radius:4px;background:#fff;animation:scroll 1.5s infinite}@keyframes scroll{0%{opacity:0;transform:translateY(0)}50%{opacity:1}100%{opacity:0;transform:translateY(13px)}}.section{padding:105px max(22px,calc((100vw - 1180px)/2));background:#09070e}.section-head{text-align:center;max-width:700px;margin:0 auto 48px}.section-head small,.community-box small{font-size:10px;letter-spacing:3px;color:#9c82ff;font-weight:800}.section-head h2,.community-box h2{font-family:Orbitron;font-size:clamp(35px,4.2vw,56px);margin:14px 0}.section-head p,.community-box p{color:#9f96a9;line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature-card{position:relative;padding:28px;min-height:290px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(24,19,33,.9),rgba(12,10,16,.95));transition:.25s}.feature-card:hover{transform:translateY(-6px);border-color:rgba(128,101,255,.4)}.feature-card>div{position:absolute;right:22px;top:18px;color:rgba(255,255,255,.08);font-family:Orbitron;font-size:28px}.feature-card>span{display:grid;place-items:center;width:50px;height:50px;border-radius:13px;background:rgba(128,101,255,.12);font-size:23px;margin-top:35px}.feature-card h3{font-family:Orbitron;font-size:18px;margin-top:25px}.feature-card p{font-size:12px;color:#9f96a9;line-height:1.75}.jobs{background:#0d0a13}.job-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.job-strip span{padding:14px 22px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.03);font-size:12px}.community{padding-top:80px}.community-box{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:55px;border:1px solid rgba(128,101,255,.25);border-radius:24px;background:radial-gradient(circle at 80% 20%,rgba(128,101,255,.18),transparent 30%),linear-gradient(135deg,#171120,#0d0a12)}.community-box>div:first-child{max-width:660px}.community-actions{display:flex;gap:12px;flex-shrink:0}footer{display:flex;justify-content:space-between;gap:30px;padding:25px max(22px,calc((100vw - 1180px)/2));border-top:1px solid var(--line);color:#746c7c;font-size:9px}.reveal{opacity:0;transform:translateY(20px);transition:.7s}.reveal.revealed{opacity:1;transform:none}@media(max-width:900px){.nav{display:none}.nav.is-open{display:flex;position:absolute;top:68px;left:15px;right:15px;flex-direction:column;padding:15px;background:#100c17;border:1px solid var(--line);border-radius:13px}.menu-btn{display:flex;justify-self:end;grid-column:2;width:38px;height:38px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:10px;flex-direction:column;justify-content:center;gap:4px;padding:9px}.menu-btn span{height:1px;background:#fff}.play-top{grid-column:3}.character-left{left:-110px}.character-right{right:-110px}.feature-grid{grid-template-columns:repeat(2,1fr)}.community-box{flex-direction:column;text-align:center}.community-actions{justify-content:center}}@media(max-width:600px){.topbar{padding:0 14px}.brand>span:last-child{display:none}.play-top{font-size:10px;padding:0 12px}.hero{min-height:760px;padding-top:90px}.hero h1{font-size:45px;letter-spacing:-2px}.intro{font-size:14px}.hero-actions{flex-direction:column}.stats-row{grid-template-columns:repeat(2,1fr);margin-top:40px}.stats-row article:nth-child(2){border-right:0}.stats-row article:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}.character{opacity:.34}.feature-grid{grid-template-columns:1fr}.community-box{padding:35px 22px}.community-actions{width:100%;flex-direction:column}.community-actions .btn{width:100%}footer{flex-direction:column;line-height:1.5}}

/* Limitless-Life eigener Hero-Hintergrund */
.hero {
  min-height: 100vh;
  background-image:
    linear-gradient(180deg, rgba(5, 3, 12, .30) 0%, rgba(5, 3, 12, .24) 38%, rgba(7, 5, 12, .58) 72%, #09070e 100%),
    url('/images/hero-background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #09070e;
}

.hero-bg {
  display: none;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(5, 4, 10, .28), transparent 24%, transparent 76%, rgba(5, 4, 10, .28)),
    linear-gradient(180deg, rgba(4, 3, 9, .24), rgba(4, 3, 9, .08) 45%, rgba(9, 7, 14, .82) 88%, #09070e 100%);
}

.hero-grid {
  opacity: .08;
}

.hero-content {
  padding-top: 18px;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .48);
}

.status-pill,
.stats-row,
.btn.secondary {
  background: rgba(10, 7, 17, .58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 900px) {
  .hero {
    background-position: 58% center;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 820px;
    background-position: 62% center;
  }
}

/* Sanfte Aktualisierung der Live-Spielerzahl ohne Layout-Flackern */
[data-player-count], [data-max-player-count] {
  display: inline-block;
  min-width: 1.2ch;
  font-variant-numeric: tabular-nums;
  transition: opacity .13s ease, transform .13s ease, text-shadow .25s ease;
}
[data-player-count].number-updating,
[data-max-player-count].number-updating {
  opacity: .42;
  transform: translateY(2px);
}
[data-player-count].number-updated,
[data-max-player-count].number-updated {
  text-shadow: 0 0 16px rgba(128,101,255,.75);
}


/* Discord- und TeamSpeak-Buttons */
.hero-actions .social-btn {
  gap: 11px;

  width: 220px;
  min-width: 220px;
  max-width: 220px;
  flex: 0 0 220px;
}
.hero-actions .social-logo {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.18));
}
.hero-actions .social-btn span {
  display: inline-flex;
  align-items: center;
}

/* TeamSpeak-Logo optisch an den Discord-Button angepasst */
.hero-actions .teamspeak-logo {
  width: 22px;
  height: 22px;
}


/* Equal width social buttons */
.hero-actions .social-btn{
  width:220px;
  min-width:220px;
  max-width:220px;
  flex:0 0 220px;
  justify-content:center;
  box-sizing:border-box;
}


/* Aktionen oben rechts im Header */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.hub-top {
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.hub-top svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.hub-top:hover {
  transform: translateY(-2px);
  background: rgba(128,101,255,.17);
  border-color: rgba(128,101,255,.48);
}

@media (max-width: 900px) {
  .header-actions {
    grid-column: 3;
  }
}

@media (max-width: 600px) {
  .header-actions {
    gap: 6px;
  }

  .hub-top,
  .header-actions .play-top {
    height: 36px;
    padding: 0 10px;
    font-size: 10px;
  }

  .hub-top svg {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
}