*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --red: #c8102e;
  --pink: #ff2d55;
  --glow: #ff4d6d;
  --dark: #080508;
  --dark2: #100810;
  --dark3: #1a0d1f;
  --dark4: #220e28;
  --text: #e8dde8;
  --muted: rgba(232,221,232,0.5);
  --border: rgba(200,16,46,0.25);
}
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--text); font-family: 'Rajdhani', sans-serif; overflow-x: hidden; cursor: default; }

/* ─── NOISE OVERLAY ─── */
.noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
}

/* ─── NAVBAR ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 70px;
  background: rgba(8,5,8,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
nav .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
nav .nav-logo img { height: 44px; filter: drop-shadow(0 0 10px rgba(200,16,46,0.6)); }
nav .nav-logo span { font-family: 'Bebas Neue'; font-size: 28px; letter-spacing: 0.1em; background: linear-gradient(135deg, #fff, var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
nav ul { list-style: none; display: flex; gap: 8px; }
nav ul li a {
  display: block; padding: 8px 16px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
nav ul li a:hover, nav ul li a.active { color: #fff; background: rgba(200,16,46,0.2); }
.nav-discord {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--red), var(--pink));
  color: #fff !important; font-weight: 700 !important; text-decoration: none;
  border-radius: 4px; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 0 20px rgba(200,16,46,0.4);
  transition: box-shadow 0.3s, transform 0.2s;
}
.nav-discord:hover { box-shadow: 0 0 35px rgba(200,16,46,0.7) !important; transform: translateY(-1px); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; }

/* ─── PAGES ─── */
.page { display: none; min-height: 100vh; padding-top: 70px; }
.page.active { display: block; }

/* ══════════════════════════════════
   HOME PAGE
══════════════════════════════════ */
.hero {
  position: relative; min-height: calc(100vh - 70px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse 100% 70% at 50% 100%, rgba(200,16,46,0.2) 0%, transparent 60%),
              radial-gradient(ellipse 60% 60% at 50% 50%, rgba(30,10,30,0.8) 0%, transparent 100%),
              var(--dark);
}

.hero-skyline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(to top, rgba(180,20,50,0.18), transparent);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath d='M0,300 L0,200 L60,200 L60,140 L100,140 L100,100 L130,100 L130,80 L160,80 L160,60 L190,60 L190,80 L210,80 L210,40 L240,40 L240,60 L270,60 L270,100 L300,100 L300,120 L330,120 L330,80 L370,80 L370,50 L400,50 L400,70 L430,70 L430,90 L460,90 L460,55 L490,55 L490,35 L520,35 L520,55 L550,55 L550,75 L580,75 L580,100 L610,100 L610,120 L640,120 L640,85 L670,85 L670,60 L700,60 L700,40 L730,40 L730,60 L760,60 L760,80 L790,80 L790,50 L820,50 L820,30 L850,30 L850,50 L880,50 L880,70 L910,70 L910,90 L940,90 L940,110 L970,110 L970,80 L1000,80 L1000,60 L1030,60 L1030,40 L1060,40 L1060,60 L1090,60 L1090,80 L1120,80 L1120,100 L1160,100 L1160,140 L1200,140 L1200,180 L1260,180 L1260,200 L1300,200 L1300,220 L1380,220 L1380,200 L1440,200 L1440,300 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath d='M0,300 L0,200 L60,200 L60,140 L100,140 L100,100 L130,100 L130,80 L160,80 L160,60 L190,60 L190,80 L210,80 L210,40 L240,40 L240,60 L270,60 L270,100 L300,100 L300,120 L330,120 L330,80 L370,80 L370,50 L400,50 L400,70 L430,70 L430,90 L460,90 L460,55 L490,55 L490,35 L520,35 L520,55 L550,55 L550,75 L580,75 L580,100 L610,100 L610,120 L640,120 L640,85 L670,85 L670,60 L700,60 L700,40 L730,40 L730,60 L760,60 L760,80 L790,80 L790,50 L820,50 L820,30 L850,30 L850,50 L880,50 L880,70 L910,70 L910,90 L940,90 L940,110 L970,110 L970,80 L1000,80 L1000,60 L1030,60 L1030,40 L1060,40 L1060,60 L1090,60 L1090,80 L1120,80 L1120,100 L1160,100 L1160,140 L1200,140 L1200,180 L1260,180 L1260,200 L1300,200 L1300,220 L1380,220 L1380,200 L1440,200 L1440,300 Z' fill='white'/%3E%3C/svg%3E");
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
}

.scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px);
}

.streaks { position: absolute; inset: 0; overflow: hidden; }
.streak {
  position: absolute; width: 1px; height: 150%;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,45,85,0.8) 50%, transparent 100%);
  animation: streakPulse 5s ease-in-out infinite;
}
.streak:nth-child(1) { left: 20%; top: -50%; transform: rotate(-25deg); animation-delay: 0s; }
.streak:nth-child(2) { left: 30%; top: -50%; transform: rotate(-20deg); animation-delay: 1s; width: 2px; opacity: 0.4; }
.streak:nth-child(3) { right: 20%; top: -50%; transform: rotate(25deg); animation-delay: 2s; }
.streak:nth-child(4) { right: 30%; top: -50%; transform: rotate(20deg); animation-delay: 0.5s; width: 2px; opacity: 0.4; }
@keyframes streakPulse { 0%,100%{opacity:0.2} 50%{opacity:0.8} }

.hero-content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 60px 20px; gap: 20px;
}
.hero-logo {
  width: 200px;
  filter: drop-shadow(0 0 40px rgba(200,16,46,0.9)) drop-shadow(0 0 80px rgba(255,45,85,0.4));
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100%{ filter: drop-shadow(0 0 30px rgba(200,16,46,0.8)) drop-shadow(0 0 60px rgba(255,45,85,0.3)); transform: scale(1); }
  50%{ filter: drop-shadow(0 0 50px rgba(200,16,46,1)) drop-shadow(0 0 100px rgba(255,45,85,0.6)); transform: scale(1.02); }
}
.hero-tag {
  display: inline-block;
  padding: 6px 18px;
  background: rgba(200,16,46,0.15);
  border: 1px solid rgba(200,16,46,0.5);
  border-radius: 2px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--pink);
}
.hero h1 {
  font-family: 'Bebas Neue'; font-size: clamp(60px, 10vw, 130px);
  letter-spacing: 0.04em; line-height: 0.9;
  background: linear-gradient(180deg, #ffffff 0%, #ffd0dc 40%, var(--pink) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { font-size: clamp(16px, 2vw, 20px); font-weight: 600; color: var(--muted); letter-spacing: 0.1em; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.btn-primary {
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--red), var(--pink));
  color: #fff; font-family: 'Bebas Neue'; font-size: 20px; letter-spacing: 0.15em;
  text-decoration: none; border: none; border-radius: 3px; cursor: pointer;
  box-shadow: 0 0 30px rgba(200,16,46,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.25s;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 50px rgba(200,16,46,0.8), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-outline {
  padding: 13px 36px;
  background: transparent;
  color: var(--text); font-family: 'Bebas Neue'; font-size: 20px; letter-spacing: 0.15em;
  text-decoration: none; border: 1px solid rgba(200,16,46,0.5); border-radius: 3px; cursor: pointer;
  transition: all 0.25s;
}
.btn-outline:hover { border-color: var(--pink); color: var(--pink); background: rgba(200,16,46,0.1); }

/* FULL WIDTH BANNER */
.banner-strip {
  width: 100vw;                 /* komplette Bildschirmbreite */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;           /* bricht aus Container aus */
  margin-right: -50vw;
  height: 280px;                /* Maximalhöhe */
  overflow: hidden;
  border-bottom: 2px solid var(--red);
  background: var(--dark);
}

.banner-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* kein Verzerren */
  object-position: center;
  display: block;
}

