/* ========== Basis ========== */
* {margin:0;padding:0;box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {
  font-family:'Poppins',sans-serif;
  background:#0a0a0a;
  color:#f0f0f0;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3 {font-weight:800;letter-spacing:1px;}
h2 span {color:#00ff66;}
a {text-decoration:none;color:inherit;transition:color .3s ease;}
a:hover {color:#00ff66;}

/* ======= Loader ======= */
#loader {
  position:fixed;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#0a0a0a;z-index:3000;transition:opacity .8s,visibility .8s;
}
#loader.hide {opacity:0;visibility:hidden;}
.loader-content {text-align:center;}
.loader-spinner {
  width:40px;height:40px;border:4px solid #222;
  border-top:4px solid #00ff66;border-radius:50%;
  margin:0 auto 1rem auto;animation:spin 1s linear infinite;
}
@keyframes spin {to{transform:rotate(360deg);}}
.loader-text {font-size:1.5rem;font-weight:800;color:#00ff66;animation:loaderPulse 1.6s infinite;}
@keyframes loaderPulse {0%,100%{opacity:1;}50%{opacity:.5;}}

/* ======= Navigation ======= */
header {position:fixed;top:0;left:0;width:100%;z-index:1000;transition:background .3s,box-shadow .3s;}
.navbar {display:flex;justify-content:space-between;align-items:center;padding:1rem 10%;}
.navbar .logo {font-weight:800;font-size:1.4rem;color:#00ff66;display:flex;align-items:center;gap:.5rem;}
.nav-links {display:flex;gap:2rem;}
.nav-links a {position:relative;font-weight:600;}
.nav-links a::after {
  content:"";position:absolute;width:0;height:2px;background:#00ff66;left:0;bottom:-4px;transition:.3s;
}
.nav-links a:hover::after {width:100%;}
.nav-discord {
  background:linear-gradient(90deg,#5865F2,#00ccff);
  color:#fff !important;padding:.4rem .8rem;border-radius:20px;
  font-weight:600;margin-left:1rem;transition:transform .3s,box-shadow .3s;
}
.nav-discord:hover {transform:translateY(-3px);box-shadow:0 0 15px rgba(88,101,242,.7);}
header.scrolled {background:rgba(10,10,10,.85);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.5);}
.burger {display:none;font-size:1.8rem;cursor:pointer;color:#f0f0f0;}
@media(max-width:768px){
  .nav-links {
    position:fixed;top:0;right:-100%;
    flex-direction:column;gap:1.5rem;background:#111;
    width:70%;height:100%;padding-top:5rem;transition:.3s;
  }
  .nav-links.show {right:0;}
  .burger {display:block;}
  .nav-discord {margin:1rem 0 0 0;}
}

/* ======= Hero ======= */
.hero {
  position:relative;height:100vh;display:flex;justify-content:center;align-items:center;
  text-align:center;overflow:hidden;
  background:radial-gradient(circle at top,#0f0f0f 0%,#0a0a0a 100%);
}
#particles {position:absolute;top:0;left:0;width:100%;height:100%;}
.hero-content {position:relative;z-index:2;}
#gamepad-icon {font-size:4rem;color:#00ff66;margin-bottom:1rem;}
#glitch-text {
  display:inline-block;font-size:3.5rem;color:#fff;
  animation:glitch 1s infinite;
}
@keyframes glitch {
  0%{text-shadow:2px 0 #ff00c1,-2px 0 #00fff9;}
  20%{text-shadow:-2px 0 #ff00c1,2px 0 #00fff9;}
  40%{text-shadow:2px 2px #ff00c1,-2px -2px #00fff9;}
  60%{text-shadow:-2px -2px #ff00c1,2px 2px #00fff9;}
  80%{text-shadow:2px -2px #ff00c1,-2px 2px #00fff9;}
  100%{text-shadow:2px 0 #ff00c1,-2px 0 #00fff9;}
}
.btn-primary {
  display:inline-block;margin-top:1.2rem;padding:.6rem 1.6rem;
  background:linear-gradient(90deg,#00ff66,#00ccff);
  color:#000;font-weight:700;border-radius:30px;
  transition:transform .3s,box-shadow .3s;
}
.btn-primary:hover {transform:translateY(-4px);box-shadow:0 0 15px rgba(0,255,102,.6);}
.btn-secondary {
  display:inline-block;margin-top:1.2rem;padding:.6rem 1.6rem;
  background:transparent;border:2px solid #00ccff;color:#00ccff;
  border-radius:30px;transition:.3s;margin-left:.5rem;
}
.btn-secondary:hover {background:#00ccff;color:#000;}
.glow-btn {box-shadow:0 0 15px rgba(0,255,102,.5);}

/* ======= Sections ======= */
section {padding:4rem 10%;}
.title-glow {text-shadow:0 0 10px #00ff66;text-align:center;margin-bottom:2rem;}

/* ======= Projekte ======= */
.projects-grid {
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.project-card {
  background:#161616;border-radius:15px;overflow:hidden;
  box-shadow:0 0 15px rgba(0,255,102,.1);
  transition:transform .3s,box-shadow .3s;
  display:flex;flex-direction:column;
}
.project-card:hover {transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,255,102,.25);}
.project-image {height:140px;overflow:hidden;}
.project-image img {width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.project-card:hover .project-image img {transform:scale(1.05);}
.project-info {padding:1rem;text-align:center;}
.project-info i {font-size:1.7rem;color:#00ff66;margin-bottom:.3rem;display:block;}
.project-info h3 {font-size:1.1rem;font-weight:700;color:#00ff66;margin-bottom:.3rem;}
.project-info p {font-size:.85rem;color:#ddd;}
.project-info a {display:inline-block;margin-top:.4rem;font-size:.85rem;font-weight:600;color:#00ccff;transition:.3s;}
.project-info a:hover {color:#00ff66;}

/* ======= Features ======= */
.features {background:#0f0f0f;text-align:center;}
.features-grid {display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.feature i {font-size:1.8rem;color:#00ccff;margin-bottom:.4rem;}
.feature h3 {color:#00ff66;margin-bottom:.3rem;}
.feature p {font-size:.85rem;color:#ccc;}

/* ======= Timeline ======= */
.about {text-align:center;}
.timeline-item {display:flex;align-items:center;justify-content:center;margin-bottom:2rem;flex-wrap:wrap;}
.timeline-circle {
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,#00ff66,#00ccff);
  display:flex;align-items:center;justify-content:center;
  color:#000;font-weight:700;margin-right:1rem;
  box-shadow:0 0 15px rgba(0,255,102,.3);
}
.timeline-content {
  background:#161616;padding:.8rem 1.2rem;border-radius:10px;max-width:500px;color:#ddd;
}

/* ======= Statistiken ======= */
.stats {
  background:#0f0f0f;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  padding:3rem 10%;
  text-align:center;
}
.stat h3 {font-size:1.8rem;color:#00ff66;margin-bottom:.3rem;animation:countPulse 2s infinite;}
.stat p {font-size:.85rem;color:#ccc;}
@keyframes countPulse {0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

/* ======= Team ======= */
.team-alt {text-align:center;}
.role-block {margin-bottom:2rem;}
.avatars {display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;}
.avatar img {
  width:70px;height:70px;border-radius:50%;
  border:2px solid #00ff66;transition:.3s;
  background:#111;padding:5px;box-shadow:0 0 10px rgba(0,255,102,.3);
}
.avatar:hover img {transform:scale(1.15);box-shadow:0 0 20px rgba(0,255,102,.7);}
.avatar span {display:block;margin-top:.25rem;font-size:.85rem;color:#ccc;}

/* ======= Social ======= */
.social {text-align:center;}
.social-icons {
  display:flex;justify-content:center;gap:1.2rem;
  font-size:1.8rem;margin-top:1rem;
}
.social-icons a {color:#ccc;transition:.3s;}
.social-icons a:hover {color:#00ff66;transform:scale(1.15);}

/* ======= CTA ======= */
.cta {
  background:linear-gradient(135deg,#00ff66,#00ccff);
  color:#000;text-align:center;
  padding:3rem 10%;border-radius:15px;
  box-shadow:0 0 25px rgba(0,255,102,.3);
}
.cta h2 {font-size:2rem;margin-bottom:1rem;}
.cta span {color:#fff;text-shadow:0 0 10px #000;}

/* ======= Footer ======= */
footer {background:#0a0a0a;padding:2rem;text-align:center;font-size:.85rem;color:#aaa;}
footer a {color:#00ccff;margin:0 .3rem;}
footer a:hover {color:#00ff66;}
.footer-content {
  display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;margin-bottom:1rem;
}
.footer-section h4 {color:#00ff66;margin-bottom:.5rem;}
.footer-bottom {font-size:.8rem;color:#777;}

/* ======= Cookie-Banner ======= */
#cookie-banner {
  position:fixed;bottom:20px;left:20px;right:20px;
  background:rgba(20,20,20,.95);
  padding:1rem 1.5rem;border-radius:10px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  font-size:.9rem;color:#eee;
  box-shadow:0 0 20px rgba(0,255,102,.3);
  z-index:2000;animation:fadeInUp .8s ease;
}
@keyframes fadeInUp {
  from {opacity:0;transform:translateY(30px);}
  to {opacity:1;transform:translateY(0);}
}
.cookie-actions {display:flex;gap:.6rem;align-items:center;margin-top:.6rem;}
#cookie-accept,#cookie-decline {
  padding:.5rem 1rem;border:none;border-radius:6px;
  cursor:pointer;font-weight:600;transition:.3s;
}
#cookie-accept {
  background:linear-gradient(90deg,#00ff66,#00ccff);color:#000;
}
#cookie-decline {
  background:#333;color:#eee;
}
#cookie-accept:hover {box-shadow:0 0 12px rgba(0,255,102,.5);}
#cookie-decline:hover {background:#444;}

/* ======= Responsive ======= */
@media(max-width:768px){
  section {padding:4rem 6%;}
  .projects-grid {grid-template-columns:1fr;}
  .project-image {height:100px;}
  .features-grid {grid-template-columns:1fr;}
  .stats {grid-template-columns:1fr;padding:2.5rem 6%;}
  .timeline-item {flex-direction:column;align-items:flex-start;}
  .timeline-circle {margin-bottom:.5rem;}
  .cta {padding:3rem 6%;}
  #cookie-banner {flex-direction:column;gap:.8rem;}
}