/* ---- Base ---- */
:root{
  --bg:#07080c;
  --surface:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --text:#e9f0ff;
  --muted:#9ab3ff;
  --brandA:#ff4d5a;
  --brandB:#ff9c2b;
  --brandC:#00c2ff;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

.container{max-width:1100px;margin:auto;padding:0 24px}

/* ---- Header ---- */
header {
  display:flex;
  justify-content:flex-end; /* Navigation rechts */
  align-items:center;
  height:60px;
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  backdrop-filter:saturate(160%) blur(12px);
  background:linear-gradient(180deg, rgba(8,10,16,.85), rgba(8,10,16,.65));
  border-bottom:1px solid var(--border);
}
body{ padding-top:60px; }

/* ----- Alter halbflexibler Header -----
header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(160%) blur(12px);
  background:linear-gradient(180deg, rgba(8,10,16,.85), rgba(8,10,16,.65));
  border-bottom:1px solid var(--border);
} ----- */
header .logo{height:256px;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));}
header .nav{
  display:flex;gap:2px;align-items:center;justify-content:flex-end;padding:2px 0;
}
header .nav a{color:var(--muted);text-decoration:none;font-weight:600}
header .nav a:hover{color:#fff}
header .nav .cta{
  padding:2px 2px;border-radius:2px;border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(255,76,90,.25),rgba(0,194,255,.25));
  color:#fff;
}

/* ---- Hero ---- */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center;padding:64px 0 24px}
.hero-text h1{font-family:'Chakra Petch',Inter,sans-serif;font-size:64px;line-height:1.0;margin:0 0 10px}
.hero-text h1 span{background:linear-gradient(90deg,var(--brandB),var(--brandA),var(--brandC));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text p{color:var(--muted);margin:8px 0 14px;font-size:18px}
.ip-box{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--border);padding:10px 12px;border-radius:14px;width:max-content}
.ip-box code{font-family:'Chakra Petch',monospace;font-size:18px}
.ip-box button{
  cursor:pointer;border:1px solid var(--border);background:transparent;color:#fff;
  padding:8px 12px;border-radius:12px;transition:.2s transform;
}
.ip-box button:hover{transform:translateY(-2px)}

.btn-row{display:flex;gap:10px;margin-top:6px}
.btn{display:inline-block;text-decoration:none;padding:12px 16px;border-radius:14px;border:1px solid var(--border)}
.btn.primary{background:linear-gradient(135deg,var(--brandB),var(--brandA));color:#0b0d14;font-weight:700}
.btn.ghost{background:transparent;color:#fff}
.small{font-size:13px;color:var(--muted)}
.muted{opacity:.8}

.hero-art{position:relative;height:280px}
.cube{position:absolute;width:120px;height:120px;border-radius:16px;background:linear-gradient(135deg,var(--brandB),var(--brandA));box-shadow:var(--shadow);filter:saturate(130%)}
.cube-a{top:30px;left:30px;transform:rotate(-12deg)}
.cube-b{top:100px;left:160px;background:linear-gradient(135deg,var(--brandC),var(--brandA));transform:rotate(18deg)}
.cube-c{top:20px;left:280px;background:linear-gradient(135deg,var(--brandC),var(--brandB));transform:rotate(-6deg)}

/* ---- Sections ---- */
.section{padding:48px 0}
.section h2{font-family:'Chakra Petch',Inter,sans-serif;font-size:34px;margin:0 0 12px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0;list-style:none}
.feature-list li{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center}
.feature-list span{font-size:20px}
.rules{margin-left:18px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.member{display:flex;gap:32px;align-items:center;background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:14px}
.avatar{width:64px;height:64px;border-radius:10px;display:grid;place-items:center;
  font-weight:800;color:#0b0d14}

/* ---- Footer ---- */
.footer{display:flex;justify-content:space-between;align-items:center;padding:24px 0 48px;border-top:1px solid var(--border);margin-top:20px}
.footer .links{display:flex;gap:14px}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:#fff}

/* ---- Toast ---- */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#0b0d14;border:1px solid var(--border);padding:10px 14px;border-radius:14px;opacity:0;pointer-events:none;transition:.3s;box-shadow:var(--shadow)}
#toast.show{opacity:1}

/* ---- Background canvas ---- */
#bg{position:fixed;inset:0;z-index:-1}

/* ---- Responsive ---- */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .hero-art{height:160px}
}


header .nav {
  display:flex;
  gap:18px;
  align-items:center;
  padding:0 24px;
}
header .nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
}
header .nav a:hover{color:#fff}
header .nav .cta{
  padding:8px 8px;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(255,76,90,.25),rgba(0,194,255,.25));
  color:#fff;
}
header .nav .home-link{
  font-size:20px;
  text-decoration:none;
  line-height:1;
}


/* --- Anchor offset for fixed header --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}
.hero, .section {
  scroll-margin-top: 60px;
}

/* --- Mobile (Portrait) Nav-Fix --- */
@media (max-width: 600px){
  header{ height:56px; }

  /* Scrollbare, NICHT abgeschnittene Nav mit Safe-Area-Padding */
  header .nav{
    display:flex;
    gap:12px;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling: touch;

    /* wichtig: nicht unter die runden iOS-Ränder geraten */
    padding-left: max(2px, env(safe-area-inset-left));
    padding-right: max(2px, env(safe-area-inset-right));
    padding-top: 0; padding-bottom: 0;

    /* optional: leichte Einrastpunkte beim Wischen */
    scroll-snap-type: x proximity;
  }
  header .nav a{
    font-size:14px;
    padding:2px 0;
    display:inline-block;
    scroll-snap-align: start;
  }

  /* Anker-Sprünge mit mehr Puffer für die kleinere Header-Höhe */
  html{ scroll-padding-top: 68px; }
  .hero, .section{ scroll-margin-top: 68px; }

  /* Logo sicher responsiv (falls noch nicht gesetzt) */
  .hero .logo{ max-width: 90vw; height:auto; }
  img{ max-width:100%; height:auto; }
}