@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Inter:wght@400;600;800;900&family=Marcellus&display=swap');

:root{
  --bg:#05020d;
  --panel:rgba(8,3,18,.82);
  --panel2:rgba(18,8,38,.78);
  --purple:#8d35ff;
  --purple-light:#d46cff;
  --gold:#ffd36a;
  --gold-dark:#a86b20;
  --text:#fff8ff;
  --muted:#cfc2dc;
  --line:rgba(255,211,106,.34);
}

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

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  background:
    linear-gradient(180deg,rgba(3,1,10,.18),rgba(3,1,10,.98) 78%),
    url("assets/mysticnext-bg.png");
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  overflow-x:hidden;
}

.bg-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background:
    radial-gradient(circle at 16% 28%,rgba(142,53,255,.34),transparent 22%),
    radial-gradient(circle at 83% 31%,rgba(212,108,255,.30),transparent 23%),
    linear-gradient(90deg,rgba(4,2,11,.76),transparent 24%,transparent 76%,rgba(4,2,11,.76));
}

.particles{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.58) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,211,106,.45) 1px,transparent 1px),
    radial-gradient(circle,rgba(212,108,255,.58) 1.4px,transparent 1.4px);
  background-size:90px 90px,150px 150px,220px 220px;
  animation:particleMove 23s linear infinite;
}

@keyframes particleMove{
  from{transform:translateY(0)}
  to{transform:translateY(-180px)}
}

/* NAVBAR */
.navbar{
  width:min(1210px,calc(100% - 34px));
  height:74px;
  margin:16px auto 0;
  padding:0 18px;
  position:sticky;
  top:16px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(5,2,14,.78);
  border:1px solid rgba(255,211,106,.16);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.42),0 0 36px rgba(142,53,255,.20);
}

.logo{
  display:flex;
  align-items:center;
  gap:14px;
  color:white;
  text-decoration:none;
  font-family:'Cinzel Decorative','Marcellus',serif;
  font-size:29px;
  font-weight:900;
  letter-spacing:.02em;
}

.logo span span{color:var(--gold)}

.logo-emblem{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:var(--gold);
  background:linear-gradient(135deg,#361063,#8d35ff);
  border:1px solid var(--gold);
  clip-path:polygon(50% 0,100% 17%,100% 77%,50% 100%,0 77%,0 17%);
  text-shadow:0 0 12px var(--gold);
  box-shadow:0 0 24px rgba(142,53,255,.65),inset 0 0 16px rgba(255,211,106,.12);
}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

.logo img{
    width:70px;
    height:70px;
    object-fit:contain;
    filter:
        drop-shadow(0 0 12px rgba(157,77,255,.8))
        drop-shadow(0 0 18px rgba(255,211,106,.25));
}

.logo span{
    font-family:'Cinzel Decorative', serif;
    font-size:48px;
    font-weight:900;
    color:#ffffff;
    line-height:1;
}

.logo .gold{
    color:#ffd36a;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:20px;
}

.nav-links a{
  color:white;
  opacity:.9;
  text-decoration:none;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.08em;
  font-weight:900;
  position:relative;
  transition:.2s;
}

.nav-links a:hover,.nav-links a.active{
  color:var(--gold);
  opacity:1;
}

.nav-links a.active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-24px;
  height:3px;
  background:var(--gold);
  box-shadow:0 0 16px var(--gold);
}

