@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("/pub/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("/pub/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/pub/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/pub/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/pub/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #07060b;
  --surface: #121019;
  --surface-2: #19151f;
  --surface-3: #221d2b;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --grid: rgba(255, 255, 255, 0.06);
  --text: #f3f1f8;
  --text-2: #bdb7cb;
  --text-3: #837d93;
  --accent: #b97cff;
  --accent-strong: #9d5cf6;
  --accent-soft: rgba(185, 124, 255, 0.14);
  --accent-line: rgba(185, 124, 255, 0.45);
  --good: #0ca30c;
  --good-text: #3fc463;
  --bad: #d03b3b;
  --bad-text: #ef6b63;
  --radius: 18px;
  --radius-sm: 12px;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Hintergrund: violettes Leuchten und ein feines Punktraster wie im Vorbild */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 600px at 82% 18%, rgba(120, 60, 200, 0.22), transparent 65%),
    radial-gradient(800px 600px at 8% 92%, rgba(110, 40, 170, 0.20), transparent 65%),
    radial-gradient(700px 420px at 50% 42%, rgba(40, 60, 110, 0.18), transparent 70%),
    var(--bg);
}
.sky::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 85%);
}
.sky::after {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; left: 55%; top: -20%;
  background: radial-gradient(circle, rgba(185, 124, 255, 0.10), transparent 60%);
  animation: drift 28s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-30vw, 35vh) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .sky::after { animation: none; } }

a { color: inherit; text-decoration: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 16px var(--body); color: var(--accent); }
.brand svg { width: 26px; height: 26px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 500 16px var(--body); color: var(--accent);
  padding: 10px 14px 10px 16px; border-radius: 10px;
  background: rgba(185, 124, 255, 0.07); border: 1px solid var(--accent-line);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.btn:hover { background: rgba(185, 124, 255, 0.15); box-shadow: 0 0 32px rgba(185, 124, 255, 0.25); transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }
.btn-plain { background: none; border-color: transparent; color: var(--text); font-weight: 600; }
.btn-plain:hover { box-shadow: none; background: rgba(255, 255, 255, 0.04); }
.btn-small { font-size: 13px; padding: 5px 10px; border-radius: 8px; }

.accent { color: var(--accent); }