/* ============================================================
   GALAKTIKUS AI — GKAI Website Stylesheet
   Dunkles Kosmos-Design · Violett/Cyan/Schwarz · self-contained
   Nebel-Gradients, Planeten/Orbits, Parallax-Sternenfelder,
   Kometen, Glow-Effekte · mobil-first · prefers-reduced-motion
   ============================================================ */

:root {
  --bg: #080618;
  --bg-2: #0d0b24;
  --panel: #12102e;
  --panel-2: #1e1b4b;
  --border: #2e2a5e;
  --violet: #8b5cf6;
  --violet-light: #a78bfa;
  --cyan: #22d3ee;
  --cyan-soft: #cff5ff;
  --text: #e9e6ff;
  --muted: #a5a0c8;
  --danger: #f87171;
  --ok: #34d399;
  --radius: 14px;
  --maxw: 1120px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans Arabic", "Noto Sans", "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============================================================
   KOSMOS: Sternenfelder, Nebel, Planeten, Kometen
   (reines CSS/JS, keine externen Assets)
   ============================================================ */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  --py: 0; /* Parallax-Offset via JS (js/cosmos.js) */
}

/* ---------- Nebel-Gradients ---------- */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform, opacity;
  animation: nebulaShift 46s ease-in-out infinite alternate;
}
.nebula.n1 {
  width: 65vw; height: 65vw; max-width: 900px; max-height: 900px;
  top: -18%; left: -12%;
  background: radial-gradient(circle at 40% 40%, rgba(139, 92, 246, .30), rgba(139, 92, 246, .08) 55%, transparent 72%);
  animation-duration: 52s;
}
.nebula.n2 {
  width: 55vw; height: 55vw; max-width: 800px; max-height: 800px;
  top: 8%; right: -14%;
  background: radial-gradient(circle at 55% 45%, rgba(34, 211, 238, .22), rgba(34, 211, 238, .06) 55%, transparent 72%);
  animation-duration: 64s;
  animation-delay: -18s;
}
.nebula.n3 {
  width: 75vw; height: 60vw; max-width: 1000px; max-height: 800px;
  bottom: -22%; left: 18%;
  background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, .18), rgba(99, 61, 220, .07) 55%, transparent 74%);
  animation-duration: 58s;
  animation-delay: -32s;
}
@keyframes nebulaShift {
  0%   { transform: translate(0, 0) scale(1); opacity: .85; }
  50%  { transform: translate(3vw, 2vh) scale(1.08); opacity: 1; }
  100% { transform: translate(-2vw, -2vh) scale(.96); opacity: .8; }
}

/* ---------- Sternenfelder (4 Tiefen, Drift + Twinkle) ----------
   Parallax: JS setzt --py, Ebenen reagieren unterschiedlich stark. */
.stars {
  position: absolute;
  inset: -40%;
  background-repeat: repeat;
  will-change: transform;
}
.stars.s1 {
  background-image:
    radial-gradient(1.7px 1.7px at 40px 60px, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(1.2px 1.2px at 160px 130px, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px 1px at 90px 210px, rgba(207,245,255,.55), transparent 55%),
    radial-gradient(1.5px 1.5px at 220px 40px, rgba(255,255,255,.5), transparent 55%);
  background-size: 260px 260px;
  animation: drift 340s linear infinite, twinkle 7s ease-in-out infinite;
  translate: 0 calc(var(--py) * 8px);
}
.stars.s2 {
  background-image:
    radial-gradient(2.1px 2.1px at 70px 120px, rgba(167,139,250,.8), transparent 55%),
    radial-gradient(1.4px 1.4px at 190px 30px, rgba(34,211,238,.6), transparent 55%),
    radial-gradient(1.1px 1.1px at 30px 190px, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1.6px 1.6px at 240px 220px, rgba(255,255,255,.45), transparent 55%);
  background-size: 380px 380px;
  animation: drift 220s linear infinite reverse, twinkle 9s ease-in-out infinite;
  opacity: .85;
  translate: 0 calc(var(--py) * 22px);
}
.stars.s3 {
  background-image:
    radial-gradient(1.3px 1.3px at 120px 80px, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1px 1px at 250px 170px, rgba(207,245,255,.55), transparent 55%),
    radial-gradient(1.9px 1.9px at 60px 240px, rgba(255,255,255,.65), transparent 55%);
  background-size: 460px 460px;
  animation: drift 480s linear infinite, twinkle 11s ease-in-out infinite;
  opacity: .6;
  translate: 0 calc(var(--py) * 40px);
}
.stars.s4 {
  background-image:
    radial-gradient(2.6px 2.6px at 140px 90px, rgba(207,245,255,.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 30px 260px, rgba(167,139,250,.6), transparent 55%),
    radial-gradient(2px 2px at 280px 300px, rgba(255,255,255,.7), transparent 55%);
  background-size: 620px 620px;
  animation: drift 700s linear infinite, twinkle 13s ease-in-out infinite;
  opacity: .5;
  translate: 0 calc(var(--py) * 65px);
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-460px, -260px, 0); }
}
@keyframes twinkle {
  0%, 100% { opacity: .55; }
  50% { opacity: .95; }
}
/* .s2/.s4 twinkle-Basis leicht versetzt */
.stars.s2 { animation-delay: 0s, -3s; }
.stars.s4 { animation-delay: -120s, -6s; }

