/* =========================================
   LOS ANGELES ONLINE – style.css
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Teko:wght@400;600;700&display=swap');

/* ── Reset & Variables ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold:    #e8a020;
  --gold2:   #ffcc55;
  --red:     #c0392b;
  --pink:    #ff3c6e;
  --bg:      #070810;
  --bg2:     #0b0d18;
  --bg3:     #0f1120;
  --glass:   rgba(255,255,255,0.035);
  --border:  rgba(255,255,255,0.07);
  --text:    #f0ece4;
  --muted:   #6e6a60;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* ── Custom Cursor ── */
#cursor {
  position: fixed;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s, opacity .2s;
}
#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(232,160,32,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, opacity .2s;
}
body:has(a:hover) #cursor,
body:has(button:hover) #cursor { width:16px; height:16px; background:var(--pink); }
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring { width:52px; height:52px; opacity:.4; }

/* ── Scroll Progress ── */
#scroll-bar {
  position: fixed;
  top:0; left:0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg,var(--gold),var(--pink));
  z-index: 10000;
  transition: width .05s linear;
}

/* ── Noise ── */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9990; opacity:.45; mix-blend-mode:overlay;
}

/* ── Navigation ── */
#nav {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 5rem;
  transition: background .4s, padding .3s;
}
#nav.scrolled {
  background: rgba(7,8,16,.94);
  backdrop-filter: blur(28px);
  padding: .9rem 5rem;
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
}
.nav-logo em { font-style:normal; color:var(--gold); }

.nav-links { display:flex; gap:2.5rem; list-style:none; align-items:center; }
.nav-links a {
  text-decoration:none;
  color:var(--muted);
  font-size:.73rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  transition:color .2s;
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-3px; left:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

.nav-cta {
  background:var(--gold) !important;
  color:#070810 !important;
  padding:.5rem 1.3rem;
  border-radius:2px;
  font-weight:700 !important;
  transition:background .2s, box-shadow .2s !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:var(--gold2) !important; box-shadow:0 0 30px rgba(232,160,32,.4) !important; }

/* ── HERO ── */
#hero {
  position:relative;
  height:100vh; min-height:700px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
#hero-video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.45) saturate(1.2);
}
#hero-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(7,8,16,1) 0%, rgba(7,8,16,.55) 45%, rgba(7,8,16,.1) 100%),
    linear-gradient(to right, rgba(7,8,16,.7) 0%, transparent 60%);
}
.hero-content {
  position:relative; z-index:2;
  padding:0 5rem 7rem;
  max-width:950px;
}
.hero-tag {
  display:inline-block;
  font-family:'Teko',sans-serif;
  font-size:.85rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(232,160,32,.3);
  padding:.3rem 1rem; margin-bottom:1.5rem;
  opacity:0; animation:heroUp .6s .3s forwards;
}
.hero-title {
  font-family:'Anton',sans-serif;
  font-size:clamp(4.5rem,10vw,10rem);
  line-height:.92; letter-spacing:.01em;
  color:var(--text);
  opacity:0; animation:heroUp .8s .5s forwards;
}
.hero-title .line2 {
  display:block;
  -webkit-text-stroke:1.5px rgba(240,236,228,.25);
  color:transparent; letter-spacing:.04em;
}
.hero-title .line3 {
  display:block; color:var(--gold);
  text-shadow:0 0 60px rgba(232,160,32,.35);
}
.hero-desc {
  margin-top:2rem; font-size:1rem;
  color:rgba(240,236,228,.6);
  max-width:440px; line-height:1.8;
  opacity:0; animation:heroUp .6s .75s forwards;
}
.hero-actions {
  display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap;
  opacity:0; animation:heroUp .6s .95s forwards;
}
.hero-scroll {
  position:absolute; right:5rem; bottom:3rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:heroUp .6s 1.4s forwards;
}
.hero-scroll span {
  font-size:.65rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--muted); writing-mode:vertical-lr;
}
.scroll-line {
  width:1px; height:60px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100%{opacity:.4;transform:scaleY(1)}
  50%{opacity:1;transform:scaleY(1.1)}
}
@keyframes heroUp {
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 2.2rem; border-radius:2px;
  text-decoration:none;
  font-family:'Teko',sans-serif; font-size:1.05rem;
  letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  border:none; cursor:none;
  transition:transform .2s, box-shadow .2s, background .2s;
  position:relative; overflow:hidden;
}
.btn::before {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.08);
  transform:translateX(-100%); transition:transform .35s;
}
.btn:hover::before { transform:translateX(0); }
.btn:hover { transform:translateY(-3px); }

