/* =========================================================
   Dansstudio MOVE Salland
   Stijl "Podium": de paarse huisstijl op een licht vel.

   Eén palet, in :root. Twee vlakken blijven donker, ongeacht de
   rest van de pagina: de hero en de voettekst. Daar staat het
   witte neonlogo op en dat heeft een donkere ondergrond nodig.
   Die gebruiken de --nacht-tokens in plaats van de paginakleuren.

   Type: Outfit (koppen) + Plus Jakarta Sans (tekst)
   ========================================================= */

/* De lettertypen staan lokaal in assets/fonts/, niet bij Google. Dat scheelt
   twee externe verbindingen en een stylesheet die het tekenen ophoudt, en het
   stuurt niet het IP-adres van elke bezoeker naar Google.

   Beide zijn variabele fonts: één bestand per subset dekt alle diktes.
   Ophalen of vernieuwen: python3 tools/fonts_ophalen.py

   Let op: deze url's zijn relatief aan DIT bestand, niet aan de pagina. Daarom
   blijven ze ook goed op 404.html, die vanaf elke diepte geserveerd kan worden. */
@font-face{
  font-family:"Outfit";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Outfit";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  color-scheme:light;

  /* altijd donker: de hero en de voettekst. Het logo staat in de huisstijl
     op zuiver zwart, dus dat is hier ook de ondergrond. */
  --nacht:#000000;
  --op-nacht:#F6ECFB;

  /* De zes huisstijlkleuren, aangeleverd door de klant. */
  --paars-licht:#DD76FA;
  --paars:#AF49CC;
  --paars-gedempt:#C38FC9;
  --lila:#EBB1FA;
  --zwart:#000000;
  --grijs:#E1E1E1;

  /* Geen van de zes draagt witte tekst comfortabel: --paars haalt 4,52:1 en
     dat is nét AA, te krap voor knoppen en badges. Daarom één donkerdere
     variant, dezelfde tint (287°) op 75% helderheid, die alles draagt wat
     tekst is: 7,07:1 op wit. --paars blijft de merkkleur voor vlakken,
     bolletjes en randen; alles wat tekst op paars zet gebruikt --paars-diep. */
  --paars-diep:#833799;

  /* Nog een stap donkerder. Nodig waar paarse tekst op een licht páars vlak
     staat in plaats van op wit: op --vlak-3 haalt --paars-diep 6,03:1 en deze
     8,92:1. Draagt ook de donkere kant van de balkverlopen (10,46:1 met wit). */
  --paars-donker:#5B1F8A;

  /* Het verloop van .pagina-kop en .sociaal-balk: paars naar paars, op verzoek
     van de klant. Hier stond violet → magenta; dat magenta-eind viel buiten de
     huisstijl en moest eruit.

     Beide blokken dragen witte tekst, dus het verloop is op contrast gekozen:
     10,46:1 aan de donkere kant en aan de lichte kant nog 5,57:1 — ruimer dan
     de 4,62:1 die het magenta-eind haalde.

     De lichte kant moet donkerder blijven dan de kopbalk erboven (die loopt van
     --paars naar --paars-licht), anders lopen de twee paarse vlakken in elkaar
     over. Daarom niet doortrekken tot --paars zelf. */
  --balk-donker:var(--paars-donker);
  --balk-licht:#9B3FB5;

  /* de pagina — dezelfde tint als de merkkleuren */
  --vlak:#FFFFFF;
  --vlak-2:#FAF4FC;
  --vlak-3:#F5E9F9;
  --rand:#EBDCEF;
  --rand-sterk:rgba(175,73,204,.35);
  --tekst:#1C1226;
  --tekst-zacht:#5F4A70;
  --tekst-sterk:#100818;
  --accent:var(--paars-diep);
  --sluier:#FAF4FC;
  --gloed-a:.09;
  --gloed-b:.07;

  /* kopbalk: twee standen, groot bovenaan en klein zodra er gescrold wordt */
  --kop-h:clamp(140px,17vw,196px);
  --kop-h-klein:74px;
  --kop-schuin:clamp(28px,4.5vw,58px);
  --kop-schuin-klein:20px;
  /* wat er nú geldt; body.kop-klein zet deze twee om */
  --nu-h:var(--kop-h);
  --nu-schuin:var(--kop-schuin);
  /* hoogte van de aankondigingsbalk boven de kopbalk; 0 als er geen is.
     Wordt gezet door het scriptje direct na die balk, zie meldingen() in
     tools/bouw.py. */
  --melding-h:0px;

  --display:"Outfit", system-ui, sans-serif;
  --body:"Plus Jakarta Sans", system-ui, sans-serif;

  --wrap:1240px;
  --gutter:clamp(1.15rem, 4vw, 3rem);
}

body.kop-klein{
  --nu-h:var(--kop-h-klein);
  --nu-schuin:var(--kop-schuin-klein);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--vlak);color:var(--tekst);
  font-family:var(--body);line-height:1.65;
  font-size:clamp(1rem,.4vw + .92rem,1.06rem);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;margin:0;letter-spacing:-.02em;color:var(--tekst-sterk)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sectie{padding-block:clamp(3.5rem,8vw,7rem)}
.sectie--kort{padding-block:clamp(2.5rem,5vw,4rem)}
/* fixed en niet absolute: bij absolute verschijnt de skiplink bovenaan het
   document, dus buiten beeld zodra de bezoeker al gescrold heeft. */
.skip{position:fixed;left:-999px;background:var(--paars-diep);color:#fff;padding:.7rem 1rem;z-index:300}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--paars-diep);outline-offset:3px}

/* De kopbalk staat vast bovenaan, dus een anker zou eronder landen. */
:target,[id]{scroll-margin-top:calc(var(--melding-h) + var(--kop-h-klein) + var(--kop-schuin-klein) + 1rem)}

/* zachte zaalgloed op de achtergrond */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(175,73,204,var(--gloed-a)), transparent 65%),
    radial-gradient(48rem 34rem at 92% 8%, rgba(221,118,250,var(--gloed-b)), transparent 62%);
}

.opschrift{
  font-family:var(--body);font-weight:800;text-transform:uppercase;
  letter-spacing:.22em;font-size:.72rem;color:var(--accent);
  display:block;margin:0 0 1.1rem;
}

/* =========================================================
   NEON-LOGO
   Twee lagen over elkaar: kader, "DANSSTUDIO" en de danseres
   staan stil, alleen de paarse MOVE-buis flikkert aan.
   ========================================================= */
.neon{position:relative;display:block;line-height:0}
.neon img{width:100%;height:auto}
.neon-stil{position:relative;z-index:1}
.neon-buis{position:absolute;inset:0;z-index:2}

/* Gloed achter het MOVE-deel. Het kader ligt op ongeveer 8-86% breed en
   33-89% hoog van het logo; daar zit de buis, dus daar hoort de gloed.

   De waarden zijn een stuk lager dan op een donkere ondergrond hoorde: op wit
   wordt gloed al snel een vuile paarse waas in plaats van licht. De lichte
   neon-PNG heeft zijn bloom bovendien al ingebakken, dus deze laag hoeft alleen
   het ademen te doen. */
