@font-face{font-family:'Archivo';font-weight:400 800;font-display:swap;src:url('/assets/fonts/archivo-latin-var.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrainsmono-500-latin.woff2') format('woff2')}

*{box-sizing:border-box;margin:0}
:root{--bg:#0B0C0E;--surface:#15181C;--line:rgba(255,255,255,.09);--ink:#F3F5F2;--ink2:#B2B8BD;--ink3:#7C848B;--watt:#CDFF2E;color-scheme:dark}
html{background:var(--bg)}
body{min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);font-family:'Archivo',system-ui,-apple-system,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-color:var(--bg);background-image:radial-gradient(620px 420px at 50% 6%,rgba(205,255,46,.08),transparent 60%);background-repeat:no-repeat}
a{color:var(--watt)}
code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.88em;color:var(--ink)}
:focus-visible{outline:2px solid var(--watt);outline-offset:3px;border-radius:4px}

.top{width:100%;max-width:860px;margin:0 auto;padding:22px 24px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand .dot{width:11px;height:11px;border-radius:3px;background:var(--watt);box-shadow:0 0 12px var(--watt)}
.brand span{color:var(--ink3);font-weight:600}

.hero{flex:1;width:100%;max-width:640px;margin:0 auto;padding:32px 24px 56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--watt);display:inline-flex;align-items:center;gap:9px}
.code::before{content:"";width:22px;height:1px;background:var(--watt);opacity:.7}
h1{font-size:clamp(2.2rem,7vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:20px 0 0;overflow-wrap:anywhere}
.lead{color:var(--ink2);font-size:1.1rem;line-height:1.6;margin-top:16px;max-width:44ch}
.btn{display:inline-flex;align-items:center;gap:9px;margin-top:30px;background:var(--watt);color:#0B0C0E;font-weight:700;font-size:.95rem;padding:14px 22px;border-radius:9px;text-decoration:none;box-shadow:0 10px 30px -12px rgba(205,255,46,.45)}
.btn:hover{background:#A6D400}
.btn:active{transform:translateY(1px)}
.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--watt);border-radius:8px;padding:16px 18px;margin:36px 0 0;font-size:.95rem;color:var(--ink2);max-width:60ch}
.note h2{font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}

.foot{width:100%;max-width:860px;margin:0 auto;padding:22px 24px 32px;border-top:1px solid var(--line);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.75rem;color:var(--ink3);display:flex;gap:6px 20px;flex-wrap:wrap}
.foot a{color:var(--ink2);text-decoration:none;padding:6px 0}
.foot a:hover{color:var(--watt)}
.foot span{padding:6px 0}

/* Rechtsseiten */
.legal{flex:1;width:100%;max-width:860px;margin:0 auto;padding:24px 24px 56px}
.legal h1{font-size:clamp(1.6rem,5vw,3rem);margin:14px 0 8px}
.legal h2{font-size:1.25rem;font-weight:700;margin:36px 0 10px;letter-spacing:-.01em;overflow-wrap:anywhere}
.legal p,.legal li{color:var(--ink2);max-width:70ch;overflow-wrap:anywhere}
.legal p+p{margin-top:12px}
.legal ul{margin:8px 0 8px 20px}
.legal li{margin:4px 0}
.legal address{font-style:normal;color:var(--ink)}
.legal .note{margin:24px 0}

@media (max-width:480px){
  .top{padding:18px 20px}
  .hero{padding:24px 20px 48px}
  .legal{padding:16px 20px 48px}
  .foot{padding:20px 20px 28px}
  .btn{width:100%;justify-content:center}
}