/* Basis */
:root{
  --bg:#1a1a1a;           /* Dunkles Anthrazit statt fast schwarz */
  --panel:#2b2b33;        /* Etwas helleres Panel */
  --accent:#ff00c1;
  --muted:#ccc;           /* Helleres Grau für "muted" Text */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, "Helvetica Neue", Arial, sans-serif;
  background:linear-gradient(180deg,#2a2a2a 0%, #1a1a1a 100%); /* heller als vorher */
  color:#eee;             /* fast weiß, aber etwas softer */
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
}

/* Header */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  background:rgba(30,30,30,0.8); /* heller als vorher */
  border-bottom:1px solid rgba(255,255,255,0.1);
  z-index:40;
}
.logo{font-size:1.1rem}
.logo span{font-size:0.7rem; color:var(--muted); margin-left:8px}
.main-nav a{color:#eee; margin-left:14px; text-decoration:none; font-size:0.95rem}

/* Hero */
.hero{
  margin-top:64px;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image: url('images/rave-bg.jpg');
  background-size:cover;
  background-position:center;
  position:relative;
  padding:48px 20px;
}
.hero::after{
  content:"";
  position:absolute; inset:0; 
  background:linear-gradient(180deg,rgba(0,0,0,0.3),rgba(0,0,0,0.4)); /* weniger dunkel */
}
.hero-inner{position:relative; z-index:2; max-width:900px}
.hero h1{font-size:2.2rem; margin:0 0 8px}
.sub{color:var(--muted); margin-bottom:18px}
.btn-primary{
  background:var(--accent);
  color:#000;
  padding:12px 20px;
  border-radius:10px;
  border:none;
  font-weight:700;
  cursor:pointer;
  margin-right:10px;
}
.btn-ghost{
  background:transparent;
  color:#eee;
  border:1px solid rgba(255,255,255,0.2);
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
}

/* Panels */
.panel{
  padding:48px 20px; 
  background:linear-gradient(180deg,rgba(255,255,255,0.05),transparent);
}
.panel h2{margin-top:0}

/* Columns in Handbuch */
.cols{
  display:flex; gap:20px; justify-content:space-around; flex-wrap:wrap;
}
.cols article{
  background:var(--panel); 
  padding:18px; 
  border-radius:10px; 
  width:300px;
  color:#ddd;
}

/* Interactive area */
.interactive{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); 
  gap:16px; margin-top:16px;
}
.card{
  background:#1d1d22;
  padding:16px;
  border-radius:12px;
  text-align:left;
  color:#ddd;
}
.generator select{
  margin-right:6px;
  padding:6px;
  border-radius:6px;
  border:none;
  background:#2a2a2a;
  color:#eee;
}
.btn-small{
  padding:8px 10px;
  border-radius:8px;
  border:none;
  background:#444;
  color:#eee;
  cursor:pointer;
  margin-top:6px;
}
.nameOutput{
  margin-top:10px;
  font-weight:700;
  color:var(--accent);
}
.quizResult{
  margin-top:10px;
  color:var(--muted);
}

/* Bass card */
.bass-card input[type="range"]{
  width:100%;
}
#wobbleTarget{
  height:40px;
  margin-top:12px;
  border-radius:8px;
  background:linear-gradient(90deg,#222,#1d1d22);
}

/* Facts gallery */
.facts{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.facts figure{
  width:32%; 
  min-width:180px; 
  background:#1d1d22;
  padding:8px;
  border-radius:8px;
  color:#ddd;
}
.facts img{
  width:100%; 
  height:120px; 
  object-fit:cover; 
  border-radius:6px;
}
.facts figcaption{
  font-size:0.9rem;
  color:var(--muted);
  margin-top:6px;
}

/* Community */
.community-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
.tile{
  background:#1d1d22;
  padding:12px;
  border-radius:10px;
  color:#ddd;
}
textarea{
  width:100%;
  min-height:80px;
  padding:8px;
  border-radius:8px;
  background:#2a2a2a;
  color:#eee;
  border:none;
}

/* Footer */
.site-footer{
  padding:18px 20px;
  text-align:center;
  background:#1a1a1a;
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:20px;
  font-size:0.9rem;
  color:#ddd;
}

/* Easter egg overlay */
.egg-overlay{
  position:fixed; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.85));
  display:flex; align-items:center; justify-content:center;
  z-index:60; flex-direction:column;
}
#eggCanvas{
  width:100%; height:100%; display:block;
}
.close-egg{
  position:fixed; top:14px; right:18px; z-index:100;
  background:#444; color:#eee;
  border-radius:8px;
  padding:8px;
}
.egg-score{
  position:fixed; top:18px; left:18px; font-weight:700;
  color:#eee;
}

/* Responsive */
@media (max-width:800px){
  .cols{
    flex-direction:column;
    align-items:center;
  }
  .facts figure{
    width:100%;
  }
}