.neon-gloed{
  position:absolute;z-index:0;left:6%;top:31%;width:80%;height:58%;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,
    rgba(175,73,204,.20) 0%, rgba(175,73,204,.10) 42%, rgba(175,73,204,0) 72%);
  filter:blur(26px);
}
/* De fellere kern binnen de waas. Twee lagen die los van elkaar ademen
   geven samen een onregelmatige helderheid: de dekking van de kern
   vermenigvuldigt met die van de laag eronder. */
.neon-gloed::after{
  content:"";position:absolute;inset:14% 10%;border-radius:50%;opacity:0;
  background:radial-gradient(ellipse at center,
    rgba(175,73,204,.26) 0%, rgba(221,118,250,.14) 45%, rgba(221,118,250,0) 72%);
}
.neon.is-igniting .neon-gloed{animation:gloed-ontsteken .34s steps(1,end) forwards}
/* Periodes die niet op elkaar delen (5,5 · 7,3 · 6,7 · 11 seconden), zodat
   het patroon zich pas na uren herhaalt. Eén enkele sinus herkent het oog
   binnen twee tellen als een lus; dit blijft onvoorspelbaar. */
.neon.is-lit .neon-gloed{animation:gloed-adem 5.5s ease-in-out infinite}
.neon.is-lit .neon-gloed::after{animation:kern-adem 7.3s ease-in-out infinite}

/* de gloed volgt exact het aan/uit-patroon van de buis */
@keyframes gloed-ontsteken{
  0%,16%  {opacity:0}
  30%     {opacity:.26}
  40%     {opacity:.05}
  52%     {opacity:.38}
  /* Na de laatste hapering niet in één keer naar de rustglans springen, maar
     er vloeiend naartoe klimmen. De timing-function in dit keyframe geldt
     voor het interval dat hier begint en overschrijft daarmee de steps()
     van de animatie zelf, die alleen het flikkeren hoort te doen. Deze
     uitloop gaat alleen omhoog: schiet hij eerst voorbij de rustwaarde, dan
     ziet het oog dat als een felle flits aan het eind. */
  62%     {opacity:.12;animation-timing-function:ease-out}
  100%    {opacity:.45}
}
/* Daarna blijft hij leven. De dalwaarde is gelijk aan het eind van het
   ontsteken, zodat de wissel van is-igniting naar is-lit geen sprong geeft;
   vandaar loopt hij alleen omhoog. Geen zijwaartse verschuiving meer: een
   gloed die heen en weer schuift hoort bij een bewegende lichtbron, niet
   bij een buis aan de muur. */
@keyframes gloed-adem{
  0%,100%{opacity:.45;transform:scale(1)}
  50%    {opacity:.62;transform:scale(1.04)}
}
@keyframes kern-adem{
  0%,100%{opacity:.25;transform:scale(.98)}
  50%    {opacity:.5; transform:scale(1.04)}
}

/* De uitgangsstand: de buis staat uit. Niet pikzwart, want het verschil
   tussen deze stand en een flits is precies wat het ontsteken zwaar of licht
   maakt; een halfdonkere buis geeft een aanslag in plaats van een knal. */
.neon-buis{opacity:.3;filter:brightness(.65) saturate(.55)}
/* De letters ademen mee in hun eigen tempo, anders beweegt alleen de waas
   erachter en horen buis en gloed niet bij elkaar. */
.neon.is-lit .neon-buis{
  opacity:1;filter:drop-shadow(0 0 16px rgba(175,73,204,.45)) drop-shadow(0 0 44px rgba(175,73,204,.22));
  animation:buis-adem 6.7s ease-in-out infinite, buis-hapering 11s steps(1,end) infinite;
}
.neon.is-igniting .neon-buis{animation:ontsteken .34s steps(1,end) forwards}

/* Op de andere pagina's brandt dezelfde buis rustig door zonder animatie:
   het aanflikkeren hoort bij binnenkomen, niet bij elke klik in het menu. */
.neon--statisch .neon-buis{opacity:1;filter:drop-shadow(0 0 16px rgba(175,73,204,.45)) drop-shadow(0 0 44px rgba(175,73,204,.22))}
.neon--statisch .neon-gloed{opacity:.45}
.neon--statisch .neon-gloed::after{opacity:.25}

/* Twee haperingen in plaats van vijf, en geen enkele terug naar de
   uitgangsstand: een buis die aanslaat, geen stroboscoop. Het geheel duurt een
   derde seconde, dus het haperen zit in de eerste ~120 ms en de rest is de
   uitloop. Langer dan dit voelt niet als aanslaan maar als wachten. */
@keyframes ontsteken{
  0%,16%  {opacity:.3; filter:brightness(.65) saturate(.55)}
  30%     {opacity:.72;filter:drop-shadow(0 0 10px rgba(175,73,204,.3))}
  40%     {opacity:.38;filter:brightness(.7) saturate(.6)}
  52%     {opacity:.85;filter:drop-shadow(0 0 13px rgba(175,73,204,.38))}
  /* Zelfde uitloop als de gloed: van de laatste hapering vloeiend omhoog naar
     de rustglans, zonder er eerst overheen te schieten. Dit keyframe en het
     laatste hebben dezelfde twee filterfuncties in dezelfde volgorde, anders
     kan de browser er niet tussen interpoleren en springt hij alsnog. */
  62%     {opacity:.5;filter:drop-shadow(0 0 5px rgba(175,73,204,.16)) drop-shadow(0 0 14px rgba(175,73,204,.08));animation-timing-function:ease-out}
  100%    {opacity:1; filter:drop-shadow(0 0 16px rgba(175,73,204,.45)) drop-shadow(0 0 44px rgba(175,73,204,.22))}
}
/* begint op de eindstand van het ontsteken en gaat vandaar alleen omhoog */
@keyframes buis-adem{
  0%,100%{filter:drop-shadow(0 0 16px rgba(175,73,204,.45)) drop-shadow(0 0 44px rgba(175,73,204,.22))}
  50%    {filter:drop-shadow(0 0 24px rgba(175,73,204,.6)) drop-shadow(0 0 58px rgba(175,73,204,.3))}
}
/* Twee korte haperingen per elf seconden, zoals een buis die even aanslaat.
   Ondiep: het hoort op te vallen als je ernaar kijkt, niet als je iets anders
   leest. Dit animeert opacity en niet filter: twee animaties op dezelfde
   property overschrijven elkaar, waardoor het ademen zou verdwijnen. */
@keyframes buis-hapering{
  0%,94%  {opacity:1}
  94.4%   {opacity:.82}
  94.8%   {opacity:1}
  95.4%   {opacity:.92}
  96%,100%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .neon-buis{opacity:1;filter:drop-shadow(0 0 16px rgba(175,73,204,.45))}
  .neon-gloed{opacity:.45}
  .neon-gloed::after{opacity:.25}
  .neon.is-igniting .neon-buis,.neon.is-lit .neon-buis,
  .neon.is-igniting .neon-gloed,.neon.is-lit .neon-gloed,
  .neon.is-lit .neon-gloed::after{animation:none}
}

/* =========================================================
   HEADER
   ========================================================= */
/* De balk staat vast en verdwijnt nooit; alleen zijn maat verandert. Daarom
   staat er nergens een transform op .kop. Dat is geen toeval: een transform
   (net als filter, overflow, contain of will-change) maakt van .kop een
   containing block, en het mobiele menu erin staat op position:fixed. Zet ze
   hier dus niet alsnog neer.

   Om diezelfde reden wordt .kop ook niet geknipt: de schuine vorm is een
   aparte laag, .kop-vorm. Een clip-path op de header zelf zou het menu
   mee wegknippen. */
