:root{
  --milocore-bg:url('milo.png');
  --bg:#100712;
  --bg-soft:#190b1d;
  --panel:rgba(38,13,40,.78);
  --panel-strong:rgba(52,16,50,.94);
  --glass:rgba(255,255,255,.055);
  --text:#fff7fb;
  --muted:#d2b7c7;
  --line:rgba(255,255,255,.10);
  --rose:#fb7185;
  --pink:#ec4899;
  --pink-2:#db2777;
  --fuchsia:#d946ef;
  --magenta:#c026d3;
  --violet:#a855f7;
  --peach:#fda4af;
  --green:#22c55e;
  --amber:#f59e0b;
  --red:#ef4444;
  --shadow:0 26px 90px rgba(72,5,54,.38);
  --shadow-soft:0 16px 48px rgba(45,5,35,.30);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 13% 8%,rgba(236,72,153,.35),transparent 28rem),
    radial-gradient(circle at 86% 18%,rgba(217,70,239,.22),transparent 28rem),
    radial-gradient(circle at 52% 88%,rgba(251,113,133,.17),transparent 34rem),
    linear-gradient(180deg,#0d0610 0%,#18091b 48%,#0d0711 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,black,transparent 76%);
  z-index:-1;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(1180px,calc(100% - 34px));margin:auto}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(16,7,18,.74);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 30px rgba(28,4,24,.18)
}
nav{height:74px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:950;letter-spacing:.2px}
.logo{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-weight:1000;font-size:21px;color:white;
  background:linear-gradient(135deg,var(--rose),var(--pink) 48%,var(--fuchsia));
  box-shadow:0 12px 34px rgba(236,72,153,.42),inset 0 1px 0 rgba(255,255,255,.26)
}
.links{margin-left:auto;display:flex;align-items:center;gap:4px}
.links a{
  padding:10px 12px;border-radius:11px;
  color:var(--muted);font-size:14px;font-weight:780;
  transition:.2s ease
}
.links a:hover{color:var(--text);background:rgba(255,255,255,.065)}

.btn{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
  color:var(--text);
  min-height:46px;
  padding:0 17px;
  border-radius:13px;
  font-weight:850;
  cursor:pointer;
  transition:.22s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)
}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(236,72,153,.48);
  background:linear-gradient(180deg,rgba(236,72,153,.11),rgba(255,255,255,.04));
  box-shadow:0 12px 30px rgba(73,5,55,.22)
}
.btn.primary{
  border:none;color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--pink) 46%,var(--pink-2) 72%,var(--magenta));
  box-shadow:0 16px 38px rgba(236,72,153,.38),inset 0 1px 0 rgba(255,255,255,.22)
}
.btn.primary::after{
  content:"";
  position:absolute;inset:1px;border-radius:12px;
  background:linear-gradient(120deg,rgba(255,255,255,.20),transparent 46%);
  pointer-events:none
}

.hero{
  position:relative;
  padding:108px 0 62px;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute;
  width:790px;height:790px;
  left:50%;top:-385px;transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.28),rgba(217,70,239,.10) 44%,transparent 70%);
  pointer-events:none
}
.badge{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;
  border:1px solid rgba(236,72,153,.30);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(236,72,153,.14),rgba(255,255,255,.035));
  color:#f9a8d4;
  font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 10px 32px rgba(236,72,153,.12)
}
h1{
  position:relative;
  margin:22px 0 14px;
  font-size:clamp(4rem,10vw,7.3rem);
  line-height:.88;
  letter-spacing:-.065em
}
.grad{
  background:linear-gradient(90deg,#ffe4e6 0%,#fda4af 19%,#fb7185 38%,#ec4899 58%,#d946ef 78%,#c084fc 100%);
  background-size:180% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 28px rgba(236,72,153,.28))
}
.claim{margin:0 0 14px;font-size:clamp(1.35rem,3vw,2.1rem);font-weight:900;letter-spacing:-.02em}
.sub{max-width:760px;margin:0 auto 29px;color:var(--muted);line-height:1.78;font-size:1.02rem}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-top:52px
}
.stat{
  position:relative;
  overflow:hidden;
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.026));
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft)
}
.stat::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--rose),var(--pink),var(--fuchsia))
}
.stat strong{display:block;font-size:1.7rem;margin-bottom:5px;letter-spacing:-.03em}
.stat span{color:var(--muted);font-size:13px;font-weight:750}

