/* Eluvia-Look fuer alle Seiten: wird NACH den seiteneigenen Styles geladen und ueberschreibt Farben + Bausteine.
   Palette aus dem Logo: #B45CFF (Marke), #D39BFF (hell), #7A22D6 / #55129E (dunkel), #14061F (Outline). */
:root{
  --bg:#0B0614;--bg-2:#110A1E;--card:#160E25;--card-2:#1E1432;--line:#241839;--card-line:#2C1F45;
  --emerald:#B45CFF;--emerald-dark:#7A22D6;--emerald-deep:#55129E;--chart:#B45CFF;
  --text:#EEE8F8;--muted:#A89BC2;--white:#FFFFFF;
  --grad:linear-gradient(180deg,#C27BFF 0%,#9A45EC 100%);
  --grad-gold:linear-gradient(180deg,#FFD866 0%,#F0B020 100%);
}

/* Nachthimmel: feste Pixel-Sterne, kein Weichzeichner */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 68% 9%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(2px 2px at 84% 34%,rgba(211,155,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 35% 62%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(2px 2px at 52% 41%,rgba(180,92,255,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 77%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 88%,rgba(255,255,255,.3) 50%,transparent 51%),
    linear-gradient(180deg,#160A2A 0,var(--bg) 560px);
  background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,100% 100%;
  background-repeat:repeat,repeat,repeat,repeat,repeat,repeat,repeat,no-repeat;
}
a:hover{color:#D39BFF}
::selection{background:#7A22D6;color:#fff}

/* Ueberschriften im Block-Stil wie das Logo */
h1,.page-head h1,.vhead h1,.section-title,.sec-h h2{font-family:'Lilita One',Outfit,sans-serif!important;font-weight:400!important;letter-spacing:.01em}
.eyebrow{color:var(--emerald)}

/* ---------- Kopfleiste: schwebende Leiste mit Rand ---------- */
.site-header{background:transparent;border-bottom:0;padding:12px 0 0}
.site-header .wrap{background:rgba(22,14,37,.96);border:1px solid var(--card-line);border-radius:18px;padding:10px 14px 10px 18px;box-shadow:0 10px 30px rgba(5,2,12,.55)}
.site-header .brand img{display:none}
.site-header .wordmark{display:block;width:140px;height:39px;font-size:0!important;color:transparent;background:url(img/wordmark.png?v=1) left center/contain no-repeat}
.site-header .wordmark span{display:none}
.nav{gap:6px}
.nav>a,.dd-btn{padding:9px 14px!important;border-radius:11px;letter-spacing:.06em}
.nav>a:hover,.dd-btn:hover,.dd.open .dd-btn{color:#fff;background:var(--card-2)}
.nav>a[aria-current],.dd-btn.active{color:#fff;background:var(--grad);box-shadow:inset 0 -3px 0 rgba(20,6,31,.35)}
.nav>a[aria-current] .ni,.dd-btn.active .ni{opacity:1}
.nav>a[href="donate"],.nav>a[href="/donate"]{color:#2A1A00;background:var(--grad-gold);box-shadow:inset 0 -3px 0 rgba(90,55,0,.35)}
.nav>a[href="donate"] .ni,.nav>a[href="/donate"] .ni{opacity:1}
.nav>a[href="donate"]:hover,.nav>a[href="/donate"]:hover{color:#2A1A00;filter:brightness(1.06)}
.dd-menu{background:var(--card);border-color:var(--card-line);border-radius:14px}
.dd-menu a:hover,.dd-menu a[aria-current]{background:var(--card-2);color:#fff}
.social{border-radius:12px!important}
.auth-btn{border-radius:11px!important;background:var(--grad)!important;box-shadow:inset 0 -3px 0 rgba(20,6,31,.35)}

/* ---------- Knoepfe ---------- */
.btn{color:#fff;background:var(--grad);border-bottom:0;border-radius:12px;box-shadow:inset 0 -4px 0 rgba(20,6,31,.4),0 6px 18px rgba(154,69,236,.25)}
.btn:hover{color:#fff;filter:brightness(1.08)}
.btn-discord{background:#5865F2;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}

/* ---------- Karten: runder, lila Rand beim Hover ---------- */
.card,.tile,.step,.rw,.site,.top10,.event,.cta,.box,.panel,.world,.device,.member,.table-box{border-radius:16px}
.step,.rw,.site,.event,.world,.device,.member,.card,.tile{transition:border-color .15s,transform .15s}
.step:hover,.rw:hover,.site:hover,.event:hover,.world:hover,.device:hover,.member:hover{border-color:#4A2F72}
.site .num{background:var(--grad);color:#fff;border-radius:12px;box-shadow:inset 0 -3px 0 rgba(20,6,31,.35)}

/* ---------- Fusszeile ---------- */
.site-footer{background:transparent;border-top:1px solid var(--line)}

/* ---------- Handy: Leiste bleibt schwebend, Menue klappt in der Leiste auf ---------- */
@media (max-width:760px){
  body .site-header{padding:8px 10px 0}
  body .site-header .wrap{padding:8px 8px 8px 14px;border-radius:16px}
  body .site-header .nav{top:calc(100% + 6px);border:1px solid var(--card-line);border-radius:16px;background:var(--card)}
  body .site-header .nav>a,body .site-header .dd-btn{padding:0 12px!important}
  body .site-header .dd-menu{border-left-color:var(--card-line)}
  body .burger{border-radius:12px;border-color:var(--card-line);background:var(--card-2)}
}