.kop{position:fixed;inset:var(--melding-h) 0 auto 0;z-index:100;background:transparent}
/* Hier stond een los tussenstuk van --kop-h hoog, dat de ruimte van de grote
   stand bezet hield. Dat gaf een gat: de balk krimpt bij het scrollen van
   --kop-h naar --kop-h-klein, maar de inhoud eronder schuift op dat moment
   niet mee, dus tussen de gekrompen balk en het eerste blok werd het witte
   tussenstuk zichtbaar totdat je er helemaal voorbij was gescrold.

   Het eerste blok begint nu bovenaan de pagina en loopt onder de balk door.
   De ruimte voor de balk zit als padding bínnen dat blok, en die padding is
   constant (--kop-h, niet --nu-h), dus er verspringt nog steeds niets op het
   moment dat de balk krimpt. Wat er tevoorschijn komt is het blok zelf: de
   hero-foto op de homepage, het gekleurde vlak op de binnenpagina's. */
main>:first-child{padding-top:calc(var(--melding-h) + var(--kop-h))}

/* De vorm hangt onder de balk uit; die overhang valt over de inhoud eronder.
   Diepste punt links, onder het logo (0 → h+schuin), oplopend naar rechts
   (100% → h). */
.kop-vorm{
  position:absolute;left:0;right:0;top:0;pointer-events:none;
  height:calc(var(--nu-h) + var(--nu-schuin));
  background:linear-gradient(97deg,var(--paars),var(--paars-licht));
  clip-path:polygon(0 0, 100% 0, 100% var(--nu-h),
                    0 calc(var(--nu-h) + var(--nu-schuin)));
  transition:height .32s cubic-bezier(.4,0,.2,1),clip-path .32s cubic-bezier(.4,0,.2,1);
}
/* Het witte vlak ligt 3px hoger dan de vorm erachter; wat er onderlangs
   uitsteekt is de accentlijn, evenwijdig aan de schuinte. Dat is meteen de
   scheiding tussen wit-op-wit zodra de balk over lichte inhoud zweeft.
   Een box-shadow kan hier niet: die wordt door de eigen clip-path geknipt. */
.kop-vorm::before{
  content:"";position:absolute;inset:0;background:var(--vlak);
  clip-path:polygon(0 0, 100% 0, 100% calc(var(--nu-h) - 3px),
                    0 calc(var(--nu-h) + var(--nu-schuin) - 3px));
  transition:clip-path .32s cubic-bezier(.4,0,.2,1);
}

.kop-in{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:1rem;height:var(--nu-h);
  transition:height .32s cubic-bezier(.4,0,.2,1);
}

/* --- Aankondigingen --------------------------------------------------
   Een balk boven de kopbalk, voor vakanties en aangepaste tijden. Staat ook
   vast, en de kopbalk hangt eronder (top:var(--melding-h) hierboven). Dat
   kan omdat --melding-h een gewone top is: geen transform, dus .kop blijft
   geen containing block voor het mobiele menu.

   z-index boven .kop, en dus ook boven het mobiele menu: wie het menu
   opent ziet de aankondiging nog staan, en de padding van .menu houdt er
   rekening mee.

   --paars-donker met wit haalt 10,46:1. De link is onderstreept, want hij
   heeft verder dezelfde kleur als de tekst. */
