:root {
  --bg: #0d0f1a;
  --bg-soft: #11132b;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #7c3aed;
  --accent2: #a78bfa;
  --accent3: #c4b5fd;
  --card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.07);
  --glow: rgba(167,139,250,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:"Inter",system-ui,sans-serif; }
html { scroll-behavior:smooth; }

body {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 20% 10%, rgba(124,58,237,0.08), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(167,139,250,0.07), transparent 50%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}

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

.logo { font-weight:700; font-size:1.3rem; letter-spacing:0.5px; color:var(--text); }
.logo span { color:var(--accent2); }

/* Logo-Link nie unterstrichen */
a.logo, .logo a { text-decoration:none; color:var(--text); }

/* Hauptinhalt wächst, Footer bleibt unten */
.page-content {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
}

/* ─── bg-grid ─── */
.bg-grid {
  position:fixed; will-change:background-position; inset:0;
  background-image:
    linear-gradient(rgba(167,139,250,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,0.04) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  animation:move 60s linear infinite;
  opacity:1; z-index:-1;
}
@keyframes move { from { background-position:0 0; } to { background-position:400px 400px; } }

/* ─── Header ─── */
header {
  max-width:1100px; margin:0 auto; padding:40px 20px;
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}

.header-nav { display:flex; gap:6px; align-items:center; }
.header-nav a {
  padding:7px 16px; border-radius:999px; font-size:0.85rem;
  color:var(--muted); transition:all 0.2s ease;
  border:1px solid transparent;
}
.header-nav a:hover { color:var(--text); background:var(--card); border-color:var(--border); }
.header-nav a.active {
  color:var(--accent2);
  border-color:rgba(167,139,250,0.3);
  background:rgba(167,139,250,0.08);
}
.header-nav a.cta {
  color:#fff; background:var(--accent); border-color:var(--accent);
  font-weight:600; transition:opacity 0.2s ease;
}
.header-nav a.cta:hover { opacity:0.85; }

/* ─── Hero ─── */
.hero { max-width:1100px; margin:0 auto; padding:90px 20px 50px; text-align:left; }
.hero-kicker {
  display:inline-block; margin-bottom:14px; padding:6px 12px;
  border-radius:999px; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--accent3); background:rgba(167,139,250,0.1); border:1px solid rgba(167,139,250,0.22);
}
.hero h1 { font-size:clamp(2.5rem,5vw,3.7rem); font-weight:700; margin-bottom:20px; line-height:1.12; max-width:900px; }
.hero h1 span { color:var(--accent2); }
.hero p { max-width:680px; color:var(--muted); font-size:1.05rem; margin-bottom:32px; }

.hero-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; }
.btn-primary {
  display:inline-block; padding:12px 24px; border-radius:999px;
  font-size:0.92rem; font-weight:600;
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  transition:opacity 0.2s ease;
}
.btn-primary:hover { opacity:0.85; }
.btn-ghost {
  display:inline-block; padding:12px 24px; border-radius:999px;
  font-size:0.92rem; font-weight:600;
  background:transparent; color:var(--text); border:1px solid var(--border);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover { border-color:rgba(167,139,250,0.4); color:var(--accent2); }

/* ─── Generic Section ─── */
section { max-width:1100px; margin:0 auto; padding:80px 20px; }
h2 { font-size:2rem; margin-bottom:18px; }
.section-intro { max-width:760px; color:var(--muted); margin-bottom:36px; }

/* ─── Footer ─── */
footer {
  border-top:1px solid var(--border);
  padding:30px 20px 24px; text-align:center;
  color:var(--muted); font-size:0.9rem;
}

footer a { color:var(--accent2); margin:0 10px; }

/* ─── Responsive ─── */
@media(max-width:720px) {
  header { flex-direction:column; align-items:flex-start; }
  .header-nav { flex-wrap:wrap; }
  .hero { padding:70px 20px 40px; }
  h2 { font-size:1.7rem; }
  .hero h1 { font-size:2.35rem; }
}

.hero > *, section > *, .content-wrapper > * { max-width:100%; }
.hero p, .section-intro, .feature-card p, .status-main p, .status-card p, .cta-card p, .latest-body p, .tl-card p, .info-card p { text-align:left; }
header, .hero, section, .content-wrapper, footer { width:100%; }