section{padding:74px 0}
.kicker{
  display:inline-flex;
  color:#f9a8d4;
  font-size:11px;font-weight:950;
  letter-spacing:.19em;text-transform:uppercase
}
h2{margin:9px 0 9px;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.045em}
.sectionp{margin:0 0 29px;color:var(--muted);line-height:1.7;max-width:760px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.card{
  position:relative;overflow:hidden;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.026));
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft);
  transition:.25s ease
}
.card::after{
  content:"";
  position:absolute;width:170px;height:170px;right:-72px;top:-74px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.23),transparent 70%);
  pointer-events:none
}
.card:nth-child(2n)::after{background:radial-gradient(circle,rgba(217,70,239,.20),transparent 70%)}
.card:nth-child(3n)::after{background:radial-gradient(circle,rgba(251,113,133,.18),transparent 70%)}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(236,72,153,.38);
  background:linear-gradient(180deg,rgba(255,255,255,.082),rgba(255,255,255,.038));
  box-shadow:0 26px 58px rgba(68,5,52,.34)
}
.ico{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-size:22px;margin-bottom:17px;
  background:linear-gradient(135deg,rgba(251,113,133,.24),rgba(236,72,153,.15),rgba(217,70,239,.13));
  border:1px solid rgba(236,72,153,.27);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)
}
.card h3{margin:0 0 9px;font-size:1.08rem;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}

.notice{
  position:relative;overflow:hidden;
  padding:24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  border:1px solid rgba(236,72,153,.22);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(251,113,133,.10),rgba(236,72,153,.10),rgba(217,70,239,.08));
  box-shadow:var(--shadow-soft)
}
.notice::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--rose),var(--pink),var(--fuchsia))
}
.notice p{margin:6px 0 0;color:var(--muted)}

.serverbox{
  display:grid;grid-template-columns:1.1fr .9fr;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.028));
  box-shadow:var(--shadow)
}
.server-main,.server-side{padding:30px}
.server-side{
  border-left:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 0%,rgba(236,72,153,.22),transparent 18rem),
    radial-gradient(circle at 20% 100%,rgba(217,70,239,.10),transparent 18rem),
    linear-gradient(180deg,rgba(236,72,153,.06),rgba(217,70,239,.025))
}
.row{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line)
}
.row:last-child{border-bottom:0}
.row span{color:var(--muted);font-size:14px}
.row b{font-size:14px;text-align:right}

.status{
  display:flex;align-items:center;gap:10px;
  margin:16px 0 8px;font-weight:950
}
.dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 18px rgba(245,158,11,.78)
}
.dot.on{background:var(--green);box-shadow:0 0 18px rgba(34,197,94,.78)}
.dot.off{background:var(--red);box-shadow:0 0 18px rgba(239,68,68,.78)}
.detail{color:var(--muted);font-size:14px;line-height:1.65}

.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.rule{
  padding:19px 20px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.023));
  box-shadow:var(--shadow-soft)
}
.rule b{display:block;margin-bottom:6px}
.rule span{color:var(--muted);font-size:14px;line-height:1.55}