.meldingen{position:fixed;inset:0 0 auto 0;z-index:101;background:var(--paars-donker);color:#fff}
.meldingen[hidden],.melding[hidden]{display:none}
.melding + .melding{border-top:1px solid rgba(255,255,255,.2)}
.melding-in{display:flex;align-items:center;gap:.5rem;padding-block:.15rem}
.melding p{margin:0;flex:1;font-size:.9rem;font-weight:600;line-height:1.45;padding-block:.45rem}
.melding a{text-decoration:underline;text-underline-offset:.18em;white-space:nowrap}
.melding a:hover{text-decoration-thickness:2px}
.melding-sluit{
  flex:none;width:44px;height:44px;margin-right:-.6rem;display:grid;place-items:center;
  background:none;border:0;color:inherit;cursor:pointer;transition:background .2s;
}
.melding-sluit:hover{background:rgba(255,255,255,.14)}
.melding-sluit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.meldingen :focus-visible{outline-color:#fff;outline-offset:-3px}
/* Op een breed scherm gecentreerd. De sluitknop staat rechts, dus links
   evenveel ruimte, anders staat de tekst net uit het midden. */
@media (min-width:700px){
  .melding p{text-align:center;padding-left:calc(44px - .6rem + .5rem)}
}

/* Twee vormen op dezelfde plek links: bovenaan het volledige logo, na het
   scrollen alleen het MOVE-woordmerk. Ze vervagen over elkaar heen. */
.kop .merk{position:relative;flex:none;display:block;line-height:0}
.kop .merk .neon{width:clamp(150px,16vw,220px);transition:width .32s,opacity .25s}
.merk-klein{
  position:absolute;left:0;top:50%;translate:0 -50%;
  height:30px;width:auto;opacity:0;transition:opacity .25s;
}
body.kop-klein .kop .merk .neon{opacity:0;pointer-events:none}
body.kop-klein .merk-klein{opacity:1}

/* Beide standen blijven bestaan; alleen het vloeiende ertussen vervalt. */
@media (prefers-reduced-motion:reduce){
  .kop-vorm,.kop-vorm::before,.kop-in,.kop .merk .neon,.merk-klein{transition:none}
}

.menu{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0 auto 0 1rem;padding:0}
.menu a{
  display:block;font-weight:600;font-size:.92rem;padding:.55rem .5rem;
  color:var(--tekst-zacht);transition:color .2s,background .2s;white-space:nowrap;
}
.menu a:hover{color:var(--tekst-sterk);background:var(--sluier)}
/* de huidige pagina krijgt alleen kleur, geen vlak: dat viel te veel op */
.menu a[aria-current="page"]{color:var(--accent)}
.menu-cta{display:none}
/* De knop in het mobiele paneel is een <a> binnen .menu, en .menu a wint het
   qua specificiteit van .knop. Zonder deze twee regels krijgt die knop dus
   --tekst-zacht als tekstkleur: 1,1:1 op het paarse vlak, praktisch
   onleesbaar. Hetzelfde geldt voor de hover-stand. */
.menu .menu-cta a{color:var(--fg);background:var(--bg)}
.menu .menu-cta a:hover{color:var(--vlak);background:var(--tekst-sterk)}

/* --- Submenu ----------------------------------------------------------
   Basis is het brede scherm; de mediaregel op 1280px verderop zet hem weer
   plat. Het paneel hangt onder de balk uit en dat mag: het staat in .kop-in
   (z-index:1) en tekent daarmee vanzelf boven .kop-vorm.

   Wat hier NIET mag: overflow, contain of clip-path op .kop, .kop-in of
   .menu om het paneel "in te sluiten". .menu is op smal scherm het
   position:fixed paneel; zie de waarschuwing bij HEADER hierboven. */
.heeft-sub{position:relative}
.heeft-sub>a{padding-right:1.6rem}
/* Het pijltje is puur een teken dat er meer onder zit; er valt niets op te
   klikken. Het paneel opent bij de muis en bij focus, zie hieronder. */
.heeft-sub>a::after{
  content:"";position:absolute;right:.6rem;top:50%;margin-top:-5px;
  width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s;
}

.submenu{
  position:absolute;left:0;top:100%;z-index:5;min-width:13rem;
  list-style:none;margin:0;padding:.3rem 0;
  background:var(--vlak);border:1px solid var(--rand-sterk);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.32);
  opacity:0;visibility:hidden;translate:0 -.4rem;
  transition:opacity .18s,translate .18s,visibility 0s .18s;
}
.submenu a{font-size:.88rem;padding:.6rem .5rem}  /* .5rem: gelijk aan .menu a, zodat de kinderen precies onder de ouder uitlijnen */

/* Opent bij de muis, en bij focus voor wie met het toetsenbord door het menu
   tabt. Er is geen knop en geen javascript bij: er valt dus ook niets open te
   laten staan na een klik. Wegbewegen of wegtabben sluit vanzelf.

   visibility:hidden is dragend: dat houdt de links uit de tabvolgorde.
   Alleen opacity:0 laat een onzichtbaar submenu focusbaar. */
.heeft-sub:focus-within>.submenu{
  opacity:1;visibility:visible;translate:0;
  transition:opacity .18s,translate .18s,visibility 0s;
}
@media (hover:hover){
  .heeft-sub:hover>.submenu{
    opacity:1;visibility:visible;translate:0;
    transition:opacity .18s,translate .18s,visibility 0s;
  }
}
.heeft-sub:focus-within>a::after{transform:rotate(-135deg) translate(-2px,-2px)}
@media (hover:hover){.heeft-sub:hover>a::after{transform:rotate(-135deg) translate(-2px,-2px)}}
/* de sectie waar je in zit krijgt dezelfde kleur als aria-current hierboven */
.menu .in-sectie>a{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.submenu,.heeft-sub>a::after{transition:none}}

.kop-acties{display:flex;align-items:center;gap:.55rem;flex:none}
.sociaal-kop{display:flex;gap:.35rem}
/* 44px is het minimum voor een raakvlak; kleiner is op een telefoon
   nauwelijks te raken. */
.sociaal-kop a{
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--sluier);border:1px solid var(--rand);cursor:pointer;
  transition:background .2s,transform .2s,border-color .2s;
}
.sociaal-kop a:hover{background:var(--paars);border-color:var(--paars);transform:translateY(-2px)}
.sociaal-kop a:hover svg{fill:#fff}
.sociaal-kop svg{width:18px;height:18px;fill:var(--tekst);transition:fill .2s}
/* de CTA in de balk loopt mee met de icoonknoppen: even hoog, niet hoger */
.kop-acties .knop{height:44px;padding:0 1.15rem;font-size:.82rem;border-width:1px}

.burger{display:none;background:none;border:0;cursor:pointer;width:46px;height:46px;padding:.5rem;margin-left:auto}
.burger span{display:block;width:26px;height:2.5px;background:var(--tekst);margin:5.5px auto;transition:.25s;border-radius:2px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* =========================================================
   KNOPPEN
   ========================================================= */
.knop{
  --bg:var(--paars-diep);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:700;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.04em;
  padding:.9rem 1.7rem;border:2px solid var(--bg);cursor:pointer;white-space:nowrap;
  background:var(--bg);color:var(--fg);
  transition:background .2s,color .2s,border-color .2s;
}
.knop:hover{background:var(--tekst-sterk);color:var(--vlak);border-color:var(--tekst-sterk)}
/* Tweede trap onder de hoofdknop. Het moet lichter wegen dan .knop, en dat
   lukt niet met --paars: die is lichter én verzadigder dan --paars-diep en
   trekt op wit juist méér aandacht dan de knop waar hij onder hoort te staan.

   Hier stond een lilavlak met een donkerpaarse rand. Dat vlak trok samen met
   die harde omlijning juist meer aandacht dan de hoofdknop erboven. Nu een
   zacht vlak (--vlak-3) met paarse tekst en een rand in dezelfde kleur als het
   vlak: de knop is als vorm te zien zonder omlijning die schreeuwt.

   De tekst gaat op --paars-donker en niet op --paars-diep: op dit lichtpaarse
   vlak haalt --paars-diep 6,03:1 en --paars-donker 8,92:1.

   De hover is lila en niet het zwart van .knop:hover. Die zwarte sprong viel
   buiten de huisstijl; zo kleurt de knop op binnen hetzelfde paars (6,08:1). */
.knop--neon{--bg:var(--vlak-3);--fg:var(--paars-donker);border-color:var(--vlak-3)}
.knop--neon:hover{background:var(--lila);color:var(--paars-donker);border-color:var(--lila)}
.knop--leeg{--bg:transparent;--fg:var(--tekst);border-color:var(--rand-sterk)}
.knop--leeg:hover{background:var(--tekst-sterk);color:var(--vlak);border-color:var(--tekst-sterk)}
/* vierkante knoppen ogen zwaarder dan pillen: iets minder ruimte binnenin */
.knop--groot{padding:.85rem 1.75rem;font-size:.94rem}
.knop--breed{width:100%;padding-block:.95rem}

/* op een altijd-donker vlak moeten de knoppen naar wit toe */
/* Op de donkere hero verdwijnt --paars-diep in de foto. Daar draagt de
   knop de lichtere merkkleur; wit erop haalt daar 4,52:1. */
.op-nacht .knop{--bg:var(--paars)}
.op-nacht .knop:hover{background:#fff;color:var(--nacht);border-color:#fff}
.op-nacht .knop--leeg{--fg:#fff;border-color:rgba(255,255,255,.5)}
/* .knop zet display:inline-flex en wint het daarmee van het [hidden] van de
   browser zelf. Zonder deze regel ziet een bezoeker zonder JavaScript een knop
   die niets doet. */
.knop[hidden]{display:none}

/* Breekpunt op 1200 en niet op 1080: met het volledige logo in de balk
   past het horizontale menu daaronder niet meer naast het logo en de
   knoppen. */
@media (max-width:1280px){
  /* Op een telefoon is de grote stand bewust bescheidener: het logo blijft
     links, de burger rechts, en de schuinte schaalt mee. */
  :root{
    --kop-h:clamp(96px,26vw,132px);
    --kop-h-klein:58px;
    --kop-schuin:clamp(18px,6vw,32px);
    --kop-schuin-klein:14px;
  }
  .burger{display:block}
  .kop .merk .neon{width:clamp(112px,34vw,168px)}
  .merk-klein{height:24px}
  /* Het paneel dekt het hele scherm. Het begon eerst onder de schuine punt,
     maar dan blijft de schuinte zelf open staan en kijkt de pagina erachter
     — op de homepage de donkere hero — als een streep tussen de balk en het
     menu door. Schermvullend wit is er niet alleen netter, het is ook wat een
     menu hoort te zijn: alles eronder is even weg.

     De ruimte voor de balk zit als padding binnen het paneel, zodat het wit
     tot achter het logo doorloopt. */
  .menu{
    position:fixed;inset:0;z-index:0;
    margin:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--vlak);
    padding:calc(var(--melding-h) + var(--nu-h) + 1rem) var(--gutter) 2rem;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;transform:translateY(-1.25rem);visibility:hidden;
    transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility 0s .28s;
  }
  .menu.open{
    opacity:1;transform:none;visibility:visible;
    transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility 0s;
  }
  /* Het logo en de sluitknop blijven staan, dus die moeten bóven het paneel
     liggen. Het paneel zit in .kop-in, en dat is de stapelcontext: paneel op
     0, een wit vlak achter de logoregel op 1, logo en knop op 2. Dat witte
     vlak is nodig omdat een lange menulijst anders onder het logo door
     scrollt en er dwars doorheen te lezen is. */
  .kop .merk,.burger{z-index:2}
  .burger{position:relative}
  body.menu-open .kop-in::after{
    content:"";position:absolute;inset:0;z-index:1;background:var(--vlak);
  }
  @media (prefers-reduced-motion:reduce){
    .menu,.menu.open{transition:opacity .01s,visibility 0s}
    .menu{transform:none}
  }
  .menu a{padding:1rem .4rem;font-size:1.15rem;border-bottom:1px solid var(--grijs)}
  .menu-cta{display:block;margin-top:1.25rem;border-bottom:0}
  .menu-cta a{display:flex;border-bottom:0}
  /* Het uitklappen is een bureaublad-ding. Hier is de lijst één kolom en zijn
     de kinderen gewone regels: geen paneel, geen knop, geen pijltje. */
  .heeft-sub{position:static}
  .heeft-sub>a{padding-right:.4rem}
  .heeft-sub>a::after{display:none}
  /* visibility:inherit en niet visible. Het paneel staat dicht op
     opacity:0 én visibility:hidden, en een kind mag die hidden overrulen.
     Met visible bleef het submenu dus klikbaar terwijl niemand het zag:
     opacity maakt iets onzichtbaar, maar het is visibility die bepaalt of
     er nog kliks op landen. Dat gaf twee onzichtbare stroken over de volle
     breedte van een telefoonscherm die je naar /over/ en /huisregels/
     stuurden. Met inherit volgt het submenu gewoon het paneel. */
  .submenu{
    position:static;opacity:1;visibility:inherit;translate:none;transition:none;
    min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none;
  }
  .submenu a{padding:1rem .4rem;font-size:1.15rem}
  /* "Over mij" wijst naar dezelfde pagina als "Over MOVE"; hier staan ze
     onder elkaar en dan blijft alleen het kind over. Zo krijgt de telefoon
     precies twee losse regels: Over mij en Huisregels. */
  .sub-ouder.dubbel{display:none}
  .kop-acties{display:none}
  .kop-in{gap:.5rem}
  .burger{margin-left:auto}
}

/* =========================================================
   HERO (homepage) — altijd donker, ongeacht de rest
   Het logo staat nu in de kopbalk, niet meer hier; de hero is
   daardoor een stuk korter en de h1 draagt hem alleen.
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--nacht)}
.hero-foto{position:absolute;inset:0;z-index:0}
/* De foto is breder dan de hero hoog is, dus cover snijdt boven en onder weg.
   Het percentage bepaalt de verdeling: hoger betekent dat de foto omhoog
   schuift en er onderin meer zichtbaar wordt (de benen van de dansers).
   Boven zit de lichtbrug, en die moet heel blijven; daarom niet verder dan dit. */
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.7) 45%,var(--nacht) 100%);
}
/* --hero-lucht is de halve ruimte om de tekst heen. Ruim bemeten: de hero is zo
   hoog als zijn inhoud, dus dit is wat de foto groter in beeld zet en de
   sociaalbalk eronder wegduwt.

   Boven komt er een kwart schuinte bij en onder gaat diezelfde kwart eraf. Dat
   is precies genoeg om de tekst in het midden van de fóto te zetten in plaats
   van in het midden van de sectie: de kopbalk hangt er met zijn schuinte
   overheen, dus de foto begint gemiddeld een halve schuinte lager dan het blok
   zelf. Zonder die correctie staat alles net te hoog.

   --hero-omhoog tilt het blok daarna als geheel een tikje boven dat midden:
   optisch gecentreerd in plaats van rekenkundig. Beide correcties tellen op
   tot nul, dus de hero houdt zijn hoogte. */
