:root{
    --bg:#050408; --panel:#0d0c12; --ink:#f2f0f6; --muted:#c9c5d4; --line:#26232e;
    --cyan:#00d8ff; --magenta:#ff2d9b; --purple:#8b5cf6;
    --glow-c:0 0 10px rgba(0,216,255,.55),0 0 26px rgba(0,216,255,.25);
    --glow-m:0 0 10px rgba(255,45,155,.55),0 0 26px rgba(255,45,155,.3);
    --cond:"Bahnschrift SemiCondensed","Bahnschrift","Arial Narrow",Arial,sans-serif;
    --logo:url("/logo.png");
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  body{margin:0;color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;line-height:1.55;
    background:radial-gradient(900px 480px at 85% 0%,rgba(255,45,155,.16),transparent 60%),
               radial-gradient(800px 420px at 0% 26%,rgba(0,216,255,.12),transparent 60%),
               radial-gradient(700px 500px at 60% 100%,rgba(139,92,246,.14),transparent 60%),var(--bg)}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* Navigatie met actief-markering */
  .stickynav{position:sticky;top:0;z-index:50;background:rgba(5,4,8,.9);backdrop-filter:blur(10px);padding:0 24px}
  .stickynav nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:12px 0;
    border-bottom:2px solid var(--cyan);box-shadow:0 14px 30px -22px rgba(0,216,255,.8)}
  .navlogo{width:88px;height:38px;background:var(--logo) center/88px auto no-repeat;flex:none;opacity:0;transition:opacity .25s}
  .navlogo.vis{opacity:1}
  .links{display:flex;gap:18px;margin-left:auto;align-items:center;font-size:12.5px;color:var(--muted);
    text-transform:uppercase;letter-spacing:.1em;flex-wrap:wrap;justify-content:flex-end}
  .links a{color:inherit;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
  .links a:hover,.links a:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan);outline:none;
    text-shadow:0 0 12px rgba(0,216,255,.8)}
  .links a.on{color:var(--cyan);border-bottom-color:var(--cyan)}
  .links .login{border:2px solid var(--magenta);color:#ff8cc8;padding:7px 18px;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);box-shadow:var(--glow-m)}
  .links .login:hover,.links .login.on{color:#fff;border-bottom-color:var(--magenta)}
  .themebtn{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--cond);
    text-transform:uppercase;letter-spacing:.12em;font-size:11px;padding:7px 14px;cursor:pointer}
  .themebtn:hover,.themebtn:focus-visible{color:var(--cyan);border-color:var(--cyan);outline:none;box-shadow:var(--glow-c)}

  /* Hero */
  .hero{position:relative;min-height:66vh;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:34px 24px 26px}
  .lasers{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .lasers i{position:absolute;display:block;border-radius:999px}
  .lasers .l1{right:-6%;top:16%;width:52%;height:3px;transform:rotate(-24deg);
    background:linear-gradient(90deg,transparent,var(--cyan) 30%,#bdf3ff 50%,var(--cyan) 70%,transparent);box-shadow:var(--glow-c)}
  .lasers .l2{left:-8%;top:64%;width:56%;height:2px;transform:rotate(-24deg);
    background:linear-gradient(90deg,transparent,var(--magenta) 35%,#ffc4e4 50%,var(--magenta) 65%,transparent);box-shadow:var(--glow-m)}
  .lasers .l3{left:22%;top:30%;width:44%;height:2px;transform:rotate(14deg);opacity:.7;
    background:linear-gradient(90deg,transparent,var(--purple) 40%,#d9c8ff 55%,var(--purple) 70%,transparent);
    box-shadow:0 0 10px rgba(139,92,246,.55),0 0 26px rgba(139,92,246,.3)}
  .spark{position:absolute;font-size:18px;color:#fff;text-shadow:0 0 10px #fff,0 0 22px var(--cyan)}
  .spark.s1{right:16%;top:14%}
  .spark.s2{left:18%;bottom:22%;font-size:12px;text-shadow:0 0 10px #fff,0 0 22px var(--magenta)}
  .herologo{width:min(76vw,440px);aspect-ratio:1;background:var(--logo) center/contain no-repeat;
    position:relative;filter:drop-shadow(0 0 60px rgba(139,92,246,.45))}
  .heroline{font-family:var(--cond);text-transform:uppercase;letter-spacing:.26em;font-size:clamp(12px,2.4vw,15px);
    color:var(--ink);margin:-28px 0 0;position:relative;text-shadow:0 0 16px rgba(0,216,255,.4);padding-left:.26em}
  .herosub{position:relative;color:var(--muted);max-width:58ch;margin:14px 0 0;font-size:15px}
  .herocta{position:relative;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}

  .btn-p{background:var(--magenta);color:#fff;font-weight:800;border:none;padding:13px 30px;font-size:13.5px;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);text-transform:uppercase;letter-spacing:.1em;
    cursor:pointer;box-shadow:var(--glow-m);text-decoration:none;display:inline-block}
  .btn-s{background:rgba(0,216,255,.08);color:var(--cyan);border:2px solid var(--cyan);padding:11px 26px;font-size:13.5px;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);text-transform:uppercase;letter-spacing:.1em;
    cursor:pointer;text-decoration:none;display:inline-block;font-weight:700;text-shadow:0 0 10px rgba(0,216,255,.5)}
  .btn-p:focus-visible,.btn-s:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}

  .kicker{font-family:var(--cond);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);
    margin:56px 0 16px;display:flex;align-items:center;gap:14px}
  .kicker::after{content:"";flex:1;height:2px;border-radius:999px;
    background:linear-gradient(90deg,var(--cyan),var(--purple) 50%,var(--magenta));box-shadow:0 0 12px rgba(139,92,246,.5)}
  .lead{color:var(--muted);margin:0 0 16px;max-width:72ch}
  .lead b{color:var(--ink)}

  /* Vereniging: de alinea's naast elkaar over de volle breedte */
  .aboutText{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 28px;align-items:start}
  .about p{margin:0;color:var(--muted);font-size:15px}
  .about p b{color:var(--ink)}
  .aboutText .btnrow{grid-column:1/-1;margin-top:20px}
  @media (max-width:900px){.aboutText{grid-template-columns:1fr;gap:12px}
    .aboutText .btnrow{margin-top:14px}}

  /* Kaarten */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .card{background:var(--panel);border:1px solid var(--line);padding:20px;border-top:4px solid var(--magenta);
    box-shadow:0 -4px 26px -12px rgba(255,45,155,.75);display:block;text-decoration:none;color:inherit}
  .card:nth-child(2){border-top-color:var(--cyan);box-shadow:0 -4px 26px -12px rgba(0,216,255,.75)}
  .card:nth-child(3){border-top-color:var(--purple);box-shadow:0 -4px 26px -12px rgba(139,92,246,.75)}
  .card:nth-child(4){border-top-color:#fff;box-shadow:0 -4px 26px -12px rgba(255,255,255,.6)}
  a.card:hover,a.card:focus-visible{outline:none;box-shadow:0 0 0 1px var(--cyan),0 0 28px -8px rgba(0,216,255,.8)}
  .card h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;margin:0 0 3px;font-size:20px}
  .card .sub{font-size:13.5px;color:var(--muted)}
  .card .go{display:inline-block;margin-top:12px;font-family:var(--cond);text-transform:uppercase;
    letter-spacing:.14em;font-size:11.5px;color:var(--cyan)}
  .cnt{font-family:var(--cond);display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    padding:4px 10px;margin-bottom:12px;background:#171420;color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,216,255,.4)}

  /* Weekrooster */
  /* Proeflessen in een nieuwsbericht: zelfde taal als het weekrooster, maar
     rustiger (het staat al binnen een uitgeklapt bericht) en met een eigen
     mobiele weergave, want deze pagina wordt vooral op een telefoon bekeken. */
  .proef{width:100%;border-collapse:collapse;background:var(--panel);
    border:1px solid var(--line);margin:14px 0}
  .proef thead th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
    font-size:11px;text-align:left;color:#050408;background:var(--cyan);padding:9px 14px;font-weight:700}
  .proef td,.proef tbody th{padding:12px 14px;border-top:1px solid var(--line);
    vertical-align:top;text-align:left}
  .proef tbody th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;
    font-size:15px;color:var(--ink);font-weight:400;white-space:nowrap}
  .proef .time{font-variant-numeric:tabular-nums;color:var(--cyan);white-space:nowrap}
  /* Op een telefoon wordt elke rij een kaartje: een tabel van drie kolommen
     met datums erin wordt anders onleesbaar smal. */
  @media (max-width:620px){
    .proef,.proef thead,.proef tbody,.proef tr,.proef td,.proef tbody th{display:block;width:100%}
    .proef thead{display:none}
    .proef tr{border-top:2px solid var(--cyan);padding:4px 0 10px}
    .proef tr:first-child{border-top:0}
    .proef td,.proef tbody th{border-top:0;padding:4px 14px}
    .proef tbody th{padding-top:12px;font-size:16px}
    .proef .time{color:var(--cyan)}
  }

  .rooster{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
    box-shadow:0 0 40px -18px rgba(0,216,255,.6)}
  .rooster thead th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:11.5px;
    text-align:left;color:#050408;background:var(--magenta);padding:11px 16px;font-weight:700}
  .rooster td,.rooster th.day{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
  .rooster tr.dayStart td,.rooster tr.dayStart th{border-top:2px solid var(--purple)}
  .rooster th.day{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:14px;
    text-align:left;color:var(--ink);background:rgba(139,92,246,.10);white-space:nowrap;width:1%}
  .rooster .time{font-variant-numeric:tabular-nums;font-family:var(--cond);font-size:16px;color:var(--cyan);
    white-space:nowrap;width:1%}
  .rooster .cls{font-size:15px;color:var(--ink);font-weight:600}
  .rooster .loc{color:var(--muted);font-size:14px}
  .rooster .loc span{display:block;font-size:12.5px;opacity:.8}
  .rooster tbody tr:hover td{background:rgba(0,216,255,.04)}
  .tag-free,.tag-aud,.tag-comp{font-family:var(--cond);display:inline-block;font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;padding:3px 9px;margin-left:8px;vertical-align:2px;background:#171420;white-space:nowrap}
  .tag-free{color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,216,255,.45)}
  .tag-aud{color:#ff6cb5;box-shadow:inset 0 0 0 1px rgba(255,45,155,.45)}
  .tag-comp{color:#c4b1ff;box-shadow:inset 0 0 0 1px rgba(139,92,246,.5)}
  .roosterLegend{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:2.1}
  .roosterLegend .tag-free,.roosterLegend .tag-aud,.roosterLegend .tag-comp{margin-left:0;margin-right:2px}

  /* Stappen (inschrijven) */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
  .step{background:var(--panel);border:1px solid var(--line);padding:20px;position:relative}
  .step .n{font-family:var(--cond);font-size:34px;line-height:1;color:var(--magenta);
    text-shadow:0 0 18px rgba(255,45,155,.5);display:block;margin-bottom:8px}
  .step h3{font-family:var(--cond);text-transform:uppercase;margin:0 0 6px;font-size:17px;letter-spacing:.05em}
  .step p{margin:0;color:var(--muted);font-size:14px}

  /* Uitklapblokken (nieuws + praktisch) */
  .acc{background:var(--panel);border:1px solid var(--line);margin-bottom:10px}
  .acc>summary{cursor:pointer;list-style:none;padding:15px 18px;display:flex;gap:12px;align-items:baseline;
    font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;font-size:17px}
  .acc>summary::-webkit-details-marker{display:none}
  .acc>summary::after{content:"+";margin-left:auto;color:var(--cyan);font-size:20px;line-height:1;flex:none}
  .acc[open]>summary::after{content:"–"}
  .acc>summary:hover,.acc>summary:focus-visible{color:var(--cyan);outline:none}
  .acc .date{font-family:var(--cond);font-size:12px;letter-spacing:.2em;color:var(--muted);flex:none}
  .acc .body{padding:0 18px 18px;color:var(--muted);font-size:14.5px}
  .acc .body p{margin:0 0 10px;max-width:70ch}
  .acc .body p:last-child{margin-bottom:0}
  .acc.news{border-top:3px solid var(--magenta)}
  .acc.news:nth-of-type(2){border-top-color:var(--cyan)}
  .acc.news:nth-of-type(3){border-top-color:var(--purple)}

  /* Locaties */
  .places{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
  .place{background:var(--panel);border:1px solid var(--line);padding:20px 22px;display:block;
    text-decoration:none;color:inherit}
  a.place:hover,a.place:focus-visible{outline:none;box-shadow:0 0 0 1px var(--cyan),0 0 28px -10px rgba(0,216,255,.7)}
  .place .lbl{font-family:var(--cond);text-transform:uppercase;font-size:11px;letter-spacing:.2em;color:var(--cyan);
    display:block;margin-bottom:6px}
  .place strong{display:block;font-size:15.5px;margin-bottom:2px}
  .place span.txt{color:var(--muted);font-size:14px;display:block}
  .place .go{display:inline-block;margin-top:10px;font-family:var(--cond);text-transform:uppercase;
    letter-spacing:.14em;font-size:11.5px;color:var(--cyan)}

  /* Nieuwsbrief */
  .nb{background:var(--panel);border:1px solid var(--line);padding:24px;display:flex;gap:16px;flex-wrap:wrap;
    align-items:center;box-shadow:0 0 40px -16px rgba(139,92,246,.6)}
  .nb p{margin:0;color:var(--muted);max-width:46ch;font-size:14.5px}
  .nb form{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
  .nb input{background:#171420;border:1px solid var(--line);color:var(--ink);padding:11px 14px;font-size:14px;min-width:220px}

  /* Footer */
  footer{margin-top:70px;border-top:2px solid var(--magenta);box-shadow:0 -14px 30px -24px rgba(255,45,155,.9);
    padding:36px 0 46px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px;margin-bottom:26px}
  .fgrid h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--ink);margin:0 0 10px}
  .fgrid p,.fgrid li{color:var(--muted);font-size:13.5px;margin:0 0 5px}
  .fgrid ul{list-style:none;margin:0;padding:0}
  .fgrid a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
  .fgrid a:hover,.fgrid a:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan);outline:none}
  .legalline{border-top:1px solid var(--line);padding-top:18px;display:flex;gap:8px 18px;flex-wrap:wrap;
    align-items:center;font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--muted)}
  .legalline .tag{color:var(--cyan);text-shadow:0 0 12px rgba(0,216,255,.5)}
  .legalline .hash{margin-left:auto;color:var(--magenta);text-shadow:0 0 12px rgba(255,45,155,.5)}

  /* Terug naar boven */
  .top{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--panel);border:1px solid var(--cyan);
    color:var(--cyan);font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:11px;
    padding:10px 14px;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .25s;
    box-shadow:0 0 24px -8px rgba(0,216,255,.8)}
  .top.vis{opacity:1;pointer-events:auto}
  .top:hover,.top:focus-visible{color:#fff;background:var(--cyan);outline:none}

  @media (max-width:860px){.about{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}
    .lasers .l3{display:none}.legalline .hash{margin-left:0}}
  @media (max-width:700px){
    .rooster,.rooster tbody,.rooster tr,.rooster td,.rooster th.day{display:block;width:auto}
    .rooster thead{display:none}
    .rooster th.day{background:rgba(139,92,246,.14);padding:9px 16px;border-top:2px solid var(--purple)}
    .rooster td{border-top:none;padding:1px 16px}
    .rooster tr.dayStart td{border-top:none}
    .rooster .time{padding-top:12px}
    .rooster td.loc{padding-bottom:13px}
    .rooster tr+tr:not(.dayStart){border-top:1px solid var(--line)}
    .tag-free,.tag-aud,.tag-comp{margin-left:0;margin-top:4px;vertical-align:baseline}
    .rooster .cls{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
  }
  @media (max-width:620px){.links a:not(.login):not(.navlink-keep){display:none}.hero{min-height:56vh}}
  @media (prefers-reduced-motion:no-preference){
    .spark{animation:tw 2.6s ease-in-out infinite}
    .spark.s2{animation-delay:1.2s}
    @keyframes tw{0%,100%{opacity:.35}50%{opacity:1}}
    .lasers .l1{animation:laserA 7s ease-in-out infinite}
    .lasers .l2{animation:laserB 9s ease-in-out infinite}
    .lasers .l3{animation:laserC 11s ease-in-out infinite}
    @keyframes laserA{0%,100%{transform:rotate(-24deg) translateX(0);opacity:1}50%{transform:rotate(-24deg) translateX(-46px);opacity:.45}}
    @keyframes laserB{0%,100%{transform:rotate(-24deg) translateX(0);opacity:.95}50%{transform:rotate(-24deg) translateX(60px);opacity:.4}}
    @keyframes laserC{0%,100%{transform:rotate(14deg) translateX(0);opacity:.7}50%{transform:rotate(14deg) translateX(50px);opacity:.35}}
  }

  /* Licht thema */
  html[data-theme="light"]{--bg:#f4f2f8;--panel:#ffffff;--ink:#1c1724;--muted:#5f5872;--line:#ddd7e8;
    --cyan:#0090c5;--magenta:#e0117a;--purple:#7444e0;
    --glow-c:0 0 8px rgba(0,144,197,.3),0 0 18px rgba(0,144,197,.12);
    --glow-m:0 0 8px rgba(224,17,122,.3),0 0 18px rgba(224,17,122,.14)}
  html[data-theme="light"] body{background:radial-gradient(900px 480px at 85% 0%,rgba(224,17,122,.07),transparent 60%),
    radial-gradient(800px 420px at 0% 40%,rgba(0,144,197,.06),transparent 60%),var(--bg)}
  html[data-theme="light"] .stickynav{background:rgba(244,242,248,.93)}
  html[data-theme="light"] .navlogo,html[data-theme="light"] .herologo{
    filter:drop-shadow(0 1px 3px rgba(24,14,36,.6)) drop-shadow(0 0 14px rgba(124,77,236,.25))}
  html[data-theme="light"] .cnt{background:#f4f0fa}
  html[data-theme="light"] .nb input{background:#f1edf8}
  html[data-theme="light"] .lasers i{opacity:.5}
  html[data-theme="light"] .spark{color:var(--purple);text-shadow:0 0 8px rgba(124,77,236,.5)}
  html[data-theme="light"] .btn-s{background:rgba(0,144,197,.07);text-shadow:none}
  html[data-theme="light"] .btn-p{color:#fff}
  html[data-theme="light"] .rooster thead th{color:#fff}
  html[data-theme="light"] .tag-free,html[data-theme="light"] .tag-aud,html[data-theme="light"] .tag-comp{background:#f4f0fa}
  html[data-theme="light"] .tag-aud{color:#c01573}
  html[data-theme="light"] .tag-comp{color:var(--purple)}
  html[data-theme="light"] .rooster th.day{background:rgba(116,68,224,.07)}
  html[data-theme="light"] .rooster tbody tr:hover td{background:#f6f2fb}