:root{
  --bg:#0c0f12;
  --bg-alt:#11161b;
  --text:#e7ecf2;
  --muted:#a8b0bb;
  --accent:#67f3a2; /* grünlich, NOIR-Accent */
  --card:#0f1419;
  --border:#1b222b;
  --max:1120px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;border-radius:12px}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:auto;padding:0 20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.narrow{max-width:760px;margin-inline:auto}

.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;background:#000;color:#fff;padding:8px 12px;border-radius:8px}

.site-header{position:sticky;top:0;background:rgba(12,15,18,.7);backdrop-filter:blur(8px);z-index:50;border-bottom:1px solid var(--border)}
.logo{font-weight:800;letter-spacing:.3px}
.logo span{color:var(--accent)}
.site-nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:16px 0}
.site-nav a{padding:10px 12px;border-radius:12px}
.site-nav a:hover{background:var(--bg-alt)}

.nav-toggle{display:none;gap:4px;background:none;border:1px solid var(--border);padding:10px;border-radius:12px}
.nav-toggle .bar{display:block;width:20px;height:2px;background:#fff;margin:3px 0}

.btn{display:inline-block;background:var(--accent);color:#000;font-weight:700;padding:12px 18px;border-radius:14px}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}

.hero{padding:88px 0 72px;background:radial-gradient(1200px 700px at 80% -20%, rgba(103,243,162,.15), transparent)}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 12px}
.hero .accent{color:var(--accent)}
.actions{display:flex;gap:12px;margin-top:16px}

.section{padding:64px 0}
.section.alt{background:var(--bg-alt)}
.card{background:var(--card);padding:22px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.card h3{margin:4px 0 8px}

.thumb figcaption{margin-top:10px;color:var(--muted);font-size:14px}

.form input,.form textarea{
  width:100%;padding:12px 14px;background:#0b0f13;border:1px solid var(--border);
  border-radius:12px;color:var(--text)
}
.form label{display:grid;gap:8px}
.form .form-msg{margin-top:8px;color:var(--accent);min-height:1.4em}

.site-footer{border-top:1px solid var(--border);padding:18px 0;color:var(--muted)}
.site-footer nav{display:flex;gap:14px}

@media (max-width:900px){
  .grid-3{grid-template-columns:1fr 1fr}
  .hero h1{font-size:34px}
}
@media (max-width:640px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .nav-toggle{display:flex}
  .site-nav{position:absolute;right:16px;top:64px;background:var(--bg-alt);border:1px solid var(--border);
    padding:10px;border-radius:14px;display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:6px;padding:6px}
}