/* =======================
   Noctis – Global Styles
   ======================= */

:root{
  --noctis-purple:#7c3aed;
  --noctis-purple-soft:#9f67ff;
  --noctis-deep:#0a0b10;
  --noctis-mid:#0f1220;
  --text:#e9ecf6;
  --muted:#a3abc4;
  --line:#ffffff20;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}

/* =======================
   Background
   ======================= */
.bg-noctis {
  background-color: var(--noctis-deep);
  background-image:
    radial-gradient(1200px 700px at 70% 0%, rgba(124,58,237,0.22), transparent 60%),
    radial-gradient(900px 600px at 20% 85%, rgba(124,58,237,0.16), transparent 65%),
    linear-gradient(180deg, var(--noctis-mid) 0%, var(--noctis-deep) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;  /* fixiert den Hintergrund */
  min-height: 100vh;             /* volle Höhe mindestens */
}

.bg-noctis::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(65% 65% at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%);
}

/* =======================
   Topbar (only subpages)
   ======================= */
.has-topbar{padding-top:64px}

.topbar{
  position:fixed; top:8px; left:50%; transform:translateX(-50%);
  width:min(1100px,96vw);
  height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px;
  background:linear-gradient(180deg, rgba(20,24,40,.85), rgba(16,20,34,.75));
  border:1px solid var(--line);
  border-radius:16px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  z-index:50;
}
.topbar .brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff; padding:6px 10px; border-radius:12px;
}
.topbar .brand img{
  width:32px; height:32px; border-radius:8px; object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.topbar .brand span{font-weight:700; letter-spacing:.2px}
.topbar .nav{display:flex; gap:8px; align-items:center}

/* Links + Menübutton einheitlich */
.topbar .nav a,.topbar .menu-btn{
  text-decoration:none; color:#cfd5ea; font-weight:600; font-size:14px;
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  background:transparent; cursor:pointer;
  transition:transform .12s ease, background .2s ease, color .2s ease,
             border-color .2s ease, box-shadow .2s ease;
}
.topbar .nav a:hover,.topbar .menu-btn:hover{
  transform:translateY(-1px);
  background:#1a2036; color:#fff; border-color:#ffffff22;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.topbar .nav a.current{
  background:#1f2540; color:#e9ecf6; border:1px solid #ffffff2b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),
             0 6px 16px rgba(124,58,237,.35);
}

/* Dropdown (mit JS-klassengesteuertem Open) */
.nav-item{position:relative}
.menu-btn{display:inline-flex; align-items:center; gap:6px}
.chev{opacity:.8}

/* Immer im Flow, Sichtbarkeit via Opacity/Visibility; so laufen Transitions sauber */
.dropdown{
  position:absolute; top:100%; left:0; min-width:180px;
  background:#12172b; border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  z-index:999;
}
.dropdown a{
  display:block; padding:10px 12px; border-radius:10px;
  color:#cfd5ea; text-decoration:none; font-weight:600; font-size:14px;
}
.dropdown a:hover{background:#1a2036; color:#fff}

/* Offen, wenn Hover ODER .open vom JS gesetzt */
.has-menu:hover .dropdown,
.has-menu.open .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}

/* =======================
   Layout containers
   ======================= */
.view{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:60px 20px;
}

/* =======================
   Hero (index large / subpages compact)
   ======================= */
.hero{ text-align:center; padding:80px 16px 40px }
.hero-compact{ padding:40px 16px 10px }

/* =======================
   Hero Avatar (nur Index)
   ======================= */
.hero-avatar {
  width:150px;
  height:150px;
  margin:0 auto 30px;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 30% 30%, #2b2e4a, #14121d);
  border:3px solid var(--noctis-purple);
  box-shadow:0 10px 28px #0008, 0 0 24px rgba(124,58,237,0.35);
}
.hero-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.avatar{
  width:150px; height:150px;
  margin:0 auto 30px;
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 30% 30%, #2b2e4a, #14121d);
  border:3px solid var(--noctis-purple);
  box-shadow:0 10px 28px #0008, 0 0 24px rgba(124,58,237,0.35);
}
.avatar img{ width:100%; height:100%; object-fit:cover }

/* Title gradient */
.hero h1{
  margin:20px 0 30px;
  font-size:64px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg, #ffffff 0%, #e9ecf6 40%, #a78bfa 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

/* Meta chips */
.meta{
  margin-top:20px; color:var(--muted);
  display:flex; gap:24px; justify-content:center; align-items:center;
  font-size:18px;
}
.sep{opacity:.5}
.dot{
  background:#1b1f37; color:#dbe0ff;
  padding:8px 18px; border-radius:999px;
  border:1px solid var(--line);
}

/* =======================
   Index buttons grid
   ======================= */
.grid{
  padding:80px 20px 100px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,260px));
  gap:36px;
  justify-content:center;
}
.btn{
  display:flex; align-items:center; gap:14px;
  padding:24px 28px;
  border-radius:16px; text-decoration:none;
  background:#141428;
  border:1px solid var(--line);
  color:var(--text);
  font-size:20px; font-weight:600;
  transition:transform .15s cubic-bezier(.2,.8,.2,1),
             box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  will-change:transform, box-shadow, filter;
}
.btn .ico{ width:32px; height:32px; object-fit:contain }
.btn:hover, .btn:focus-visible{
  transform:scale(1.04);
  box-shadow:0 8px 24px rgba(0,0,0,.45),
             0 0 18px rgba(124,58,237,.45);
  border-color:var(--noctis-purple);
  filter:brightness(1.06);
}
.btn.disabled{ cursor:default }

/* =======================
   Store – product cards
   ======================= */
