:root{
  --bg:#05030a;
  --panel: rgba(20, 8, 36, .65);
  --stroke: rgba(190, 90, 255, .65);
  --stroke2: rgba(60, 200, 255, .45);
  --glow: 0 0 20px rgba(190,90,255,.35), 0 0 35px rgba(60,200,255,.18);
  --txt:#f2edff;
  --muted: rgba(242,237,255,.75);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 700px at 50% 30%, rgba(190,90,255,.12), transparent 60%),
              radial-gradient(900px 600px at 40% 80%, rgba(60,200,255,.08), transparent 60%),
              var(--bg);
}

.site-header{
  padding: 14px 14px 0;
}

.topbar-wrap{
  position:relative;
  margin: 0 auto;
  max-width: 1100px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(190,90,255,.18), rgba(60,200,255,.10), rgba(190,90,255,.18));
  border: 1px solid rgba(190,90,255,.35);
  box-shadow: var(--glow);
  overflow:hidden;
}

.topbar-glow{
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  pointer-events:none;
  box-shadow: 0 0 40px rgba(190,90,255,.20), 0 0 70px rgba(60,200,255,.12);
}

.brand img{
  height: 54px;
  display:block;
  filter: drop-shadow(0 0 14px rgba(190,90,255,.45));
}

.social-slot{
  flex: 1;
  min-width: 130px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--txt);
  background: rgba(5,3,10,.55);
  border: 1px solid rgba(190,90,255,.25);
  box-shadow: inset 0 0 0 1px rgba(60,200,255,.10);
}

.social-slot .slot-text{
  flex:1;
  min-height: 14px; /* bewusst leer aber "Platz" */
}

.icon{
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,.12);
  box-shadow: var(--glow);
}
.icon.youtube{ background: rgba(255, 40, 70, .35); }
.icon.twitch{ background: rgba(145, 70, 255, .35); }
.icon.tiktok{ background: rgba(20, 255, 220, .18); }
.icon.insta{ background: rgba(255, 170, 60, .20); }

.statsbar{
  max-width: 1100px;
  margin: 10px auto 0;
  display:flex;
  gap: 10px;
}
.stat-box{
  flex:1;
  height: 36px;
  border-radius: 12px;
  background: rgba(20,8,36,.55);
  border: 1px solid rgba(190,90,255,.25);
  box-shadow: var(--glow);
}

.nav{
  max-width: 1100px;
  margin: 10px auto 0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(10,6,18,.55);
  border: 1px solid rgba(190,90,255,.22);
  box-shadow: var(--glow);
}

.nav-link{
  text-decoration:none;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.nav-link:hover{
  color: var(--txt);
  border-color: rgba(60,200,255,.20);
  box-shadow: var(--glow);
}
.nav-link.is-active{
  color: var(--txt);
  background: rgba(190,90,255,.18);
  border-color: rgba(190,90,255,.35);
}

.page{
  max-width:1100px;
  margin: 18px auto 60px;
  padding: 0 14px;
}

.hero{
  position:relative;
  padding: 48px 22px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(190,90,255,.28);
  box-shadow: var(--glow);
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background: url("../img/bg.jpg") center/cover no-repeat;
  opacity:.22;
  filter: saturate(1.2);
}
.hero > *{ position:relative; }

.h1{ margin:0 0 6px; font-size: 34px; }
.sub{ margin:0 0 18px; color: var(--muted); }

.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--txt);
  border: 1px solid rgba(190,90,255,.35);
  background: rgba(20,8,36,.65);
  box-shadow: var(--glow);
}
.btn.primary{
  background: linear-gradient(90deg, rgba(190,90,255,.40), rgba(60,200,255,.18));
}
.btn.ghost{
  background: rgba(5,3,10,.35);
}
.btn.small{ padding: 10px 12px; border-radius: 12px; }

.grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .social-slot{ min-width: 0; }
  .brand img{ height: 48px; }
}

.card{
  border-radius: 18px;
  background: rgba(20,8,36,.55);
  border: 1px solid rgba(190,90,255,.22);
  box-shadow: var(--glow);
  padding: 16px;
  overflow:hidden;
}
.card-media{
  height: 140px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(60,200,255,.18);
  margin-bottom: 12px;
}

.h2{ margin: 22px 0 10px; }
.clip-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.clip{ height: 160px; }
@media (max-width: 900px){
  .clip-row{ grid-template-columns: 1fr; }
}

.footer{
  padding: 26px 14px;
  border-top: 1px solid rgba(190,90,255,.18);
  background: rgba(0,0,0,.25);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  color: var(--muted);
}
.footer-icons{ display:flex; gap:10px; }
.mini-icon{
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(190,90,255,.22);
  box-shadow: var(--glow);
}