/* ---------- Planeten mit Orbit-Ringen & Monden ---------- */
.planet {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.planet.pl1 {
  width: 150px; height: 150px;
  top: 12%; right: 7%;
  background:
    radial-gradient(circle at 32% 30%, #c4b5fd 0%, #8b5cf6 34%, #4c2f9e 68%, #241650 100%);
  box-shadow:
    0 0 60px rgba(139, 92, 246, .5),
    0 0 130px rgba(139, 92, 246, .22),
    inset -14px -18px 34px rgba(5, 3, 20, .8);
  animation: planetFloat 26s ease-in-out infinite;
  translate: 0 calc(var(--py) * -14px);
}
.planet.pl1 .moon {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, .35);
  animation: orbitSpin 22s linear infinite;
  display: block;
}
.planet.pl1 .moon::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  margin-inline-start: -4.5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, .9);
}
.planet.pl2 {
  width: 92px; height: 92px;
  bottom: 24%; left: 5%;
  background:
    radial-gradient(circle at 35% 30%, #a5f3fc 0%, #22d3ee 36%, #0e7490 70%, #083a4d 100%);
  box-shadow:
    0 0 44px rgba(34, 211, 238, .45),
    0 0 100px rgba(34, 211, 238, .18),
    inset -10px -12px 24px rgba(3, 12, 24, .75);
  animation: planetFloat 34s ease-in-out infinite reverse;
  translate: 0 calc(var(--py) * -26px);
}
.planet.pl2 .ring {
  position: absolute;
  inset: -46% -64%;
  border-radius: 50%;
  border: 2px solid rgba(207, 245, 255, .28);
  box-shadow: 0 0 18px rgba(207, 245, 255, .15);
  transform: rotate(-18deg);
  display: block;
}
.planet.pl2 .moon.m2 {
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  border: 1px dashed rgba(34, 211, 238, .3);
  animation: orbitSpin 30s linear infinite reverse;
  display: block;
}
.planet.pl2 .moon.m2::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  margin-inline-start: -3.5px;
  border-radius: 50%;
  background: var(--violet-light);
  box-shadow: 0 0 10px rgba(167, 139, 250, .9);
}
.planet.pl3 {
  width: 46px; height: 46px;
  top: 55%; right: 16%;
  background: radial-gradient(circle at 34% 30%, #f3e8ff, #c084fc 45%, #6b21a8 100%);
  box-shadow: 0 0 30px rgba(192, 132, 252, .55), inset -6px -7px 12px rgba(10, 4, 30, .6);
  animation: planetFloat 20s ease-in-out infinite;
  animation-delay: -8s;
  translate: 0 calc(var(--py) * -38px);
}
@keyframes planetFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Kometen mit glühendem Schweif ---------- */
.comet {
  position: absolute;
  width: 190px; height: 2px;
  top: 0; left: 0;
  border-radius: 999px;
  transform-origin: center;
  opacity: 0;
}
.comet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(207,245,255,.35) 55%, rgba(255,255,255,.95));
}
.comet::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px 3px rgba(207, 245, 255, .9), 0 0 34px 8px rgba(34, 211, 238, .45);
}
.comet.cm1 {
  top: 16%;
  animation: cometFly 26s linear infinite;
  animation-delay: 3s;
}
.comet.cm2 {
  top: 58%;
  animation: cometFly 37s linear infinite;
  animation-delay: 14s;
  transform: scale(.72);
}
@keyframes cometFly {
  0%   { transform: translate(-220px, -60px) rotate(14deg); opacity: 0; }
  3%   { opacity: 1; }
  46%  { opacity: 1; }
  52%  { transform: translate(120vw, 34vh) rotate(14deg); opacity: 0; }
  100% { transform: translate(120vw, 34vh) rotate(14deg); opacity: 0; }
}