footer{
  margin-top:28px;
  padding:36px 0 48px;
  border-top:1px solid var(--line);
  color:var(--muted);font-size:14px;
  background:linear-gradient(180deg,transparent,rgba(236,72,153,.035))
}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot a{color:#f9a8d4;font-weight:850}
.foot a:hover{color:#f472b6}

.toast{
  position:fixed;right:20px;bottom:20px;z-index:100;
  padding:14px 17px;border-radius:14px;
  border:1px solid rgba(236,72,153,.30);
  background:rgba(42,12,39,.96);
  color:var(--text);
  box-shadow:var(--shadow);
  opacity:0;transform:translateY(85px);
  transition:.25s ease;
  font-weight:850;font-size:14px
}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  .links{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .serverbox{grid-template-columns:1fr}
  .server-side{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:620px){
  .wrap{width:min(100% - 22px,1180px)}
  .hero{padding-top:72px}
  .stats,.cards,.rules{grid-template-columns:1fr}
  .notice{align-items:flex-start;flex-direction:column}
  section{padding:56px 0}
  .server-main,.server-side{padding:22px}
  nav .btn{padding:0 12px;font-size:13px}
}


.nav-logo-img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
  border-radius:10px;
  filter:none;
  transform:none;
}


.bg-logo{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.18;
  background-image:var(--milocore-bg);
  background-repeat:no-repeat;
  background-position:center 28px;
  background-size:min(700px,68vw);
  filter:none;
  mix-blend-mode:normal;
}
header, main, footer, .toast{position:relative;z-index:1}



.hero .wrap,
section .wrap{
  position:relative;
  z-index:2;
}
.hero h1,
.hero .claim,
.hero .sub,
.hero .badge{
  text-shadow:0 2px 18px rgba(0,0,0,.78);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(
    180deg,
    rgba(10,4,14,.12) 0%,
    rgba(10,4,14,.22) 58%,
    rgba(10,4,14,.52) 100%
  );
}
@media(max-width:700px){
  .bg-logo{
    opacity:.14;
    background-position:center 24px;
    background-size:86vw;
  }
}


@media(max-width:700px){
  .bg-logo{
    opacity:.26;
    background-position:center 80px;
    background-size:92vw;
  }
}


/* =========================================================
   MOBILE NAVIGATION – STABILER TAB-ANSATZ
   Kein Dropdown, kein Overlay, kein Blur-Menü.
   ========================================================= */

.mobile-tabs{
  display:none;
}

@media(max-width:900px){

  html,body{
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(16,7,18,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  nav{
    min-height:62px;
    height:auto;
    padding:8px 0;
    gap:10px;
  }

  .brand{
    flex:1 1 auto;
    min-width:0;
  }

  .nav-logo-img{
    width:38px;
    height:38px;
  }

  .desktop-links{
    display:none !important;
  }

  #copyTop{
    min-height:40px;
    padding:0 12px;
    font-size:13px;
    border-radius:12px;
    white-space:nowrap;
  }

  .mobile-tabs{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:4px;
    padding:0 0 8px;
    width:100%;
  }

  .mobile-tabs a{
    min-width:0;
    min-height:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 2px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.06);
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
    color:#ffe8f3;
    font-size:16px;
    line-height:1;
  }

  .mobile-tabs a span{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    font-weight:800;
    line-height:1.15;
  }

  .mobile-tabs a:active{
    transform:scale(.97);
    background:linear-gradient(180deg,rgba(236,72,153,.18),rgba(217,70,239,.08));
  }

  .hero{
    padding:58px 0 38px;
  }

  .badge{
    max-width:100%;
    white-space:normal;
    text-align:center;
    font-size:10px;
  }

  h1{
    font-size:clamp(3rem,16vw,5.1rem);
    line-height:.92;
  }

  .claim{
    font-size:clamp(1.15rem,5.5vw,1.65rem);
    line-height:1.2;
  }

  .sub{
    font-size:.98rem;
    line-height:1.62;
  }

  .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .actions .btn{
    width:100%;
    min-height:50px;
  }

  .stats,
  .cards,
  .rules{
    grid-template-columns:1fr;
  }

  .stats{
    gap:10px;
    margin-top:30px;
  }

  .cards,
  .rules{
    gap:12px;
  }

  section{
    padding:48px 0;
  }

  h2{
    font-size:clamp(1.8rem,8.5vw,2.5rem);
  }

  .notice{
    flex-direction:column;
    align-items:flex-start;
  }

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

  .server-side{
    border-left:0;
    border-top:1px solid var(--line);
  }

  .server-main,
  .server-side{
    padding:20px;
  }

  .foot{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .bg-logo{
    background-position:center 0 !important;
    background-size:min(560px,94vw) !important;
    opacity:.12 !important;
  }
}

@media(max-width:560px){

  .wrap{
    width:min(100% - 18px,1180px);
  }

  .brand span:last-child{
    font-size:.95rem;
  }

  #copyTop{
    font-size:0;
    width:42px;
    padding:0;
  }

  #copyTop::after{
    content:"📋";
    font-size:18px;
  }

  .mobile-tabs{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    padding-bottom:10px;
  }

  .mobile-tabs a{
    min-height:48px;
    flex-direction:row;
    gap:6px;
    font-size:15px;
  }

  .mobile-tabs a span{
    font-size:12px;
  }

  .hero{
    padding-top:50px;
  }

  h1{
    font-size:clamp(2.8rem,17vw,4.2rem);
  }

  .row{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }

  .row span,
  .row b{
    width:100%;
    text-align:left;
  }

  .server-side .btn{
    width:100%;
    min-height:48px;
  }

  footer{
    padding-bottom:calc(32px + env(safe-area-inset-bottom));
  }
}

@media(max-width:360px){
  .brand span:last-child{
    display:none;
  }

  .mobile-tabs a span{
    font-size:11px;
  }
}


/* =========================================================
   FINAL RESPONSIVE FIX
   Desktop und Handy getrennt optimiert
   ========================================================= */

/* DESKTOP */
@media(min-width:901px){
  .mobile-tabs-wrap,
  .mobile-tabs{
    display:none !important;
  }

  header .wrap{
    width:min(1180px,calc(100% - 40px));
  }

  nav{
    height:76px !important;
    min-height:76px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:26px !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-width:max-content;
  }

  .nav-logo-img{
    width:46px !important;
    height:46px !important;
    object-fit:contain !important;
  }

  .brand span:last-child{
    display:inline !important;
    font-size:1.06rem !important;
    font-weight:950 !important;
    letter-spacing:.01em !important;
  }

  .desktop-links{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    margin:0 !important;
  }

  .desktop-links a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:0 13px !important;
    border-radius:12px !important;
    font-size:14px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

  #copyTop{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:132px !important;
    min-height:44px !important;
    padding:0 16px !important;
    font-size:14px !important;
    white-space:nowrap !important;
  }

  .hero{
    padding-top:105px !important;
  }

  .hero .wrap{
    width:min(1100px,calc(100% - 40px)) !important;
  }

  .stats{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .cards{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .rules{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .serverbox{
    grid-template-columns:1.1fr .9fr !important;
  }
}

/* TABLET + HANDY */
@media(max-width:900px){
  header .wrap{
    width:min(100% - 18px,1180px);
  }

  nav{
    min-height:64px !important;
    height:auto !important;
    padding:8px 0 !important;
  }

  .desktop-links{
    display:none !important;
  }

  .mobile-tabs-wrap{
    display:block !important;
    width:100%;
    padding:0 0 8px;
  }

  .mobile-tabs{
    display:grid !important;
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:0 !important;
  }

  .mobile-tabs a{
    min-width:0 !important;
    min-height:46px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    padding:0 8px !important;
    border-radius:12px !important;
    font-size:14px !important;
  }

  .mobile-tabs a span{
    font-size:12px !important;
    font-weight:850 !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}

/* KLEINE HANDYS */
@media(max-width:430px){
  .brand span:last-child{
    display:inline !important;
    font-size:.92rem !important;
  }

  #copyTop{
    width:42px !important;
    min-width:42px !important;
    padding:0 !important;
    font-size:0 !important;
  }

  #copyTop::after{
    content:"📋";
    font-size:18px;
  }

  .mobile-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .mobile-tabs a{
    min-height:44px !important;
    font-size:13px !important;
    gap:5px !important;
  }

  .mobile-tabs a span{
    font-size:11px !important;
  }
}