.hero-in{
  --hero-lucht:clamp(3.75rem,9.5vw,7rem);
  --hero-omhoog:clamp(.5rem,1.5vw,1.25rem);
  position:relative;z-index:2;text-align:center;
  padding-block:calc(var(--hero-lucht) + var(--kop-schuin) / 4 - var(--hero-omhoog))
                calc(var(--hero-lucht) - var(--kop-schuin) / 4 + var(--hero-omhoog));
}
.hero h1{
  font-size:clamp(2.15rem,5.6vw,3.8rem);font-weight:500;color:#fff;
  max-width:18ch;margin:0 auto;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--paars-licht);text-shadow:0 0 22px rgba(175,73,204,.65)}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2rem}
.hero-info{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;
  margin-top:2.25rem;color:rgba(246,236,251,.8);font-size:.9rem;
}
.hero-info span{display:inline-flex;align-items:center;gap:.5ch}
.hero-info svg{width:15px;height:15px;fill:var(--paars-licht);flex:none}

/* kop van een subpagina
   Het blok draagt het merkverloop. 97deg is dezelfde hoek als .kop-vorm, zodat
   het blok en de schuinte van de balk dezelfde kant op lopen.

   Het paar is --balk-donker naar --balk-licht, twee tinten paars. Het haalt
   10,46:1 en op zijn slechtste punt, de lichte kant, nog 5,57:1. Vol wit dus
   en geen doorzichtig wit: rgba(255,255,255,.88) zakt daar naar 4,59:1.

   Het lichte paar --paars-licht → --paars kan hier niet: daar past alleen
   donkere tekst op (wit haalt op --paars-licht 2,61:1), en dat lichte vlak
   met zwarte letters bleek in de praktijk niet wat we wilden.

   De cirkel die hier stond is weg: die was bedoeld om een bijna wit vlak wat
   kleur te geven en is op een gekleurd vlak niet meer te zien. */
.pagina-kop{
  position:relative;overflow:hidden;border-bottom:0;
  background:linear-gradient(97deg,var(--balk-donker),var(--balk-licht));
}
/* Op elke pagina even hoog, ook al is de ene inleiding twee keer zo lang als de
   andere: het blok houdt de hoogte van de langste. Zonder dit springt de balk
   per pagina een tekstregel op en neer en dat zie je zodra je doorklikt.

   De drie maten zijn gemeten aan de langste kop (workshops) op het smalste punt
   van elke sprong — daar wrapt de tekst het vaakst, dus daar is de balk het
   hoogst. Komt er ooit een langere inleiding bij, dan moeten ze opnieuw langs.
   De inhoud staat gecentreerd in die ruimte, anders blijft een korte kop
   bovenin hangen met een leeg vlak eronder. */