/* ---------- Mobile: Kosmos schlanker halten ---------- */
@media (max-width: 640px) {
  .planet.pl1 { width: 92px; height: 92px; top: 7%; right: -6%; }
  .planet.pl2 { width: 60px; height: 60px; bottom: 30%; left: -8%; }
  .planet.pl3 { display: none; }
  .nebula { filter: blur(52px); }
  .comet.cm2 { display: none; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stars, .nebula, .planet, .planet .moon, .planet .ring { animation: none !important; }
  .comet { display: none; }
}

/* ============================================================
   Layout-Basics
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
section { padding: 64px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 .4em; }
h3 { font-size: 1.15rem; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.kicker {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}
.grad {
  background: linear-gradient(90deg, var(--violet-light), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(139, 92, 246, .35));
}

/* ============================================================
   Header / Nav / Sprachumschalter
   ============================================================ */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 6, 24, .78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(5, 3, 22, .55);
}
.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 0 8px rgba(139, 92, 246, .55)); }
.brand .b2 { color: var(--violet-light); }
nav.menu { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
nav.menu a {
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  transition: color .15s ease, background .15s ease;
}
nav.menu a:hover, nav.menu a[aria-current="page"] {
  color: var(--text);
  background: var(--panel-2);
  text-decoration: none;
}

/* Sprachumschalter (Dropdown mit Länderkennern, keine externen Icons) */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(30, 27, 75, .55);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lang-btn:hover, .lang-btn:focus-visible {
  border-color: var(--violet);
  box-shadow: 0 0 18px rgba(139, 92, 246, .35);
  outline: none;
}
.lang-btn .globe {
  width: 16px; height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, var(--cyan-soft), var(--cyan) 55%, #0e7490 100%);
  box-shadow: 0 0 8px rgba(34, 211, 238, .7), inset -2px -2px 4px rgba(3, 12, 24, .6);
}
.lang-btn .caret { font-size: .62rem; color: var(--muted); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(13, 11, 36, .97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(4, 2, 18, .7);
  z-index: 60;
}
.lang-menu[hidden] { display: none; }
.lang-menu li { margin: 0; }
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  text-align: start;
}
.lang-menu button:hover { background: var(--panel-2); }
.lang-menu button[aria-selected="true"] { color: var(--cyan); font-weight: 700; }
.lang-menu .cc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(139, 92, 246, .12);
  color: var(--violet-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

/* ============================================================
   Buttons (Premium-Glow)
   ============================================================ */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, filter .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  color: #0b0620;
  box-shadow: 0 6px 30px rgba(139, 92, 246, .45);
}
.btn-primary:hover {
  box-shadow: 0 10px 44px rgba(139, 92, 246, .65), 0 0 24px rgba(34, 211, 238, .25);
  filter: brightness(1.08);
}
.btn-ghost {
  background: rgba(139, 92, 246, .08);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--violet); box-shadow: 0 0 22px rgba(139, 92, 246, .25); }
.btn-sm { padding: 8px 18px; font-size: .9rem; }

/* ============================================================
   Hero (mit Orbit-System)
   ============================================================ */