/* SERVER INFO BAR */
.server-bar {
  background: linear-gradient(135deg, var(--dark2), var(--dark3));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 28px 40px;
}
.server-bar-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-around; align-items: center;
  flex-wrap: wrap; gap: 20px;
}
.server-stat { text-align: center; }
.server-stat .val {
  font-family: 'Bebas Neue'; font-size: 44px;
  background: linear-gradient(135deg, #fff, var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.server-stat .lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.server-stat .dot { display: inline-block; width: 8px; height: 8px; background: #22ff88; border-radius: 50%; box-shadow: 0 0 8px #22ff88; margin-right: 6px; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.divider { height: 2px; background: linear-gradient(90deg, transparent, var(--red), var(--pink), var(--red), transparent); }

/* FEATURES */
.section { padding: 80px 40px; max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--pink); margin-bottom: 12px; }
.section-head h2 { font-family: 'Bebas Neue'; font-size: clamp(36px, 5vw, 72px); letter-spacing: 0.05em; background: linear-gradient(135deg, #fff, var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.fcard {
  background: linear-gradient(135deg, var(--dark2), var(--dark3));
  border: 1px solid var(--border); border-radius: 8px; padding: 32px 28px;
  position: relative; overflow: hidden; transition: transform 0.3s, border-color 0.3s;
}
.fcard::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--pink));
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.fcard:hover { transform: translateY(-6px); border-color: rgba(200,16,46,0.6); }
.fcard:hover::after { transform: scaleX(1); }
.fcard-icon { font-size: 36px; margin-bottom: 16px; display: block; }
.fcard h3 { font-family: 'Bebas Neue'; font-size: 26px; letter-spacing: 0.1em; color: var(--pink); margin-bottom: 10px; }
.fcard p { color: var(--muted); line-height: 1.7; font-size: 15px; font-weight: 500; }

/* HOW TO JOIN */
.join-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; }
.step {
  background: var(--dark2); border: 1px solid var(--border); border-radius: 8px;
  padding: 28px 24px; text-align: center;
  position: relative;
}
.step-num {
  width: 50px; height: 50px; margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--red), var(--pink));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue'; font-size: 24px;
}
.step h4 { font-family: 'Bebas Neue'; font-size: 20px; letter-spacing: 0.1em; color: #fff; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14px; line-height: 1.6; font-weight: 500; }
.step code { background: rgba(200,16,46,0.15); color: var(--pink); padding: 2px 8px; border-radius: 3px; font-size: 12px; font-family: monospace; word-break: break-all; }

/* CTA */
.cta-wrap {
  text-align: center; padding: 100px 40px;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(200,16,46,0.12) 0%, transparent 70%);
}
.cta-wrap h2 { font-family: 'Bebas Neue'; font-size: clamp(40px, 6vw, 80px); letter-spacing: 0.05em; margin-bottom: 16px; }
.cta-wrap p { color: var(--muted); font-size: 18px; font-weight: 500; max-width: 500px; margin: 0 auto 36px; }