.pagina-kop .wrap{
  position:relative;z-index:1;padding-block:clamp(2.75rem,7vw,4.5rem);
  display:flex;flex-direction:column;justify-content:center;
  min-height:330px;
}
@media (max-width:860px){.pagina-kop .wrap{min-height:295px}}
.pagina-kop h1{font-size:clamp(2.2rem,6vw,3.8rem);color:#fff;text-wrap:balance}
.pagina-kop p{max-width:56ch;color:#fff;margin:1rem 0 0;font-size:1.08rem}
.pagina-kop .opschrift{color:#fff}
/* Op een telefoon nam het blok bijna het halve scherm in. Minder lucht en
   kleinere letters, zodat de inhoud eronder al in beeld komt. De hoogtes zijn
   weer gemeten aan de langste kop, hier inschrijven en proefles. */
@media (max-width:520px){
  .pagina-kop .wrap{padding-block:1.75rem;min-height:240px}
  .pagina-kop h1{font-size:clamp(1.7rem,7.5vw,2.1rem)}
  .pagina-kop p{margin-top:.6rem;font-size:.95rem;line-height:1.5}
}
@media (max-width:359px){.pagina-kop .wrap{min-height:275px}}

/* =========================================================
   SOCIALS
   ========================================================= */
/* Hetzelfde paar als .pagina-kop, zodat de twee gekleurde balken op een pagina
   bij elkaar horen. Hier op 90deg en niet op 97deg: dit blok is veel lager, en
   een schuin verloop over die hoogte laat de linkerkant merkbaar lichter
   beginnen dan de rechterkant eindigt. */
.sociaal-balk{background:linear-gradient(90deg,var(--balk-donker),var(--balk-licht));padding:clamp(1.4rem,3.5vw,2rem) 0}
.sociaal-balk .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem clamp(1.5rem,4vw,3rem);text-align:center}
.sociaal-balk p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2.6vw,1.7rem);color:#fff}
.sociaal-knoppen{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.sociaal-knoppen a{
  display:inline-flex;align-items:center;gap:.6ch;padding:.7rem 1.25rem;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);
  color:#fff;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;
  transition:background .2s,color .2s;
}
.sociaal-knoppen a:hover{background:#fff;color:var(--accent)}
.sociaal-knoppen svg{width:18px;height:18px;fill:currentColor}

/* =========================================================
   TEKST EN BEELD
   ========================================================= */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.duo .beeld{position:relative;overflow:hidden;aspect-ratio:4/5}
.duo .beeld img{width:100%;height:100%;object-fit:cover}
.duo .beeld::after{content:"";position:absolute;inset:0;border:1px solid var(--rand-sterk)}
/* Hetzelfde lichtpaarse vlak als achter de leskaarten. Ook hier een box-shadow: dan is
   er geen extra wikkel-element nodig en kan het vlak niet los gaan schuiven.
   De verspringing valt in de kolomtussenruimte, die altijd ruimer is. */
.beeld--vlak{box-shadow:clamp(.75rem,1.4vw,1.15rem) clamp(.75rem,1.4vw,1.15rem) 0 var(--paars-licht)}

/* Staat er een lange tekst naast één foto, dan loopt die kolom ver onder het
   beeld door en hangt de foto met align-items:center in een gat halverwege.
   Hier beginnen ze samen bovenaan. */
.duo--mee{align-items:start}

.inleiding{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.15;letter-spacing:-.02em;margin:.3rem 0 1.2rem;color:var(--tekst-sterk)}
.inleiding b{color:var(--accent);font-weight:500}
.lopend p{color:var(--tekst-zacht);margin:0 0 1.05rem}

/* privacybeleid: koppen met lopende tekst eronder */
.beleid + .beleid{margin-top:2.25rem}
.beleid h2{font-size:clamp(1.15rem,2.4vw,1.45rem);margin-bottom:.7rem}
.lopend p:last-child{margin-bottom:0}
.lopend strong{color:var(--tekst-sterk);font-weight:700}
.lopend a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.sectie-kop{max-width:640px;margin-bottom:clamp(2rem,4.5vw,3.25rem)}
.sectie-kop h2{font-size:clamp(2.1rem,5.5vw,3.6rem);text-wrap:balance}
.sectie-kop p{color:var(--tekst-zacht);margin:1rem 0 0}
.sectie-kop.midden{margin-inline:auto;text-align:center}

/* =========================================================
   DANSAANBOD
   ========================================================= */
/* Elke foto ligt op een eigen lichtpaars vlak, een maat naar rechtsonder
   verschoven. Dat is een box-shadow zonder vervaging: die wordt buiten de
   kaart getekend en dus niet weggeknipt door de overflow:hidden hieronder,
   zodat er geen extra wikkel-element per kaart nodig is.
   De tussenruimte is ruimer dan de verspringing, anders raakt het vlak van
   de ene kaart de volgende en wordt het weer één doorlopende band. */
.aanbod{
  --uit:clamp(.75rem,1.4vw,1.15rem);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3.2vw,2.6rem);margin-bottom:var(--uit);
}
@media (max-width:900px){.aanbod{grid-template-columns:1fr}}
.les{
  position:relative;overflow:hidden;min-height:400px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--vlak-2);
  box-shadow:var(--uit,1rem) var(--uit,1rem) 0 var(--paars-licht);
}
/* Geen rand en geen verschuiving bij hover: het gekleurde vlak is een box-shadow
   en beweegt dus altijd mee met een transform op de kaart. Alleen de foto
   zoomt in, zodat de vlakken bij het aanwijzen stil blijven liggen. */
.les img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.les:hover img{transform:scale(1.06)}
.les::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.95) 100%)}
.les-tekst{position:relative;z-index:2;padding:1.4rem}
.les h3{font-size:1.65rem;margin:0 0 .45rem;color:#fff}
.les p{font-size:.92rem;color:rgba(246,236,251,.82);margin:0}

/* uitgebreide rijen op de dansaanbod-pagina */
.stijl-rij{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:0;align-items:stretch;
  background:var(--vlak-2);border:1px solid var(--rand);margin-bottom:1.5rem;overflow:hidden;
}
.stijl-rij:nth-child(even){grid-template-columns:1.15fr .85fr}
.stijl-rij:nth-child(even) .beeld{order:2}
.stijl-rij .beeld{position:relative;min-height:320px}
.stijl-rij .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stijl-rij .inhoud{padding:clamp(1.5rem,3.5vw,2.75rem);align-self:center}
.stijl-rij h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.5rem}
.stijl-rij p{color:var(--tekst-zacht);margin:0}
/* Staat er meer dan één alinea in een rij, dan zet .lopend eromheen de witruimte
   terug. Die selector staat hierboven en verliest het anders van .stijl-rij p. */
.stijl-rij .lopend p{margin:0 0 1.05rem}
.stijl-rij .lopend p:last-child{margin-bottom:0}
@media (max-width:820px){
  .stijl-rij,.stijl-rij:nth-child(even){grid-template-columns:1fr}
  .stijl-rij:nth-child(even) .beeld{order:0}
  .stijl-rij .beeld{min-height:240px}
}

/* =========================================================
   LESROOSTER
   ========================================================= */