.hero { padding: 90px 0 70px; text-align: center; position: relative; }
.orbit-system {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.orbit {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, .16);
}
.orbit.o1 { width: 430px; height: 430px; margin: -215px 0 0 -215px; animation: orbitSpin 40s linear infinite; }
.orbit.o2 { width: 610px; height: 610px; margin: -305px 0 0 -305px; border-color: rgba(34, 211, 238, .13); animation: orbitSpin 62s linear infinite reverse; }
.orbit.o3 { width: 790px; height: 790px; margin: -395px 0 0 -395px; border-style: dashed; border-color: rgba(167, 139, 250, .12); animation: orbitSpin 88s linear infinite; }
.orbit .sat {
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  margin-inline-start: -5px;
  border-radius: 50%;
  background: var(--violet-light);
  box-shadow: 0 0 14px rgba(167, 139, 250, .95), 0 0 34px rgba(139, 92, 246, .5);
}
.orbit .sat.sat-c {
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(34, 211, 238, .95), 0 0 34px rgba(34, 211, 238, .5);
  width: 8px; height: 8px;
}
@media (max-width: 900px) { .orbit.o3 { display: none; } }
@media (max-width: 640px) {
  .orbit.o1 { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
  .orbit.o2 { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
}
.hero-logo {
  width: min(190px, 42vw);
  height: auto;
  filter: drop-shadow(0 0 34px rgba(139, 92, 246, .55)) drop-shadow(0 0 70px rgba(34, 211, 238, .25));
  animation: float 7s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin: 26px 0 14px;
  letter-spacing: -.01em;
  text-shadow: 0 0 60px rgba(139, 92, 246, .3);
}
.hero .sub {
  font-size: clamp(1.02rem, 2.5vw, 1.25rem);
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto 30px;
}
.hero .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contract-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding: 8px 18px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .85rem;
  color: var(--muted);
  background: rgba(18, 16, 46, .6);
  box-shadow: 0 0 30px rgba(13, 11, 36, .8);
}
.contract-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 6px var(--cyan); }
  50% { box-shadow: 0 0 16px var(--cyan); }
}

/* ============================================================
   Stats-Strip
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.stat {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.stat:hover {
  border-color: rgba(139, 92, 246, .6);
  box-shadow: 0 0 34px rgba(139, 92, 246, .22);
  transform: translateY(-3px);
}
.stat b { display: block; font-size: 1.35rem; color: var(--cyan); text-shadow: 0 0 18px rgba(34, 211, 238, .4); }
.stat span { color: var(--muted); font-size: .88rem; }

/* ============================================================
   Cards / Grids
   ============================================================ */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  opacity: .7;
}
.card::after {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  top: -140px; inset-inline-end: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, .16), transparent 70%);
  pointer-events: none;
}
.card:hover {
  border-color: rgba(139, 92, 246, .55);
  box-shadow: 0 14px 44px rgba(9, 6, 34, .8), 0 0 30px rgba(139, 92, 246, .14);
  transform: translateY(-4px);
}
.card .icon {
  font-size: 1.9rem;
  display: inline-block;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, .5));
}
.card h3 { color: var(--text); }
.card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- Schritte ---------- */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step { position: relative; padding-left: 0; }
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  color: #0b0620;
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 14px;
  box-shadow: 0 0 22px rgba(139, 92, 246, .5), inset 0 0 12px rgba(255, 255, 255, .25);
}

/* ---------- Token-Badge / Chip-Listen ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  border: 1px solid var(--border);
  background: rgba(30, 27, 75, .5);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 600;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.pill:hover { box-shadow: 0 0 18px rgba(139, 92, 246, .25); }
.pill.cy { border-color: rgba(34, 211, 238, .45); color: var(--cyan); }
.pill.vi { border-color: rgba(167, 139, 250, .45); color: var(--violet-light); }

/* ============================================================
   Roadmap (Preview + Detail-Timeline)
   ============================================================ */
.phase-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.phase {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.phase:hover {
  border-color: rgba(34, 211, 238, .5);
  box-shadow: 0 12px 40px rgba(9, 6, 34, .8), 0 0 26px rgba(34, 211, 238, .12);
  transform: translateY(-4px);
}
.phase .q {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--cyan);
  font-size: .8rem;
  letter-spacing: .12em;
}
.phase b { display: block; margin: 6px 0 8px; font-size: 1rem; }
.phase p { margin: 0; color: var(--muted); font-size: .88rem; }

.timeline { position: relative; margin: 30px 0 0; padding-inline-start: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 9px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--violet), var(--cyan), var(--violet));
  box-shadow: 0 0 16px rgba(139, 92, 246, .4);
}
.titem { position: relative; padding: 0 0 42px; }
.titem:last-child { padding-bottom: 0; }
.titem::before {
  content: "";
  position: absolute;
  inset-inline-start: -34px; top: 4px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--cyan);
  box-shadow: 0 0 14px rgba(34, 211, 238, .8), 0 0 34px rgba(34, 211, 238, .35);
}
.titem .tq {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--cyan);
  letter-spacing: .14em;
  font-size: .82rem;
  text-transform: uppercase;
}
.titem h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.titem .tgoal {
  color: var(--violet-light);
  font-style: italic;
  margin: 0 0 14px;
  font-size: .95rem;
}
.titem ul { margin: 0 0 12px; padding-inline-start: 20px; color: var(--muted); }
.titem ul li { margin-bottom: 6px; }
.milestone {
  border: 1px solid rgba(34, 211, 238, .35);
  background: rgba(34, 211, 238, .07);
  color: var(--cyan-soft);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .9rem;
  box-shadow: inset 0 0 24px rgba(34, 211, 238, .05);
}

