:root{
--bg:#0b0f0c; /* sehr dunkles Grün/Schwarz */
--panel:#121712; /* Paneel */
--txt:#e6ffe9; /* helle Schrift mit leichtem Grün */
--muted:#9bd2a5;
--brand:#39FF14; /* Neon‑Grün */
--brand-25: rgba(57,255,20,.25);
--danger:#ff3952;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: radial-gradient(1200px 600px at 20% -20%, var(--brand-25), transparent), var(--bg);
color:var(--txt); line-height:1.6;
}
.wrap{width:min(1100px, 92%); margin:auto}


/* Header */
.site-header{position:sticky; top:0; z-index:50; background:linear-gradient(#0b0f0cE6,#0b0f0cE6); backdrop-filter: blur(6px); border-bottom:1px solid #1c261c}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{font-weight:800; letter-spacing:.3px; text-decoration:none; color:var(--txt)}
.brand span{color:var(--brand)}
nav a{color:var(--muted); margin-left:1rem; text-decoration:none}
nav a:hover, nav a.active{color:var(--brand)}


/* Hero */
.hero{padding:6rem 0 4rem; background: radial-gradient(800px 400px at 80% -30%, var(--brand-25), transparent)}
.hero__inner{text-align:center}
.hero h1{font-size: clamp(2rem, 4vw, 3rem); margin:0 0 .5rem}
.hero p{color:var(--muted); margin:0 0 1.2rem}


/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.4rem; padding:.75rem 1.1rem; border-radius:14px; border:1px solid #2a362a; cursor:pointer; font-weight:600; text-decoration:none}
.btn-primary{background:linear-gradient(180deg, var(--brand), #27d40a); color:#031003; border-color:#1f2a1f; box-shadow: 0 10px 24px rgba(57,255,20,.18)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:#121712; color:var(--txt)}
.btn-ghost:hover{border-color:var(--brand)}


/* Quick status */
.quick-status{display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; color:var(--muted); font-size:.95rem}
.dot{width:10px; height:10px; border-radius:99px; display:inline-block; background:#666}
.dot--up{background:var(--brand)}
.dot--down{background:var(--danger)}
.dot--unknown{background:#666}


/* Sections */
.features{padding:3rem 0}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem}
.card{background:var(--panel); border:1px solid #1c261c; border-radius:18px; padding:1.1rem}
.cards .card h3{margin:.2rem 0 .4rem}


.steps{counter-reset: step; list-style:none; padding-left:0}
.steps li{position:relative; margin:.6rem 0 .6rem 2.4rem}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; left:-2.4rem; top:.1rem; width:1.8rem; height:1.8rem; border-radius:12px; background:#132013; border:1px solid #1c261c; display:grid; place-items:center; color:var(--brand); font-weight:700}


/* Status page */
.status-card{background:var(--panel); border:1px solid #1c261c; border-radius:18px; padding:1.1rem; margin:1rem 0}
.status-card .row{display:flex; gap:1rem; align-items:center; justify-content:space-between}
.badge{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; background:#0f140f; border:1px solid #1c261c; border-radius:12px}
.playerlist{margin:.2rem 0 0; padding:0 0 0 1.2rem}
.glow{ text-shadow: 0 0 12px rgba(57,255,20,.6), 0 0 36px rgba(57,255,20,.3); }