.rooster{background:var(--vlak-2);border:1px solid var(--rand);overflow:hidden;max-width:820px;margin-inline:auto}
.rooster + .rooster{margin-top:1.5rem}
.rooster-kop{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;
  padding:clamp(1.3rem,3vw,1.9rem);border-bottom:1px solid var(--vlak-3);
  background:linear-gradient(90deg,rgba(175,73,204,.16),transparent);
}
.rooster-kop h3{font-size:clamp(1.4rem,3vw,1.9rem)}
.rooster-kop span{color:var(--accent);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
.blok{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:1.05rem clamp(1.3rem,3vw,1.9rem);border-bottom:1px solid var(--vlak-3);transition:background .2s;
}
.blok:last-child{border-bottom:0}
.blok:hover{background:var(--sluier)}
/* tabular-nums: in Outfit is een 1 half zo breed als een 0, waardoor 18:45-19:45
   smaller is dan 15:00-16:00 en de lesnaam erachter per regel verspringt. */
.blok .tijd{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.blok .naam{font-weight:700;color:var(--tekst-sterk)}
.blok .wie{
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;background:var(--sluier);
  border:1px solid var(--rand);color:var(--tekst-zacht);white-space:nowrap;
}
.blok .wie.kids{background:rgba(175,73,204,.18);border-color:transparent;color:var(--accent)}
.blok .wie.teens{background:rgba(175,73,204,.12);border-color:transparent;color:var(--paars-diep)}

.notitie{
  max-width:820px;margin:1.5rem auto 0;padding:1.1rem 1.3rem;
  background:var(--vlak-2);border:1px dashed var(--rand-sterk);color:var(--tekst-zacht);font-size:.95rem;
}
.notitie strong{color:var(--tekst-sterk)}

.wistje{
  max-width:820px;margin:1.5rem auto 0;color:var(--tekst-zacht);
  font-size:.95rem;line-height:1.7;
}
.wistje strong{color:var(--tekst-sterk)}
.wistje a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}

/* =========================================================
   TARIEVEN
   ========================================================= */
.prijzen{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:820px;margin-inline:auto}
@media (max-width:640px){.prijzen{grid-template-columns:1fr}}
.prijs{background:var(--vlak-2);border:1px solid var(--rand);padding:2rem;text-align:center}
.prijs.uitgelicht{background:linear-gradient(160deg,#2A0F31,#150618);border-color:var(--rand-sterk);color:var(--op-nacht)}
.prijs .label{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--accent)}
.prijs.uitgelicht .label{color:var(--paars-licht)}
.prijs .bedrag{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;margin:.6rem 0 .3rem;color:var(--tekst-sterk)}
.prijs.uitgelicht .bedrag{color:#fff}
.prijs .per{color:var(--tekst-zacht);font-size:.95rem}
.prijs.uitgelicht .per{color:rgba(246,236,251,.72)}

.feiten{max-width:820px;margin:1.5rem auto 0;list-style:none;padding:0;display:grid;gap:.7rem}
.feiten li{display:flex;gap:.8rem;align-items:flex-start;background:var(--vlak-2);border:1px solid var(--rand);padding:.9rem 1.1rem;color:var(--tekst-zacht)}
.feiten li::before{content:"";flex:none;width:8px;height:8px;margin-top:.6rem;border-radius:50%;background:var(--paars)}

/* =========================================================
   UITKLAPPER (huisregels)
   ========================================================= */
.uitklap{max-width:820px;margin-inline:auto;border-top:1px solid var(--rand)}
.acc-item{border-bottom:1px solid var(--rand)}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--tekst-sterk);
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2.2vw,1.25rem);
  padding:1.15rem .25rem;transition:color .2s;
}
.acc-head:hover{color:var(--accent)}
.acc-head::after{
  content:"";flex:none;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;
}
.acc-item.open .acc-head::after{transform:rotate(-135deg) translate(-3px,-3px)}
.acc-body{display:none;padding:0 .25rem 1.3rem;color:var(--tekst-zacht)}
.acc-item.open .acc-body{display:block}
.acc-body p{margin:0}

/* =========================================================
   LEES VERDER — lange tekst met een staartstuk
   =========================================================
   De html bevat alle alinea's, zichtbaar. Pas move.js zet .is-gestapeld en
   klapt het staartstuk dicht; zonder javascript leest de bezoeker dus alles
   achter elkaar en blijven de knoppen verborgen (hidden, samen met
   .knop[hidden] hierboven). Alle regels hieronder hangen daarom aan
   .is-gestapeld: wat de browser zonder javascript ziet, is gewone lopende
   tekst.

   Eén vak, met bladen erin. Het eerste blad staat er; de knop haalt het
   volgende tevoorschijn en dat vervángt wat er stond. De pagina wordt dus niet
   langer, hoe lang het verhaal ook is.

   Alleen het blad dat aan de beurt is staat in de flow, de rest ligt er
   absoluut overheen. Eén hoogte om te animeren dus — die van het vak — en die
   zet move.js in px, want een hoogte van of naar auto animeert niet. */
.lees-verder.is-gestapeld .lv-vak{
  position:relative;overflow:hidden;
  transition:height .4s cubic-bezier(.4,0,.2,1);
}
.lees-verder.is-gestapeld .lv-blad{
  position:absolute;left:0;right:0;top:0;
  opacity:0;translate:0 1.4rem;visibility:hidden;
  transition:opacity .34s,translate .34s,visibility 0s .34s;
}
.lees-verder.is-gestapeld .lv-blad.is-nu{
  position:static;opacity:1;translate:0 0;visibility:visible;
  transition:opacity .34s .08s,translate .34s .08s,visibility 0s;
}
/* De knoprij is een <p> en zit meestal in .lopend, en die selector (.lopend p)
   wint het van een losse klasse. Vandaar twee klassen diep, anders krijgt de
   knop helemaal geen ruimte en plakt hij tegen de alinea erboven.
   Onder het blok mag meer lucht dan erboven: de knop hoort bij de tekst,
   wat erna komt is een volgend onderwerp. */
.lees-verder{margin-bottom:2.2rem}
.lees-verder .lv-knoprij{
  margin:1.4rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;
}
/* Zonder javascript staan alle knoppen op hidden en blijft er een lege rij met
   ondermarge midden in de tekst staan. */
.lees-verder:not(.is-gestapeld) .lv-knoprij{display:none}
/* Dezelfde vormtaal als .acc-head hierboven: dit is navigatie in de tekst en
   geen actie. Een hoofdletterknop midden in lopende tekst roept harder dan de
   tekst eromheen en dat klopt hier niet.

   "Lees meer" is de knop die het verhaal verder brengt en staat in de
   accentkleur; "Terug" is de weg terug en mag stiller. */
.lv-knop,.lv-nav{
  display:inline-flex;align-items:center;gap:.7ch;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font:inherit;font-family:var(--display);font-weight:600;
  transition:color .2s;
}
.lv-knop[hidden],.lv-nav[hidden]{display:none}
.lv-knop{font-size:1.02rem;color:var(--accent)}
.lv-knop:hover{color:var(--tekst-sterk)}
.lv-nav{font-size:.95rem;color:var(--tekst-zacht)}
.lv-nav:hover{color:var(--accent)}
/* Het pijltje wijst vooruit op de knop en terug op de navigatie, en staat aan
   de kant waar het heen wijst. */
.lv-knop::after,.lv-nav::before{
  content:"";flex:none;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
}
.lv-knop::after{transform:rotate(-45deg) translate(-1px,-1px)}
.lv-nav::before{transform:rotate(135deg) translate(-1px,-1px)}

@media (prefers-reduced-motion:reduce){
  .lees-verder.is-gestapeld .lv-vak,
  .lees-verder.is-gestapeld .lv-blad{transition:none}
}

/* =========================================================
   UITGELICHT BLOK (workshops op de homepage)
   ========================================================= */