/* ============================================================
   Audit-Status
   ============================================================ */
.statusbox {
  border: 1px solid rgba(52, 211, 153, .4);
  background: linear-gradient(180deg, rgba(52, 211, 153, .1), rgba(52, 211, 153, .03));
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.statusbox .led {
  min-width: 54px; height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(52, 211, 153, .15);
  border: 2px solid var(--ok);
  box-shadow: 0 0 22px rgba(52, 211, 153, .55);
  animation: ledGlow 3s ease-in-out infinite;
}
@keyframes ledGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(52, 211, 153, .4); }
  50% { box-shadow: 0 0 30px rgba(52, 211, 153, .75); }
}
.checklist { list-style: none; margin: 14px 0 0; padding: 0; }
.checklist li { padding: 7px 0 7px 32px; position: relative; color: var(--muted); }
.checklist li::before {
  content: "✔";
  position: absolute;
  inset-inline-start: 4px;
  color: var(--ok);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(52, 211, 153, .5);
}
.checklist li.open::before { content: "◷"; color: var(--cyan); text-shadow: 0 0 10px rgba(34, 211, 238, .5); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; }
details {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
details[open] { border-color: rgba(139, 92, 246, .5); box-shadow: 0 0 28px rgba(139, 92, 246, .12); }
details summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  list-style: none;
  position: relative;
  padding-inline-end: 46px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  font-size: 1.4rem;
  font-weight: 400;
  text-shadow: 0 0 10px rgba(34, 211, 238, .5);
}
details[open] summary::after { content: "–"; }
details .body { padding: 0 20px 18px; color: var(--muted); }
details .body p:last-child { margin-bottom: 0; }

/* ============================================================
   Whitepaper / Prosa
   ============================================================ */
.prose { max-width: 860px; margin: 0 auto; }
.prose h2 {
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 46px;
}
.prose h2:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.prose blockquote {
  margin: 22px 0;
  padding: 16px 22px;
  border-inline-start: 3px solid var(--violet);
  background: rgba(139, 92, 246, .08);
  border-radius: 0 12px 12px 0;
  color: var(--cyan-soft);
  font-style: italic;
  box-shadow: 0 0 30px rgba(139, 92, 246, .08);
}
[dir="rtl"] .prose blockquote { border-radius: 12px 0 0 12px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 26px;
  font-size: .93rem;
  display: block;
  overflow-x: auto;
}
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: 10px 13px;
  text-align: start;
  vertical-align: top;
}
.prose th { background: var(--panel-2); color: var(--text); }
.prose td { color: var(--muted); }
.prose td:first-child { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { color: var(--muted); }
.prose .lead { font-size: 1.1rem; color: var(--text); }
.prose code { font-family: ui-monospace, Consolas, monospace; background: rgba(139, 92, 246, .12); padding: 1px 6px; border-radius: 6px; font-size: .88em; }

/* ============================================================
   Footer
   ============================================================ */
footer.site {
  border-top: 1px solid var(--border);
  background: rgba(8, 6, 24, .9);
  margin-top: 40px;
  padding: 46px 0 30px;
  font-size: .9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-bottom: 26px;
}
footer.site h4 { color: var(--text); margin: 0 0 10px; font-size: 1rem; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site ul li { margin-bottom: 7px; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--cyan); }
.disclaimer {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 18px 20px;
  color: var(--muted);
  font-size: .84rem;
  margin-bottom: 24px;
}
.copy { color: var(--muted); text-align: center; font-size: .82rem; }

/* ============================================================
   Sonstiges
   ============================================================ */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); border: 0; margin: 0; }
.tag-note {
  display: inline-block;
  background: rgba(139, 92, 246, .12);
  border: 1px solid rgba(139, 92, 246, .35);
  color: var(--violet-light);
  font-size: .78rem;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .06em;
}
.ascii-glow { text-shadow: 0 0 24px rgba(34, 211, 238, .6); }

/* ---------- Reduzierte Bewegung (global) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .contract-chip .dot { animation: none; }
}