.discord{
  padding:13px 22px;
  background:linear-gradient(135deg,#6e27ca,#3b136f);
  border:1px solid rgba(255,211,106,.34);
  box-shadow:0 0 26px rgba(142,53,255,.50);
  clip-path:polygon(10% 0,100% 0,100% 76%,90% 100%,0 100%,0 24%);
}

.menu-btn{
  display:none;
  background:none;
  border:0;
}
.menu-btn i{
  width:27px;
  height:3px;
  display:block;
  background:white;
  margin:5px 0;
}

/* HERO */
.hero{
  min-height:calc(100vh - 90px);
  padding:80px 18px 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.hero-inner{
  width:min(920px,100%);
  text-align:center;
  margin-top:10px;
}

.headline-tag{
  width:fit-content;
  margin:0 auto 14px;
  padding:12px 32px;
  color:#eadcff;
  background:rgba(7,3,17,.60);
  border:1px solid rgba(255,211,106,.24);
  box-shadow:0 0 26px rgba(142,53,255,.25);
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.11em;
}

h1{
  margin:0;
  font-family:'Cinzel Decorative','Marcellus',serif;
  font-size:clamp(62px,9vw,128px);
  line-height:.88;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:#f4f4f4;
  text-shadow:
    0 2px 0 rgba(255,255,255,.35),
    0 0 28px rgba(255,255,255,.28),
    0 0 60px rgba(142,53,255,.70);
}

h1 span{
  color:var(--gold);
  text-shadow:0 0 42px rgba(255,211,106,.58);
}

.hero-text,.subhero p{
  font-size:22px;
  line-height:1.45;
  color:#fff;
  text-shadow:0 0 18px rgba(0,0,0,.9);
}

.hero-text strong{color:var(--gold)}

.hero-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin:28px 0;
}

.btn,.copy-ip{
  border:0;
  cursor:pointer;
  display:inline-block;
  color:white;
  text-decoration:none;
  padding:17px 42px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  clip-path:polygon(8% 0,92% 0,100% 28%,100% 72%,92% 100%,8% 100%,0 72%,0 28%);
  transition:.24s;
}

.gold-btn{
  background:linear-gradient(135deg,#8d35ff,#55169f);
  border:1px solid var(--gold);
  box-shadow:0 0 34px rgba(142,53,255,.55),inset 0 0 18px rgba(255,211,106,.14);
}

.dark-btn{
  background:rgba(8,3,18,.76);
  border:1px solid rgba(255,211,106,.28);
  box-shadow:inset 0 0 18px rgba(142,53,255,.10);
}

.btn:hover,.copy-ip:hover{
  transform:translateY(-4px);
  filter:brightness(1.12);
}

.ip-box{
  width:min(560px,100%);
  margin:0 auto;
  padding:18px 78px 20px;
  position:relative;
  background:linear-gradient(180deg,rgba(8,3,18,.90),rgba(8,3,18,.74));
  border:1px solid var(--gold);
  box-shadow:0 0 42px rgba(142,53,255,.38),inset 0 0 20px rgba(255,211,106,.07);
  clip-path:polygon(6% 0,94% 0,100% 22%,100% 78%,94% 100%,6% 100%,0 78%,0 22%);
}

.ip-box small{
  display:block;
  color:#bfb2d2;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
}

.ip-box strong{
  display:block;
  margin-top:4px;
  font-family:'Cinzel Decorative','Marcellus',serif;
  font-size:31px;
  letter-spacing:.12em;
}

.ip-copy{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  padding:11px 14px;
  clip-path:none;
  border-radius:8px;
  background:rgba(142,53,255,.55);
  border:1px solid rgba(255,211,106,.28);
}

/* STATUS */
.status-bar{
  width:min(1130px,calc(100% - 36px));
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin:30px auto 0;
  background:rgba(7,3,17,.82);
  border:1px solid var(--gold-dark);
  box-shadow:0 0 50px rgba(142,53,255,.25);
}

.status-bar article{
  padding:28px 18px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.09);
}

.status-bar article:last-child{border-right:0}

.status-bar small{
  display:block;
  color:#ddd0ef;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
}

.status-bar strong{
  display:block;
  margin:13px 0 6px;
  font-size:28px;
  font-family:'Cinzel Decorative','Marcellus',serif;
}

.status-bar p{
  margin:0;
  color:#bfb2d2;
  font-size:13px;
}

.online{color:#83ff75!important}
.online span{
  display:inline-block;
  width:13px;
  height:13px;
  background:#75ff71;
  border-radius:50%;
  box-shadow:0 0 18px #75ff71;
}

.purple-text{color:#d4a4ff}
.gold-text{color:var(--gold)}

/* MAIN */
main{
  width:min(1130px,calc(100% - 36px));
  margin:0 auto;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:30px 0;
}

.feature-card,.news-card,.team-card,.vote-card,details{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(16,7,35,.90),rgba(8,4,20,.80));
  border:1px solid rgba(255,211,106,.24);
  box-shadow:0 24px 70px rgba(0,0,0,.34),0 0 24px rgba(142,53,255,.17);
  padding:25px;
  transition:.25s;
}

.feature-card{
  min-height:132px;
  display:flex;
  gap:18px;
  align-items:center;
}

.feature-card::before,.news-card::before,.team-card::before,.vote-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg,transparent,rgba(255,211,106,.20),transparent);
  transform:translateX(-120%);
  transition:.7s;
}

.feature-card:hover::before,.news-card:hover::before,.team-card:hover::before,.vote-card:hover::before{
  transform:translateX(120%);
}

.feature-card:hover,.news-card:hover,.team-card:hover,.vote-card:hover{
  transform:translateY(-10px);
  border-color:rgba(255,211,106,.55);
  box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 38px rgba(142,53,255,.30);
}

