:root {
  --primary:#6366f1;
  --gradient:linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899);
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:#f5f6fa;
  color:#222;
}

/* Header */
header {
  position:relative;
  background:var(--gradient);
  color:#fff;
  padding:.5rem 0 1.2rem;
  overflow:visible; /* WICHTIG */
}
header::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.35),transparent 60%);
  pointer-events:none;
}

.topbar {
  display:flex;
  align-items:center;
  gap:2rem;
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}
.logo-wrap {
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:#fff;
  font-weight:600;
  font-size:1.2rem;
}
.logo-wrap img { height:54px; width:auto; border-radius:6px; }

nav {
  margin-left:auto;
  display:flex;
  gap:.5rem;
}
nav a, nav button.tab {
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  padding:.55rem 1rem;
  border-radius:999px;
  font:inherit;
  cursor:pointer;
  text-decoration:none;
  backdrop-filter: blur(4px);
  transition:.2s;
  white-space:nowrap;
}
nav a:hover, nav button.tab:hover { background:rgba(255,255,255,.3); }
nav .tab.active { background:#fff; color:#444; }

/* Hero */
.hero {
  max-width:800px;
  margin:2rem auto 0;
  text-align:center;
  padding:0 1rem;
}
.hero h1 { margin:.5rem 0 0; font-size:2rem; font-weight:600; }
.hero p { margin:.75rem auto 0; font-size:1.05rem; max-width:600px; line-height:1.4; }

/* MOBILE FIX */
@media (max-width:700px){
  .topbar {
    flex-wrap:wrap;              /* erlaubt Umbruch */
    align-items:flex-start;
  }
  nav {
    width:100%;
    margin-left:0;
    flex-wrap:nowrap;
    overflow-x:auto;             /* horizontal scrollen */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav::-webkit-scrollbar { display:none; }
  nav a, nav button.tab {
    flex:0 0 auto;
    padding:.45rem .75rem;
    font-size:.85rem;
  }
  .hero { margin:1rem auto 0; }
  .hero h1 { font-size:1.55rem; }
}