.btn-gold  { background:var(--gold); color:#070810; box-shadow:0 0 28px rgba(232,160,32,.3); }
.btn-gold:hover { box-shadow:0 8px 40px rgba(232,160,32,.5); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-outline:hover { border-color:rgba(232,160,32,.4); color:var(--gold); }
.btn-discord { background:#5865f2; color:#fff; box-shadow:0 0 25px rgba(88,101,242,.3); }
.btn-discord:hover { box-shadow:0 8px 40px rgba(88,101,242,.55); }
.btn-fivem  { background:#e84142; color:#fff; box-shadow:0 0 25px rgba(232,65,66,.3); }
.btn-fivem:hover { box-shadow:0 8px 40px rgba(232,65,66,.55); }
.btn-rules  { background:transparent; color:var(--gold); border:1px solid rgba(232,160,32,.4); }
.btn-rules:hover { background:rgba(232,160,32,.08); border-color:var(--gold); }

/* ── SECTIONS COMMONS ── */
section { padding:8rem 5rem; position:relative; }
.sec-eyebrow {
  font-family:'Teko',sans-serif;
  font-size:.78rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.6rem;
}
.sec-title {
  font-family:'Anton',sans-serif;
  font-size:clamp(2.8rem,6vw,5.5rem);
  line-height:.95; letter-spacing:.02em;
  color:var(--text); margin-bottom:.8rem;
}
.sec-line { width:50px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); }

/* ── STATS BAR ── */
#stats {
  padding:4rem 5rem; background:var(--bg2);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  display:flex; gap:1px;
}
.stat-item {
  flex:1; text-align:center; padding:2rem 1rem; position:relative;
}
.stat-item+.stat-item::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:1px; background:var(--border);
}
.stat-num {
  font-family:'Anton',sans-serif;
  font-size:clamp(2.5rem,5vw,4rem);
  color:var(--gold); display:block; line-height:1;
  text-shadow:0 0 30px rgba(232,160,32,.3);
}
.stat-label {
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-top:.4rem; display:block;
}

/* ── NEWS ── */
#news { background:var(--bg); }
.news-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:3.5rem;
}
.news-card {
  background:var(--glass); border:1px solid var(--border);
  border-radius:3px; overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s;
  position:relative;
}
.news-card:hover { transform:translateY(-8px); border-color:rgba(232,160,32,.3); }
.news-img { height:200px; overflow:hidden; background:var(--bg3); position:relative; }
.news-img img {
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) brightness(.85);
  transition:transform .6s, filter .4s;
}
.news-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(7,8,16,.8));
}
.news-card:hover .news-img img { transform:scale(1.08); filter:saturate(1.1) brightness(.9); }
.news-img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--bg3),var(--bg2));
  font-family:'Anton',sans-serif; font-size:3rem; color:rgba(232,160,32,.2);
}
.news-body { padding:1.6rem; }
.news-tag {
  display:inline-block; font-family:'Teko',sans-serif;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); background:rgba(232,160,32,.1);
  padding:.15rem .65rem; border-radius:2px; margin-bottom:.8rem;
}
.news-body h3 {
  font-family:'Teko',sans-serif; font-size:1.4rem; font-weight:600;
  letter-spacing:.04em; color:var(--text); margin-bottom:.5rem; line-height:1.2;
}
.news-body p { font-size:.88rem; color:var(--muted); line-height:1.7; }