.pixel-icon{
  min-width:74px;
  height:74px;
  display:grid;
  place-items:center;
  font-size:38px;
  color:var(--gold);
  background:linear-gradient(135deg,#5a1bb0,#17072d);
  border:1px solid rgba(255,211,106,.44);
  box-shadow:inset 0 -9px rgba(0,0,0,.27),0 0 28px rgba(142,53,255,.32);
  clip-path:polygon(0 0,100% 0,100% 76%,78% 76%,78% 100%,0 100%);
}

.feature-card h3,.news-card h3,.team-card h3,.vote-card h3{
  margin:0 0 10px;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.feature-card p,.news-card p,.team-card p,.vote-card p,details p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
}

/* NEWS */
.news-section{
  padding:28px 0 70px;
}

.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.section-header h2{
  margin:0;
  font-size:23px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.section-header a{
  color:#d9b7ff;
  text-decoration:none;
  text-transform:uppercase;
  font-size:13px;
  font-weight:800;
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.news-card{
  min-height:150px;
}

.news-card span{
  display:inline-block;
  margin-bottom:14px;
  padding:5px 10px;
  color:white;
  background:linear-gradient(135deg,#6e27ca,#32105f);
  border:1px solid rgba(255,211,106,.28);
  border-radius:4px;
  text-transform:uppercase;
  font-size:11px;
  font-weight:900;
}

/* SUBPAGES */
.subhero{
  width:min(1000px,calc(100% - 36px));
  margin:90px auto 20px;
  padding:86px 0 30px;
  text-align:center;
}

.subhero h1{
  font-size:clamp(54px,8vw,96px);
}

.team-grid,.vote-grid,.news-list,.faq-list{
  display:grid;
  gap:22px;
  padding:40px 0 80px;
}

.team-grid{
  grid-template-columns:repeat(4,1fr);
}

.vote-grid{
  grid-template-columns:repeat(3,1fr);
}

.team-card{
  text-align:center;
}

.team-card div{
  font-size:48px;
  margin-bottom:12px;
}

.big{
  min-height:170px;
}

details summary{
  cursor:pointer;
  color:var(--gold);
  font-size:20px;
  font-weight:900;
}

/* FOOTER */
footer{
  width:min(1130px,calc(100% - 36px));
  margin:20px auto;
  padding:24px;
  text-align:center;
  background:rgba(8,4,20,.74);
  border:1px solid rgba(255,211,106,.18);
  color:var(--muted);
}

footer strong{
  font-family:'Cinzel Decorative','Marcellus',serif;
  color:white;
  font-size:24px;
}

footer p{
  margin:8px 0 0;
}

/* EFFECTS */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:.75s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:1050px){
  .status-bar,.feature-grid,.team-grid,.vote-grid,.news-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .nav-links{
    gap:13px;
  }
}

@media(max-width:760px){
  .nav-links{
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    padding:20px;
    background:rgba(5,2,14,.96);
    border:1px solid rgba(255,211,106,.18);
    flex-direction:column;
  }
  .nav-links.open{
    display:flex;
  }
  .menu-btn{
    display:block;
  }
  .status-bar,.feature-grid,.team-grid,.vote-grid,.news-grid{
    grid-template-columns:1fr;
  }
  h1{
    font-size:56px;
  }
  .ip-box{
    padding:18px 64px 20px 26px;
  }
  .feature-card{
    align-items:flex-start;
  }
}


/* Premium Schrift-Upgrade */
.logo,
h1,
.ip-box strong,
.status-bar strong,
footer strong {
  font-family: 'Cinzel Decorative', 'Marcellus', serif;
}

body {
  letter-spacing: 0.01em;
}

.hero-text,
.subhero p,
.feature-card p,
.news-card p,
.team-card p,
.vote-card p,
details p {
  font-family: 'Inter', Arial, sans-serif;
}

.headline-tag,
.nav-links a,
.btn,
.copy-ip,
.status-bar small,
.section-header a {
  font-family: 'Inter', Arial, sans-serif;
  letter-spacing: .12em;
}

h1 {
  font-weight: 900;
}

.logo {
  font-weight: 900;
}

.feature-card h3,
.news-card h3,
.team-card h3,
.vote-card h3,
.section-header h2 {
  font-family: 'Marcellus', serif;
  letter-spacing: .08em;
}



/* Neue eigene MysticNext Feature-Bilder */
.feature-image {
  min-width: 92px;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(255, 211, 106, .35))
    drop-shadow(0 0 24px rgba(142, 53, 255, .45));
  transition: .25s ease;
}

.feature-card:hover .feature-image {
  transform: translateY(-5px) scale(1.08);
  filter:
    drop-shadow(0 0 18px rgba(255, 211, 106, .55))
    drop-shadow(0 0 34px rgba(142, 53, 255, .75));
}

@media(max-width:760px){
  .feature-image {
    min-width: 78px;
    width: 78px;
    height: 78px;
  }
}


/* Fix: Feature-Bilder ohne abgeschnittenen Text */
.feature-card {
  align-items: center;
  min-height: 150px;
}

.feature-image {
  min-width: 96px;
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 14px rgba(255, 211, 106, .34))
    drop-shadow(0 0 28px rgba(142, 53, 255, .55));
  transition: .25s ease;
}

.feature-card:hover .feature-image {
  transform: translateY(-4px) scale(1.08);
  filter:
    drop-shadow(0 0 18px rgba(255, 211, 106, .55))
    drop-shadow(0 0 36px rgba(142, 53, 255, .78));
}

.feature-card h3 {
  margin-top: 0;
}

.feature-card p {
  overflow-wrap: anywhere;
}

/* Neuer Hintergrund besser lesbar */
body {
  background:
    linear-gradient(180deg, rgba(3,1,10,.30), rgba(3,1,10,.98) 78%),
    url("assets/mysticnext-bg.png");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

@media(max-width:760px){
  .feature-card {
    align-items: flex-start;
  }

  .feature-image {
    min-width: 78px;
    width: 78px;
    height: 78px;
  }
}


/* MysticNext Logo eingebaut */
.nav-logo-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 12px rgba(157, 77, 255, .75))
    drop-shadow(0 0 20px rgba(255, 211, 106, .25));
}

