/* Farben im Stil des Logos */
:root{
  --gradient-start:#5DA5F4; /* helles Blau */
  --gradient-mid:#6E6CF2;  /* violett/blau */
  --gradient-end:#D66BD6;  /* rosa/lila */
  --bg-deep:#0e1020;
  --text:#eaf0ff;
  --muted:#bfc7e6;
  --card-glass:rgba(255,255,255,0.08);
  --card-stroke:rgba(255,255,255,0.16);
  --shadow:0 10px 25px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(214,107,214,0.3), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(93,165,244,0.25), transparent 60%),
    linear-gradient(160deg, #0a0c17, #13162a 60%, #0b0d19);
  display:flex;
}

/* Sidebar */
.sidebar{
  position:sticky; top:0; height:100vh; min-width:280px; width:280px;
  background:linear-gradient(180deg, rgba(93,165,244,0.15), rgba(214,107,214,0.15));
  border-right:1px solid var(--card-stroke);
  padding:24px 18px; display:flex; flex-direction:column; gap:18px;
  backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:12px; position:relative}
.brand__logo{height:56px; width:auto}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__title{font-weight:800; letter-spacing:.02em; text-transform:uppercase}
.brand__subtitle{font-weight:800; font-size:1.2rem; background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sidebar__toggle{margin-left:auto; width:40px; height:40px; border-radius:10px; background:var(--card-glass); border:1px solid var(--card-stroke); display:none; align-items:center; justify-content:center}
.sidebar__toggle span{display:block; width:18px; height:2px; background:var(--text); margin:2px 0; border-radius:2px}

.nav{display:flex; flex-direction:column; gap:8px}
.nav__link{padding:12px 14px; border-radius:12px; color:var(--text); text-decoration:none; font-weight:600; border:1px solid transparent}
.nav__link:hover{background:var(--card-glass); border-color:var(--card-stroke)}
.nav__link.active{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end)); color:#0b0d19}

.sidebar__footer{margin-top:auto; color:var(--muted)}

/* Main content */
.content{flex:1; min-width:0; padding:32px 40px; overflow-x:hidden}
.hero{background:linear-gradient(135deg, var(--gradient-start), var(--gradient-mid) 40%, var(--gradient-end));
  border-radius:26px; padding:48px; box-shadow:var(--shadow); color:#0b0d19; position:relative; isolation:isolate}
.hero::after{content:""; position:absolute; inset:0; border-radius:24px; padding:1px; background:linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor}
.hero__badge{display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.75); font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.hero__title{margin:16px 0 6px; font-size:clamp(2rem, 4vw + 1rem, 3.4rem); font-weight:800}
.hero__subtitle{margin:0 0 20px; color:#102; color:rgba(0,0,0,0.7)}
.btn{display:inline-block; padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:700}
.btn--primary{background:#0b0d19; color:#fff}
.btn--ghost{background:rgba(255,255,255,0.75); color:#0b0d19; border:1px solid rgba(0,0,0,0.1)}

.section{margin-top:36px; display:none}
.section.active{display:block}
.section__title{font-size:1.8rem; font-weight:800; margin:18px 0 18px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.card{background:var(--card-glass); border:1px solid var(--card-stroke); border-radius:18px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px}
.card ul{margin:0; padding-left:18px; color:var(--muted)}

/* Großes Regelwerk Layout */
.rulegrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:20px}
.rulecard{background:var(--card-glass); border:1px solid var(--card-stroke); border-radius:22px; padding:22px; box-shadow:var(--shadow)}
.rulecard__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.rulecard h3{font-size:1.5rem; margin:0}
.badge{display:inline-block; padding:8px 12px; border-radius:999px; font-weight:800; background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end)); color:#0b0d19}
.rulelist{margin:0; padding-left:22px; line-height:1.6; font-size:1.05rem; color:var(--muted)}

.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.teamcard{background:var(--card-glass); border:1px solid var(--card-stroke); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.teamcard img{width:100%; height:180px; object-fit:cover}
.teamcard__body{padding:14px}
.tags{display:flex; gap:8px; margin-top:8px}
.tag{font-size:.75rem; padding:6px 10px; border-radius:999px; background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end)); color:#0b0d19; font-weight:800}

.gallery{columns:3 320px; column-gap:16px}
.photo{break-inside:avoid; margin:0 0 16px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--card-stroke); background:var(--card-glass)}
.photo img{width:100%; height:auto; display:block}

.footer{margin:40px 0 10px; color:var(--muted); text-align:center}

/* Responsive */
@media (max-width: 960px){
  .sidebar{position:fixed; inset:auto 0 0 0; height:auto; width:auto; padding:12px 14px; border-right:none; border-top:1px solid var(--card-stroke); z-index:20; background:linear-gradient(180deg, rgba(93,165,244,0.25), rgba(214,107,214,0.25));}
  .brand{justify-content:space-between}
  .sidebar__toggle{display:flex}
  .nav{flex-direction:row; overflow:auto; padding-bottom:6px}
  .content{padding:24px 16px; margin-top:110px}
}

/* Smooth scrolling */
html{scroll-behavior:smooth}