.store-wrap{
  width:min(1100px,92vw);
  margin:24px auto 60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:26px;
}
.product-card{
  background:#111525;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(124,58,237,.35);
  border-color:var(--noctis-purple);
}

/* header row */
.product-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.product-head h2{
  margin:0; font-size:22px;
  background:linear-gradient(90deg,#ffffff 0%,#e9ecf6 40%,#a78bfa 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid #3b7a5a; color:#c7f5dc; background:#0d1f18;
}
.price{
  margin:8px 0 14px;
  font-weight:800; font-size:28px;
  color:#a5b4fc;
}

/* thumbnail */
.thumb{
  height:160px;
  border-radius:14px;
  background:
    radial-gradient(80% 60% at 20% 30%, rgba(124,58,237,.35), transparent 60%),
    linear-gradient(135deg, #0f1426, #0c0f1b 60%);
  border:1px solid var(--line);
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  margin-bottom:16px;
}
.thumb-label{
  letter-spacing:.12em;
  font-weight:900;
  color:#dfe3ff;
  opacity:.9;
}

/* copy */
.desc{
  color:var(--muted);
  line-height:1.55;
  font-size:15px;
  margin:0 0 16px;
}

/* actions */
.actions{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
}
.btn-ghost,
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px;
  border-radius:10px; text-decoration:none;
  font-weight:600; font-size:15px;
  cursor:pointer;
}
.btn-ghost{
  background:#0f1426;
  border:1px solid var(--line);
  color:#cbd3ea;
  transition:border-color .18s ease, color .18s ease;
}
.btn-ghost:hover{ border-color:#6b7280; color:#e6ebff }
.btn-primary{
  background:var(--noctis-purple);
  color:#fff; border:1px solid transparent;
  box-shadow:0 6px 16px rgba(124,58,237,.35);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary:hover{
  transform:translateY(-1px);
  background:var(--noctis-purple-soft);
  box-shadow:0 10px 22px rgba(124,58,237,.45);
}

/* custom donate flow */
.hidden{ display:none !important }
.donate-row{
  display:flex; gap:12px;
  justify-content:space-between; align-items:center;
  margin-top:12px;
}
.amt{
  height:44px; padding:0 12px; border-radius:10px;
  border:1px solid var(--line);
  background:#0f1426; color:#e9ecf6;
  min-width:140px; outline:none;
}
.amt:focus{ border-color:#6b7280 }
.donate-cta{ display:flex; gap:12px }

/* =======================
   Modal (View Details)
   ======================= */
.modal{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  justify-content:center; align-items:center;
  z-index:1000;
}
.modal-content{
  position:relative;
  background:#141428;
  padding:28px;
  border-radius:14px;
  max-width:500px; width:90%;
  border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  text-align:left;
}
.modal-content h2{
  margin:0 0 8px 0;
  font-size:22px;
  background:linear-gradient(90deg,#ffffff 0%,#a78bfa 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}
.modal-content p{
  margin:8px 0 0;
  font-size:15px; color:var(--muted); line-height:1.6;
}
.close{
  position:absolute;
  top:16px; right:20px;
  font-size:26px; font-weight:bold;
  color:#aaa; cursor:pointer;
}
.close:hover{ color:#fff }

/* =======================
   Responsive
   ======================= */
@media (max-width:1024px){
  .hero h1{ font-size:56px }
}
@media (max-width:820px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .store-wrap{ gap:20px }
  .hero h1{ font-size:48px }
  .topbar{ width:min(1000px,96vw) }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr }
  .topbar{ height:52px }
  .topbar .nav a,.topbar .menu-btn{ padding:8px 12px; font-size:13px }
  .dropdown{ min-width:160px }
}


/* =======================
   Team page
   ======================= */
.team-wrap{
  width:min(1100px,92vw);
  margin:24px auto 80px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); /* 2 nebeneinander */
  gap:28px;
}

.member-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#111525;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  min-height:320px; /* höher */
}

.banner{
  position:relative;
  height:160px;
  background-size:cover;
  background-position:center;
}

.badge-row{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.role-badge{
  padding:5px 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  border:1px solid var(--line); /* Farben kommen per inline-style aus team.json */
  text-transform:uppercase;
}

.member-body{
  position:relative;
  padding:24px 22px 28px;
}

.member-card .avatar{
  position:absolute;
  top:-40px;
  left:22px;
  width:80px;
  height:80px;
  border-radius:50%;
  border:4px solid #0e111e;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.member-card .avatar img{width:100%;height:100%;object-fit:cover}

.name-row{
  display:flex;
  flex-direction:column;
  margin-left:120px;
  margin-top:10px;
}

.display-name{
  font-weight:800;
  font-size:22px;
  background:linear-gradient(90deg,#fff 0%,#a78bfa 100%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.username{
  color:#9aa3c2;
  font-weight:600;
  font-size:15px;
  margin-top:4px;
}

.chip {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
}

.dot {
  padding: 0;  /* kein Rahmen */
  border: none;
  background: none;
  font-size: 20px; /* damit der Punkt gleich aussieht */
  margin: 0 8px;   /* bisschen Abstand */
}

/* =======================
   Footer
   ======================= */
.site-footer {
  background-color: #0f0f0f;
  color: #bbb;
  display: flex;
  justify-content: flex-start;   /* statt space-between */
  gap: 120px;                    /* Abstand zwischen den Bereichen */
  padding: 30px 80px;            /* extra horizontaler Rand */
  margin-top: 50px;
}

.site-footer h4 {
  color: #fff;
  margin-bottom: 10px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
}

.site-footer li {
  margin: 5px 0;
}

.site-footer a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer a:hover {
  color: var(--noctis-purple);
}

.footer-logo {
  width: 60px;
  border-radius: 10px;
  margin-bottom: 10px;
}