/* ══════════════════════════════════
   TEAM PAGE
══════════════════════════════════ */
.page-header {
  padding: 80px 40px 60px;
  text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(200,16,46,0.2) 0%, transparent 70%);
  border-bottom: 1px solid var(--border);
}
.page-header .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--pink); margin-bottom: 12px; }
.page-header h1 { font-family: 'Bebas Neue'; font-size: clamp(48px, 7vw, 100px); letter-spacing: 0.05em; background: linear-gradient(135deg, #fff, var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.page-header p { color: var(--muted); font-size: 18px; font-weight: 500; max-width: 600px; margin: 16px auto 0; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; padding: 60px 40px; max-width: 1200px; margin: 0 auto; }
.team-card {
  background: linear-gradient(160deg, var(--dark3), var(--dark2));
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; transition: transform 0.3s, border-color 0.3s;
}
.team-card:hover { transform: translateY(-6px); border-color: rgba(200,16,46,0.6); }
.team-card-top {
  padding: 32px 24px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-bottom: 1px solid var(--border);
}
.team-avatar {
  width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--red);
  background: var(--dark4); display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(200,16,46,0.4);
}
.team-avatar.owner { border-color: var(--pink); box-shadow: 0 0 30px rgba(255,45,85,0.6); }
.team-name { font-family: 'Bebas Neue'; font-size: 26px; letter-spacing: 0.08em; color: #fff; }
.team-role {
  display: inline-block; margin-top: 6px; padding: 3px 12px;
  background: rgba(200,16,46,0.2); border: 1px solid rgba(200,16,46,0.4);
  border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--pink);
}
.team-role.owner-role { background: rgba(255,45,85,0.2); border-color: var(--pink); color: var(--pink); }
.team-role.admin-role { background: rgba(200,16,46,0.15); border-color: rgba(200,16,46,0.4); color: #ff8080; }
.team-role.mod-role { background: rgba(100,100,200,0.15); border-color: rgba(100,100,255,0.3); color: #9999ff; }
.team-role.dev-role { background: rgba(50,200,100,0.15); border-color: rgba(50,200,100,0.3); color: #55ee88; }
.team-role.lead-role { background: rgba(255,165,0,0.15); border-color: rgba(255,165,0,0.4); color: #ffaa33; }
.team-card-bottom { padding: 16px 24px; }
.team-card-bottom p { color: var(--muted); font-size: 14px; line-height: 1.6; font-weight: 500; text-align: center; }

.team-section-title {
  max-width: 1200px; margin: 40px auto 0;
  padding: 0 40px;
  font-family: 'Bebas Neue'; font-size: 32px; letter-spacing: 0.1em;
  color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 12px;
}

/* ══════════════════════════════════
   LEGAL PAGE
══════════════════════════════════ */
.legal-content {
  max-width: 900px; margin: 0 auto; padding: 60px 40px;
}
.legal-content h2 {
  font-family: 'Bebas Neue'; font-size: 36px; letter-spacing: 0.08em;
  color: var(--pink); margin: 40px 0 16px;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: 0.08em; color: rgba(255,255,255,0.8); margin: 24px 0 10px; }
.legal-content p { color: var(--muted); line-height: 1.8; font-size: 15px; font-weight: 500; margin-bottom: 14px; }
.legal-content p strong { color: var(--text); }
.legal-content ul { margin: 10px 0 16px 20px; }
.legal-content ul li { color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.7; margin-bottom: 6px; }
.legal-box {
  background: rgba(200,16,46,0.08); border: 1px solid rgba(200,16,46,0.3);
  border-left: 3px solid var(--red); border-radius: 4px;
  padding: 20px 24px; margin: 20px 0;
}
.legal-box p { color: var(--text) !important; margin: 0; }
.discord-link { color: var(--pink); text-decoration: none; font-weight: 700; }
.discord-link:hover { text-decoration: underline; }

/* ─── FOOTER ─── */
footer {
  background: var(--dark2); border-top: 1px solid var(--border);
  padding: 40px; margin-top: 40px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { height: 50px; filter: drop-shadow(0 0 15px rgba(200,16,46,0.5)); }
.footer-brand .brand-text { }
.footer-brand .brand-text strong { font-family: 'Bebas Neue'; font-size: 24px; letter-spacing: 0.1em; display: block; background: linear-gradient(135deg, #fff, var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-brand .brand-text span { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.footer-col h4 { font-family: 'Bebas Neue'; font-size: 18px; letter-spacing: 0.15em; color: var(--pink); margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--pink); }
.footer-bottom {
  max-width: 1200px; margin: 30px auto 0; padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}
.footer-bottom span { font-size: 13px; color: var(--muted); font-weight: 500; }

/* ─── DISCORD BADGE ─── */
.discord-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #5865F2; color: #fff;
  padding: 12px 24px; border-radius: 4px;
  font-family: 'Bebas Neue'; font-size: 20px; letter-spacing: 0.15em;
  text-decoration: none; transition: all 0.3s;
  box-shadow: 0 0 25px rgba(88,101,242,0.4);
}
.discord-badge:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 0 40px rgba(88,101,242,0.6); }
.discord-badge svg { width: 22px; height: 22px; fill: #fff; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  nav ul { display: none; }
  .hamburger { display: flex; }
  nav ul.open { display: flex; flex-direction: column; position: fixed; top: 70px; left: 0; right: 0; background: rgba(8,5,8,0.98); padding: 20px; border-bottom: 1px solid var(--border); gap: 4px; }
  .hero-logo { width: 140px; }
  .legal-content { padding: 40px 20px; }
  .team-grid { padding: 40px 20px; }
  .section { padding: 60px 20px; }
}