/* ── ABOUT ── */
#about { background:var(--bg2); overflow:hidden; }
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:6rem; align-items:center; }
.about-visual {
  position:relative; height:500px; border-radius:3px; overflow:hidden;
  border:1px solid var(--border);
}
.about-visual img { width:100%; height:100%; object-fit:cover; filter:saturate(.7); }
.about-visual-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#0f1120,#1a0a0a);
}
.about-visual::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(232,160,32,.05) 0%,transparent 60%);
}
.about-corner {
  position:absolute; top:1rem; right:1rem;
  font-family:'Anton',sans-serif; font-size:6rem;
  color:rgba(232,160,32,.06); line-height:1;
  pointer-events:none; user-select:none;
}
.about-text p {
  color:var(--muted); line-height:1.9; font-size:.95rem;
  margin-top:1.5rem; margin-bottom:2rem;
}
.feature-list { list-style:none; display:flex; flex-direction:column; gap:.8rem; }
.feature-list li {
  display:flex; align-items:center; gap:.8rem;
  font-size:.88rem; color:var(--muted);
}
.feature-list li::before {
  content:''; width:6px; height:6px; background:var(--gold);
  border-radius:50%; flex-shrink:0; box-shadow:0 0 8px rgba(232,160,32,.6);
}

/* ── RULES SECTION (on index) ── */
#rules { background:var(--bg); }
.rules-inner { max-width:760px; }
.rules-box {
  background:var(--glass); border:1px solid var(--border);
  border-left:3px solid var(--gold); border-radius:3px;
  padding:3rem; margin-top:3rem;
}
.rules-box p { color:var(--muted); line-height:2; font-size:1rem; }
.rules-box a { color:var(--gold); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
.rules-box a:hover { border-color:var(--gold); }
.rules-cta { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }

/* ── TEAM ── */
#team { background:var(--bg2); }
.team-grid { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:3.5rem; }
/* Base size – overridden inside .team-tier */
.team-card { width:160px; height:210px; perspective:900px; }
.team-card-inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,.2,.2,1);
}
.team-card:hover .team-card-inner { transform:rotateY(180deg); }
.team-front, .team-back {
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:3px; border:1px solid var(--border); overflow:hidden;
}
.team-front {
  background:var(--glass);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:1rem;
}
.team-front img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:grayscale(40%) brightness(.7); transition:filter .4s;
}
.team-card:hover .team-front img { filter:grayscale(0%) brightness(.8); }
.team-front::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(7,8,16,.9) 30%,transparent 70%);
}
.team-front-info { position:relative; z-index:2; text-align:center; }
.team-front-info h3 { font-family:'Teko',sans-serif; font-size:1.15rem; font-weight:600; letter-spacing:.06em; line-height:1; }
.team-front-info .role { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-top:.15rem; display:block; }
.team-avatar-placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:3rem; color:rgba(232,160,32,.15);
  background:linear-gradient(160deg,var(--bg3),var(--bg));
}
.team-back {
  background:var(--bg3); transform:rotateY(180deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.2rem; text-align:center; gap:.3rem;
}
.team-back h3 { font-family:'Teko',sans-serif; font-size:1.2rem; font-weight:600; }
.team-back .role { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); }
.team-back p { font-size:.76rem; color:var(--muted); line-height:1.55; margin-top:.3rem; }
.team-back .gold-dot { width:24px; height:2px; background:var(--gold); margin:.3rem auto; }

/* ── JOIN ── */
#join { background:var(--bg); text-align:center; overflow:hidden; }
.join-glow {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,160,32,.07) 0%,transparent 70%);
  left:50%; top:50%; transform:translate(-50%,-50%);
  pointer-events:none; animation:pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.7}
  50%{transform:translate(-50%,-50%) scale(1.15); opacity:1}
}
#join .sec-title { font-size:clamp(3.5rem,9vw,8rem); margin-bottom:1rem; }
.join-line { width:50px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:1rem auto 2rem; }
#join p { color:var(--muted); font-size:1rem; max-width:500px; margin:0 auto 3rem; line-height:1.9; }
.join-btns { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }

/* ── FOOTER ── */
footer {
  background:#040408; border-top:1px solid var(--border);
  padding:2.5rem 5rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.footer-logo { font-family:'Anton',sans-serif; font-size:1.2rem; color:var(--text); letter-spacing:.04em; }
.footer-logo em { font-style:normal; color:var(--gold); }
footer small { font-size:.78rem; color:var(--muted); }
.footer-links { display:flex; gap:2rem; }
.footer-links a {
  font-size:.75rem; color:var(--muted); text-decoration:none;
  letter-spacing:.12em; text-transform:uppercase; transition:color .2s;
}
.footer-links a:hover { color:var(--gold); }

/* ── SCROLL REVEAL ── */
.reveal        { opacity:0; transform:translateY(35px); transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-left   { opacity:0; transform:translateX(-40px); transition:opacity .8s, transform .8s; }
.reveal-right  { opacity:0; transform:translateX(40px);  transition:opacity .8s, transform .8s; }
.reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; }

/* ── MOBILE ── */
@media (max-width:900px) {
  #nav { padding:1rem 1.5rem; }
  #nav.scrolled { padding:.8rem 1.5rem; }
  .nav-links { display:none; }
  section { padding:5rem 1.5rem; }
  #hero { align-items:center; }
  .hero-content { padding:0 1.5rem 3rem; }
  .hero-scroll { display:none; }
  .news-grid { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; }
  .about-visual { height:300px; }
  #stats { flex-wrap:wrap; padding:2rem 1.5rem; }
  .stat-item { flex:0 0 50%; }
  footer { padding:2rem 1.5rem; flex-direction:column; text-align:center; }
}

/* ── TEAM TIERS – alle Ränge nebeneinander, Member darunter ── */

.team-tiers-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;            /* niemals umbrechen */
  gap: 1rem;
  margin-top: 3rem;
  align-items: flex-start;
  overflow-x: auto;             /* scrollt horizontal wenn zu schmal */
  padding-bottom: 1rem;
  /* schöner scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.team-tiers-wrap::-webkit-scrollbar { height: 4px; }
.team-tiers-wrap::-webkit-scrollbar-track { background: transparent; }
.team-tiers-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Eine Tier-Spalte */
.team-tier {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex-shrink: 0;               /* nie kleiner werden */
  width: 160px;
}

/* Leere Ränge etwas kleiner / transparent */
.team-tier.empty { opacity: .5; }

/* Rang-Label oben in der Spalte */
.team-tier-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Teko', sans-serif;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .3rem .7rem .3rem .55rem;
  border-radius: 2px;
  white-space: nowrap;
  width: 100%;
}

.tier-num {
  font-family: 'DM Sans', sans-serif;
  font-size: .58rem;
  letter-spacing: .06em;
  opacity: .45;
  font-weight: 400;
}

/* Karten innerhalb eines Rangs */
.team-tier .team-card {
  width: 160px;
  height: 210px;
  perspective: 900px;
}

/* Platzhalterkarte für leere Ränge */
.tier-empty-card {
  width: 160px;
  height: 210px;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: var(--muted);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
.tier-empty-icon { font-size: 1.3rem; opacity: .25; }

/* Tier-Farben */
/* Projektleitung = Gold */
.tier-gold   { background:rgba(232,160,32,.12); color:#e8a020;  border-left:3px solid #e8a020; }
/* Teamleitung = Lila */
.tier-silver { background:rgba(155,89,182,.12); color:#9b59b6;  border-left:3px solid #9b59b6; }
/* Administratoren = Rot */
.tier-red    { background:rgba(232,65,66,.1);   color:#e84142;  border-left:3px solid #e84142; }
/* Analysten = Weiß */
.tier-blue   { background:rgba(240,236,228,.07);color:#f0ece4;  border-left:3px solid rgba(240,236,228,.45); }
/* Developer = Pink */
.tier-purple { background:rgba(255,60,110,.1);  color:#ff3c6e;  border-left:3px solid #ff3c6e; }
/* Moderatoren = Grün */
.tier-orange { background:rgba(39,174,96,.1);   color:#27ae60;  border-left:3px solid #27ae60; }
/* Supporter = Gelb */
.tier-green  { background:rgba(255,214,0,.1);   color:#ffd600;  border-left:3px solid #ffd600; }

/* Text-Farben auf den Karten */
.tier-gold-text   { color:#e8a020  !important; }
.tier-silver-text { color:#9b59b6  !important; }
.tier-red-text    { color:#e84142  !important; }
.tier-blue-text   { color:#f0ece4  !important; }
.tier-purple-text { color:#ff3c6e  !important; }
.tier-orange-text { color:#27ae60  !important; }
.tier-green-text  { color:#ffd600  !important; }

@media (max-width: 900px) {
  .team-tiers-wrap { gap: .7rem; }
  .team-tier { width: 140px; }
  .team-tier .team-card { width: 140px; height: 190px; }
  .tier-empty-card { width: 140px; height: 190px; }
}