.uitgelicht-blok{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;
  align-items:stretch;background:var(--vlak-2);border:1px solid var(--rand);
}
@media (max-width:820px){.uitgelicht-blok{grid-template-columns:1fr}}
.uitgelicht-blok .tekst{padding:clamp(1.75rem,4vw,3.25rem);align-self:center}
.uitgelicht-blok h2{font-size:clamp(1.9rem,4.5vw,2.9rem);margin-bottom:.9rem}
.uitgelicht-blok p{color:var(--tekst-zacht);margin:0 0 1.5rem}
.uitgelicht-blok .beeld{position:relative;min-height:340px}
.uitgelicht-blok .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.lijstje{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.5rem}
.lijstje li{display:flex;gap:.7rem;align-items:flex-start;color:var(--tekst-zacht);font-size:.95rem}
.lijstje li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55rem;border-radius:50%;background:var(--paars)}

/* =========================================================
   OPROEP — rustig paneel, in dezelfde vormtaal als .prijs en .formulier
   ========================================================= */
/* Dit blok stond op zeven plekken als donkerpaarse slab met een felle gloed.
   Het viel daarmee buiten de rest van de pagina, en anders dan bij de hero en de
   voettekst was daar geen reden voor: hier staat geen neonlogo op. Nu draagt de
   knop de aandacht en niet het vlak — één fel element op een rustig paneel leest
   sterker dan een paneel dat in zijn geheel roept. */
.oproep{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(2.5rem,6.5vw,5rem) clamp(1.25rem,4vw,3rem);
  background:var(--vlak-2);
  border:1px solid var(--rand);
}
.oproep h2{font-size:clamp(2rem,5.5vw,3.6rem);margin-bottom:.8rem}
.oproep h2 em{font-style:normal;color:var(--accent)}
.oproep p{max-width:48ch;margin:0 auto 2rem;color:var(--tekst-zacht);font-size:1.08rem}
.oproep .knoppen{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

/* =========================================================
   FORMULIEREN
   ========================================================= */
.formulier{background:var(--vlak-2);border:1px solid var(--rand);padding:clamp(1.5rem,4vw,2.5rem);max-width:680px}
.veld{margin-bottom:1.15rem}
.veld label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.4rem;color:var(--tekst-sterk)}
.veld .verplicht{color:var(--paars-diep)}
.veld input,.veld select,.veld textarea{
  width:100%;font:inherit;font-size:1rem;padding:.8rem .95rem;
  border:1.5px solid var(--rand);background:var(--vlak);color:var(--tekst);
  transition:border-color .2s,box-shadow .2s;
}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{outline:none;border-color:var(--paars);box-shadow:0 0 0 3px rgba(175,73,204,.2)}
.veld textarea{min-height:130px;resize:vertical}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:540px){.veld-rij{grid-template-columns:1fr}}
.vink{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--tekst-zacht);margin-bottom:1rem}
.vink input{width:auto;margin-top:.3rem;accent-color:var(--paars);flex:none}
.vink label{font-weight:500;margin:0;color:var(--tekst-zacht)}
.vink a{color:var(--accent);text-decoration:underline}
.formulier-notitie{font-size:.85rem;color:var(--tekst-zacht);margin-top:.6rem}
/* Niet display:none: dan staat het vak niet in de toegankelijkheidsboom en
   leest een screenreader de melding soms niet voor. Leeg is het gewoon 0 hoog. */
.formulier-melding{margin-top:1rem;font-weight:600}
.formulier-melding.ok,.formulier-melding.fout{padding:1rem 1.15rem}
.formulier-melding.ok{background:rgba(52,199,123,.14);color:#34C77B;border:1px solid rgba(52,199,123,.4)}
.formulier-melding.fout{background:rgba(179,38,30,.08);color:#B3261E;border:1px solid rgba(179,38,30,.35)}
.formulier .knop:disabled{opacity:.6;cursor:progress}
/* het verborgen spamveld (zie FORMULIER_VALKUIL in bouw.py) */
.valkuil{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* contactkolom */
.contact-indeling{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:860px){.contact-indeling{grid-template-columns:1fr}}
.contact-lijst{display:grid;gap:.9rem}
.contact-regel{display:flex;gap:.9rem;align-items:flex-start;background:var(--vlak-2);border:1px solid var(--rand);padding:1rem 1.15rem}
.contact-regel .ico{flex:none;width:38px;height:38px;display:grid;place-items:center;background:var(--sluier);border-radius:50%}
.contact-regel .ico svg{width:18px;height:18px;fill:var(--accent)}
.contact-regel b{display:block;font-size:.95rem;color:var(--tekst-sterk)}
.contact-regel span,.contact-regel a{color:var(--tekst-zacht);font-size:.92rem}
.contact-regel a:hover{color:var(--accent)}
.kaart-groot{margin-top:1rem;border:1px solid var(--rand);overflow:hidden;line-height:0}
.kaart-groot iframe{width:100%;height:320px;border:0}


/* =========================================================
   FOOTER — altijd donker: hier staat het neonlogo op
   ========================================================= */
.voet{background:var(--zwart);color:var(--op-nacht);border-top:1px solid rgba(175,73,204,.25)}
.voet-in{padding-block:clamp(2.75rem,6vw,4rem)}
.voet-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:clamp(2rem,5vw,3.5rem)}
@media (max-width:860px){.voet-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.voet-grid{grid-template-columns:1fr}}
.voet .merk-groot{display:block;max-width:280px;margin-bottom:1.25rem}
.voet .merk-groot img{width:100%}
.voet p{color:rgba(246,236,251,.68);margin:0 0 1.25rem;font-size:.95rem}
.voet h2{font-family:var(--body);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--paars-licht);margin:0 0 1.1rem}
.voet-links{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.voet-links a{color:rgba(246,236,251,.82);font-size:.95rem;transition:color .2s}
.voet-links a:hover{color:var(--paars-licht)}
.voet address{font-style:normal;color:rgba(246,236,251,.68);font-size:.95rem;line-height:1.75}
.voet address b{display:block;color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin:1.15rem 0 .3rem}
.voet address a{color:rgba(246,236,251,.82);border-bottom:1px solid rgba(175,73,204,.4)}
.voet address a:hover{color:var(--paars-licht)}
.voet-kaart{margin-top:1.1rem;border:1px solid rgba(175,73,204,.3);overflow:hidden;line-height:0}
.voet-kaart iframe{width:100%;height:190px;border:0;filter:grayscale(.35) contrast(1.05)}

.sociaal-voet{display:flex;gap:.7rem;margin-bottom:1.5rem}
.sociaal-voet a{
  width:48px;height:48px;display:grid;place-items:center;
  background:rgba(175,73,204,.14);border:1px solid rgba(175,73,204,.35);
  transition:background .2s,transform .2s;
}
.sociaal-voet a:hover{background:var(--paars);transform:translateY(-3px)}
.sociaal-voet svg{width:22px;height:22px;fill:#fff}

.voet-onder{
  border-top:1px solid rgba(255,255,255,.09);padding-block:1.3rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;
}
.voet-onder p,.voet-onder a{color:rgba(246,236,251,.42);font-size:.84rem;margin:0}
.voet-onder a:hover{color:var(--paars-licht)}

/* =========================================================
   OVERIG
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.wa{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;width:56px;height:56px;
  background:#25D366;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.7);
  transition:transform .2s;
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;fill:#fff}