.hero-logo-img {
  width: min(260px, 52vw);
  height: auto;
  display: block;
  margin: 0 auto 4px;
  filter:
    drop-shadow(0 0 24px rgba(157, 77, 255, .85))
    drop-shadow(0 0 38px rgba(255, 211, 106, .22));
  animation: logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.02); }
}

/* Feature-Karten Fix: Text bleibt sauber in der Karte */
.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card {
  min-width: 0;
  min-height: 205px;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px;
}

.feature-card > div:not(.pixel-icon) {
  min-width: 0;
}

.feature-card h3 {
  font-size: 18px;
  line-height: 1.1;
  margin: 0 0 8px;
  white-space: normal;
  overflow-wrap: break-word;
}

.feature-card p {
  font-size: 13px;
  line-height: 1.5;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.feature-image {
  min-width: 90px !important;
  width: 90px !important;
  height: 90px !important;
  align-self: center;
}

/* Auf kleineren Bildschirmen schöner stapeln */
@media(max-width:1050px){
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

@media(max-width:760px){
  .nav-logo-img {
    width: 48px;
    height: 48px;
  }

  .hero-logo-img {
    width: min(210px, 62vw);
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 150px;
  }

  .feature-image {
    min-width: 74px !important;
    width: 74px !important;
    height: 74px !important;
  }
}


/* Finales Karten- und Logo-Upgrade */
.navbar {
  height: 82px;
}

.logo {
  gap: 16px;
  font-size: 31px;
}

.nav-logo-img {
  width: 68px !important;
  height: 68px !important;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 14px rgba(157, 77, 255, .85))
    drop-shadow(0 0 24px rgba(255, 211, 106, .28));
}

.hero-logo-img {
  display: none !important;
}

/* Größere Feature-Karten wie im Screenshot */
.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 36px 0 34px;
}

.feature-card {
  min-height: 285px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start;
  gap: 16px;
  padding: 24px 24px 26px !important;
  border-color: rgba(255, 211, 106, .34);
}

.feature-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 211, 106, .10);
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 92% 100%, 0 100%);
}

.feature-image {
  width: 118px !important;
  height: 118px !important;
  min-width: 118px !important;
  margin: 0 0 2px;
}

.feature-card h3 {
  font-size: 22px !important;
  line-height: 1.1;
  margin: 0 0 6px !important;
  letter-spacing: .08em;
}

.feature-card p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.pixel-icon {
  width: 118px;
  height: 118px;
  min-width: 118px;
  font-size: 52px;
}

/* News-Karten etwas größer und passender */
.news-card {
  min-height: 185px;
  padding: 28px;
}

.news-grid {
  gap: 26px;
}

/* Favicon/Logo wirkt oben links besser */
.logo span {
  line-height: 1;
}

@media(max-width:1050px){
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-card {
    min-height: 250px !important;
  }
}

@media(max-width:760px){
  .navbar {
    height: 76px;
  }

  .nav-logo-img {
    width: 54px !important;
    height: 54px !important;
  }

  .logo {
    font-size: 24px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: 230px !important;
    align-items: center !important;
    text-align: center;
  }

  .feature-image {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    margin: 0 auto;
  }
}


/* Navbar Logo wie im Screenshot */
.logo{
    display:flex !important;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

.nav-logo-img{
    width:52px !important;
    height:52px !important;
    object-fit:contain;
    filter:
        drop-shadow(0 0 12px rgba(157,77,255,.8))
        drop-shadow(0 0 18px rgba(255,211,106,.25));
}

.logo span{
    font-size:48px !important;
    line-height:1;
}

.navbar{
    height:90px !important;
}


/* Logo Pfad Fix + sichere Anzeige */
.nav-logo-img {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  object-position: center !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.logo {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}