/* Licht geraamte op basis van de PULS-dansschooltemplate (public/previews/dansschool/concept-1).
   Paletbron: order MS-MUSB69QC + brandProfile (groen, roze, beige); wit, gebroken wit en antraciet
   volgens de ontwerpuitzondering van de eigenaar, 4 oktober 2026 (docs/dance-a-lot/BRANDBOOK.md). */
:root{
  /* Twee weergaven uit dezelfde tokens: Studio (licht) en Podium (donker). Kleuren zijn de drie klantkleuren
     plus de neutrale basis uit de eigenaaruitzondering van 4 oktober; #262828 is de enige afgeleide tint
     (antraciet, opgelicht) voor kaarten in donker. Zie docs/dance-a-lot/DESIGN-SYSTEM.md §2. */
  color-scheme:light dark;
  --wit:#ffffff; --gebroken:#f7f7f5; --antraciet:#191b1b; --antraciet-op:#262828;
  --groen:#00413d; --roze:#f0c4d0; --beige:#dcd8d4;
  --bg:light-dark(var(--wit),var(--antraciet)); --bg-2:light-dark(var(--gebroken),var(--antraciet-op)); --kaart:light-dark(var(--wit),var(--antraciet-op));
  --lijn:light-dark(rgba(25,27,27,.13),rgba(247,247,245,.14)); --lijn-sterk:light-dark(rgba(25,27,27,.3),rgba(247,247,245,.32));
  --ink:light-dark(var(--antraciet),var(--gebroken)); --dof:light-dark(#4e5150,#a9aaa9); --dof-2:light-dark(#6d6f6e,#8f9190);
  /* accent: groen bij daglicht, roze op het podium; tekst erop wisselt mee */
  --accent:light-dark(var(--groen),var(--roze)); --op-accent:light-dark(var(--wit),var(--antraciet));
  --glas:light-dark(rgba(255,255,255,.88),rgba(25,27,27,.86)); --glas-dicht:light-dark(rgba(255,255,255,.95),rgba(25,27,27,.94));
  --schaduw:light-dark(rgba(25,27,27,.12),rgba(0,0,0,.5)); --schaduw-kaart:light-dark(transparent,rgba(0,0,0,.35)); --rand-licht:light-dark(transparent,rgba(247,247,245,.07));
  --spot:light-dark(transparent,rgba(240,196,208,.09));
  --display:"Big Shoulders Display",sans-serif; --tekst:"Instrument Sans",sans-serif;
  --r:18px; --max:1180px;
  /* cookiemelding (templates/site-modules/privacy-cookies): alleen goedgekeurde kleuren */
  --ms-consent-accent:var(--accent); --ms-consent-on-accent:var(--op-accent); --ms-consent-bg:var(--kaart); --ms-consent-ink:var(--ink);
  --ms-consent-muted:var(--dof); --ms-consent-line:var(--lijn-sterk); --ms-consent-radius:18px;
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
/* het groene logo is op donker niet leesbaar: tot de klant een lichte variant levert, kleurt het bestand via een filter gebroken wit */
:root[data-theme="dark"] .merk img{filter:brightness(0) invert(1) brightness(.97)}
/* op het podium: de lichte kaartafbeelding iets gedempt, en de tekst op beeldplekken leesbaar op de getinte vlakken */
:root[data-theme="dark"] .route-kaart>img{filter:brightness(.88) saturate(.9)}
:root[data-theme="dark"] .slot.leeg::after{color:var(--ink);opacity:.72}
:root[data-theme="dark"] .kies{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23f0c4d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* diepte op het podium: een dun lichtrandje bovenaan en een zachte slagschaduw; bij daglicht zijn beide onzichtbaar */
.stijl-kaart,.uitklap,.les-detail,.tarief,.docent,.nieuws-kaart,.p-kaart,.dag-kort,.waarde,.formulier,.stappen,.wacht,.route-kaart{box-shadow:inset 0 1px 0 var(--rand-licht),0 18px 40px var(--schaduw-kaart)}
.les,.stijl-rij,.d-chips span,.ld-tag{box-shadow:inset 0 1px 0 var(--rand-licht)}
/* weergaveschakelaar: twee knoppen met naam, geen icoon zonder tekst */
.thema{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--lijn);border-radius:999px;background:var(--bg-2)}
.thema button{font:inherit;font-size:.76rem;font-weight:700;letter-spacing:.02em;padding:6px 12px;min-height:32px;border:0;border-radius:999px;background:transparent;color:var(--dof);cursor:pointer}
.thema button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.thema button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drawer .thema{margin:18px 0 0;align-self:flex-start}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--tekst);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:.01em}
h2{font-size:clamp(2.2rem,5.2vw,3.6rem);font-weight:800}
.kicker{font-family:var(--tekst);font-size:.8rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px}
.sectie{padding:clamp(64px,10vw,120px) 0}
.intro-p{color:var(--dof);max-width:56ch;margin-top:16px}

/* interne balk */
.intern{background:var(--antraciet);color:var(--gebroken);font-size:.82rem;padding:8px 0;text-align:center}

.intern{display:flex;gap:8px 16px;justify-content:center;align-items:center;flex-wrap:wrap}
.intern button{font-size:.78rem;font-weight:700;border:1px solid rgba(247,247,245,.55);border-radius:999px;padding:4px 14px;color:var(--gebroken);min-height:30px}
.intern button[aria-pressed="true"]{background:var(--roze);border-color:var(--roze);color:var(--groen)}
.vb{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--roze);color:var(--groen);padding:3px 9px;border-radius:6px}
body.mock-uit [data-mock]{display:none!important}
body:not(.mock-uit) [data-echt]{display:none}

/* teldivider 5·6·7·8, zonder bolletjes */
.teldiv{display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 0}
.teldiv .lijn{height:1px;flex:0 1 180px;background:linear-gradient(90deg,transparent,var(--lijn))}
.teldiv .lijn:last-child{background:linear-gradient(90deg,var(--lijn),transparent)}
.teldiv .tel{display:flex;gap:18px}
.teldiv .tel span{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--dof-2)}
.teldiv .tel span:nth-child(4){color:var(--accent)}

/* header */
.top{position:sticky;top:0;z-index:60;background:var(--glas);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--lijn);transition:opacity .25s ease,transform .25s ease}
body.drawer-open .top{opacity:0;pointer-events:none;transform:translateY(-8px)}
.topbalk{display:flex;align-items:center;gap:26px;min-height:76px}
.merk{display:flex;align-items:center;text-decoration:none}
.merk img{height:52px;width:auto}
.hoofdnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.hoofdnav>a,.hoofdnav>button{display:inline-flex;align-items:center;gap:7px;padding:12px 15px;min-height:44px;font-weight:600;font-size:.95rem;color:var(--dof);text-decoration:none;border-radius:10px}
.hoofdnav>a:hover,.hoofdnav>button:hover{color:var(--ink)}
.hoofdnav .pijl{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.hoofdnav button[aria-expanded="true"] .pijl{transform:rotate(-135deg) translateY(-1px)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--op-accent);font-weight:700;padding:13px 22px;min-height:48px;border-radius:999px;text-decoration:none;border:1.5px solid var(--accent);transition:background .2s,transform .2s,border-color .2s}
.cta:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.cta.spook{background:transparent;color:var(--ink);border-color:var(--lijn-sterk)}
.cta.spook:hover{background:var(--bg-2);border-color:var(--ink)}
.top .cta{margin-left:6px}

/* megamenu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--lijn);box-shadow:0 30px 60px var(--schaduw);opacity:0;visibility:hidden;transform:scaleY(.96);transform-origin:top;pointer-events:none}
.mega.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s,transform .25s}
.mega-in{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:clamp(24px,4vw,56px);padding:34px clamp(18px,4vw,44px) 38px} /* zijmarge gelijk aan de kop (tenantfix 6 oktober) */
.mega h3{font-size:.78rem;font-family:var(--tekst);font-weight:700;letter-spacing:.22em;color:var(--dof-2);margin-bottom:14px}
.mega ul{list-style:none}
.mega li a,.mega li button{display:block;width:100%;text-align:left;padding:10px 10px;min-height:44px;border-radius:10px;color:var(--ink);font-weight:600;text-decoration:none}
.mega li a:hover,.mega li button:hover{background:var(--bg-2)}
.mega li small{display:block;font-weight:400;color:var(--dof);font-size:.82rem}
.mega-promo{border-radius:var(--r);overflow:hidden;min-height:230px}

/* burger */
.burger{display:none;margin-left:auto;width:52px;height:52px;border-radius:12px;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:5px;border-radius:3px;background:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .2s,height .35s}
.burger i:nth-child(1){height:14px}
.burger i:nth-child(2){height:24px}
.burger i:nth-child(3){height:10px}
@media (prefers-reduced-motion:no-preference){
  .burger:not([aria-expanded="true"]) i{animation:eq 1.05s ease-in-out infinite alternate}
  .burger:not([aria-expanded="true"]) i:nth-child(2){animation-delay:.18s}
  .burger:not([aria-expanded="true"]) i:nth-child(3){animation-delay:.34s}
}
@keyframes eq{from{transform:scaleY(.6)}to{transform:scaleY(1.25)}}
.burger[aria-expanded="true"] i{animation:none;height:24px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateX(10px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleY(.2)}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateX(-10px) rotate(-45deg)}

/* drawer */
.drawer{position:fixed;inset:0;z-index:55;visibility:hidden;pointer-events:none}
.drawer .achter{position:absolute;inset:0;background:light-dark(rgba(25,27,27,.45),rgba(0,0,0,.62));opacity:0;transition:opacity .35s}
.drawer .vlak{position:absolute;top:0;right:0;bottom:0;width:min(86vw,380px);background:var(--bg);border-left:1px solid var(--lijn);transform:translateX(100%);transition:transform .45s cubic-bezier(.3,.7,.2,1);display:flex;flex-direction:column;padding:24px 26px 26px;overflow-y:auto}
.drawer-kop{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;margin-bottom:14px;border-bottom:1px solid var(--lijn)}
.drawer-kop .merk img{height:104px}
.drawer-kop .sluit{font-size:1.8rem;padding:4px 10px;line-height:1;min-width:44px;min-height:44px}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer.open .achter{opacity:1}
.drawer.open .vlak{transform:none}
.drawer nav{display:flex;flex-direction:column;gap:2px}
.drawer nav>a,.drawer nav>button{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 8px;min-height:48px;font-family:var(--display);font-weight:700;font-size:1.5rem;text-transform:uppercase;text-decoration:none;text-align:left;border-radius:10px;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
.drawer.open nav>a,.drawer.open nav>button{opacity:1;transform:none}
.drawer.open nav>*:nth-child(2){transition-delay:.05s}.drawer.open nav>*:nth-child(3){transition-delay:.1s}
.drawer.open nav>*:nth-child(4){transition-delay:.15s}.drawer.open nav>*:nth-child(n+5){transition-delay:.2s}
.drawer .sub{display:none;flex-direction:column;padding:0 0 8px}
.drawer .sub.open{display:flex}
.drawer .sub a{padding:10px 14px;min-height:44px;color:var(--dof);text-decoration:none;font-weight:600;border-radius:10px}
.drawer .d-cta{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:10px}
@media (prefers-reduced-motion:reduce){.drawer .achter,.drawer .vlak,.drawer nav>a,.drawer nav>button{transition:none}}

/* beeldplekken: tonen het bestand als het bestaat, anders een rustig leeg vlak met maat */
.slot{position:relative;background:var(--bg-2);overflow:hidden}
.slot img{width:100%;height:100%;object-fit:cover}
.slot.leeg{background:repeating-linear-gradient(135deg,var(--bg-2) 0 18px,color-mix(in srgb,var(--bg-2) 93%,var(--ink)) 18px 36px);border:1px solid var(--lijn)}
.slot.leeg::after{content:"Beeldplek · " attr(data-slot) " · " attr(data-maat);position:absolute;left:14px;right:14px;bottom:12px;font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--dof-2)}

.slot.proef::before{content:attr(data-proeflabel);position:absolute;z-index:2;left:12px;top:10px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--glas);color:var(--dof);padding:3px 8px;border-radius:6px}
.slot[data-vrij] img{object-fit:contain;object-position:center bottom}

/* hero (licht): tekst links, artsy banner rechts tot aan de rand */
.held{position:relative;overflow:hidden;border-bottom:1px solid var(--lijn);background:radial-gradient(58% 60% at 86% 0%,var(--spot),transparent 70%)}
.held-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;min-height:min(84vh,780px)}
.held-in{align-self:center;padding:clamp(40px,7vw,80px) 0 clamp(110px,14vh,150px);padding-left:max(clamp(18px,4vw,44px),calc((100vw - var(--max))/2 + clamp(18px,4vw,44px)));padding-right:clamp(18px,3vw,40px);position:relative;z-index:2}
.held h1{font-size:clamp(3.4rem,8.4vw,7rem);font-weight:800;max-width:9.5ch}
.held h1 em{font-style:normal;color:var(--accent)}
.held p{max-width:46ch;color:var(--dof);margin:20px 0 30px;font-size:1.08rem}
.held-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-showcase{min-width:0;align-self:center;padding:24px 0 72px;position:relative}
.hero-viewport{position:relative;height:clamp(440px,43vw,640px);overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;mask-image:linear-gradient(90deg,transparent,#fff 12%);-webkit-mask-image:linear-gradient(90deg,transparent,#fff 12%)}
.hero-viewport.slepen{cursor:grabbing}
.hero-track{height:100%;display:flex;will-change:transform}
.hero-slide{position:relative;flex:0 0 88%;min-width:0;height:100%;margin:0}
.hero-dancer{position:absolute;inset:100px 0 0;width:100%;height:calc(100% - 100px);object-fit:contain;object-position:center bottom;pointer-events:none;transition:transform .35s ease}
/* de slide is een link naar de lessen van die stijl; slepen blijft werken (klik-onderdrukking in het script) */
.hero-link{position:absolute;inset:0;display:block;color:inherit;cursor:pointer;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;border-radius:var(--r)}
.hero-viewport.slepen .hero-link{cursor:grabbing}
.hero-link:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}
.hero-link:hover .hero-dancer{transform:translateY(-6px)}
/* titels niet kaarsrecht: een licht gekanteld vlak, elke volgende slide de andere kant op */
.hero-titelvlak{position:absolute;top:0;left:8%;width:84%;height:110px;pointer-events:none;transform-style:preserve-3d;transform:perspective(1100px) rotateX(11deg) rotateY(-15deg) rotate(-2.5deg)}
.hero-slide:nth-child(even) .hero-titelvlak{transform:perspective(1100px) rotateX(11deg) rotateY(15deg) rotate(2.5deg)}
.hero-titelvlak .hero-title{top:0;left:0;width:100%;height:100%}
.hero-title{position:absolute;top:0;left:8%;width:84%;height:110px;pointer-events:none;background:var(--accent);mask:var(--title) center/contain no-repeat;-webkit-mask:var(--title) center/contain no-repeat;will-change:transform}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wband{position:absolute;left:0;right:0;bottom:0;z-index:3;overflow:hidden;border-top:1px solid var(--lijn);background:light-dark(rgba(255,255,255,.82),rgba(25,27,27,.82));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:14px 0}
.wband-track{display:flex;gap:0;width:max-content;will-change:transform}
.wband span,.wband a{flex:0 0 280px;width:280px;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.4rem);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;padding-right:0;color:inherit;text-decoration:none}
.wband span.omlijnd,.wband a.omlijnd{color:transparent;-webkit-text-stroke:1.5px light-dark(rgba(25,27,27,.7),rgba(247,247,245,.7))}
.wband a:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.wband .ster{color:var(--accent);-webkit-text-stroke:0}

/* hero: logo als venster op de achtergrond. De video speelt binnen de vorm van het hele logo
   (niet bijgesneden), licht doorschijnend. Dansers en titels schuiven ervoor langs; het blok
   vangt geen aanrakingen, dus vegen blijft werken. */
.hero-logo{position:absolute;z-index:0;left:50%;top:calc(50% + 36px);width:min(86%,520px);margin:0;transform:translate(-50%,-50%);opacity:.18;pointer-events:none}
.hero-logo-vorm{position:relative;width:100%;aspect-ratio:640/631;background:var(--accent);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.hero-logo-vorm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-logo-embed,.hero-logo-vorm iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:center/cover no-repeat}
.hero-logo-vorm::after{content:"";position:absolute;inset:0;background:light-dark(rgba(0,65,61,.18),rgba(247,247,245,.22))}
.hero-track{position:relative;z-index:1}
@media (max-width:900px){
  .hero-logo{max-width:360px}
}
@media (min-width:1800px){
  .hero-logo{left:calc(50% - 12vw);width:min(78vh,520px);top:calc(50% + 20px)}
  .hero-logo-vorm video{object-position:48% center}
}

/* les-zoeker (ontwerp v2: "Welke les past bij jou?" en "Waar ben je naar op zoek?") */
.zoeker{background:var(--bg-2);border-bottom:1px solid var(--lijn)}
.zoeker-raster{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,88px)}
.zoeker figure{background:transparent;aspect-ratio:838/694;max-height:520px;justify-self:center;width:100%;position:relative;isolation:isolate}
.zoeker figure::before{content:"";position:absolute;left:50%;top:52%;height:94%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--gebroken);z-index:-1}
.zoeker h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.keuzes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 22px}
.keuze{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:74px;padding:16px 20px;border-radius:14px;border:1.5px solid var(--accent);background:var(--bg);font-weight:700;text-align:left;transition:background .2s,transform .2s}
.keuze.kind{background:var(--roze);border-color:var(--roze);color:var(--groen)}
.keuze:hover{transform:translateY(-2px)}
.keuze::after{content:"→";font-size:1.2rem;margin-left:auto}
/* lijnicoon vóór de tekst, uit het goedgekeurde ontwerp (C-01): kindergezicht en volwassene */
.keuze-icoon{flex:none;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.zoek-rij{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.zoek-rij label{display:block;font-weight:600;font-size:.88rem;margin-bottom:7px}
.kies{width:100%;appearance:none;-webkit-appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2300413d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;border:1.5px solid rgba(25,27,27,.25);border-radius:12px;color:var(--ink);font:inherit;padding:12px 46px 12px 16px;min-height:50px}

/* stijlkaarten (ontwerp v2: danser links, tekst rechts) */
.stijl-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.stijl-lijst{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.stijl-rij{display:grid;grid-template-columns:44% 1fr;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;transition:transform .3s,border-color .3s}
.stijl-rij:hover,.stijl-rij:focus-within{transform:translateY(-4px);border-color:var(--ink)}
.stijl-rij[hidden]{display:none}
.stijl-rij figure{background:var(--gebroken);min-height:250px}
.stijl-rij.team figure{background:color-mix(in srgb,var(--roze) 26%,var(--wit))}
.stijl-rij figure.leeg{border-width:0 1px 0 0}
.stijl-rij .slot[data-vrij] img{padding:16px 10px 0}
.sr-in{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px}
.sr-in h3{font-size:1.7rem;font-weight:800}
.sr-in p{color:var(--dof);font-size:.95rem;flex:1}
.sr-in .cta{align-self:flex-start;min-height:44px;padding:10px 18px;font-size:.92rem}

/* lesdetail per stijl (ontwerp v2) */
.stijl-detail{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:56px;padding-top:56px;border-top:1px solid var(--lijn)}
.stijl-detail figure{border-radius:var(--r);background:var(--gebroken);aspect-ratio:610/536;overflow:hidden}
.stijl-detail figure img{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:18px 18px 0}
.kruimel{font-size:.85rem;color:var(--dof-2);margin-bottom:10px}
.kruimel b{color:var(--accent)}
.stijl-detail h3{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800}
.stijl-detail .tagline{font-size:1.2rem;margin:10px 0 6px}
.stijl-detail .sub{color:var(--dof);font-size:.98rem}
.stijl-detail .held-cta{margin:20px 0 22px}
.uitklap{background:var(--bg-2);border-radius:12px;margin-bottom:10px}
.uitklap summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font-weight:700;min-height:52px}
.uitklap summary::-webkit-details-marker{display:none}
.uitklap summary::after{content:"+";font-size:1.4rem;font-weight:400;line-height:1}
.uitklap[open] summary::after{content:"–"}
.uitklap div{padding:0 20px 18px;color:var(--dof);font-size:.95rem}
.uitklap ul{list-style:none;display:grid;gap:6px}
.uitklap li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--lijn);padding-bottom:6px}
.uitklap li span:last-child{color:var(--ink);font-weight:600;white-space:nowrap}

/* roosterpaneel en wedstrijdteams (ontwerp v2) */
.paneel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--bg);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(24px,4vw,44px);padding-bottom:0;overflow:hidden}
.paneel>div{padding-bottom:clamp(24px,4vw,44px)}
.paneel h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.paneel figure{background:transparent;aspect-ratio:1;align-self:end;isolation:isolate}
/* cirkel achter de dansers bij het rooster en de proefles: de uitsnedes zijn niet strak. Op desktop een volledige
   cirkel waar het hele beeld in valt (vierkant kader, beeld iets kleiner); op mobiel een halve cirkel als vloer. */
.paneel figure::before,.proef-v2 figure::before{content:"";position:absolute;left:50%;top:50%;width:98%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--gebroken);z-index:0}
.paneel .slot[data-vrij] img,.proef-v2 .slot[data-vrij] img{position:relative;z-index:1;object-position:center;padding:11%}
.tekstlink{display:inline-block;margin-top:16px;font-weight:600;color:var(--accent);text-underline-offset:4px}
.mix-kop{margin-top:56px}
.mix-kop h3{font-size:1.9rem;font-weight:800}
.teams-sec{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.teams-sec figure{background:transparent;aspect-ratio:3/2;overflow:visible}
.teams-sec figure img{position:absolute;left:-2%;bottom:0;width:104%;max-width:none;height:auto;object-fit:contain}
.teamrij{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 6px}
.teamrij span{background:var(--roze);color:var(--groen);border-radius:12px;padding:10px 14px;font-weight:700;font-size:.92rem;line-height:1.25}
.teamrij small{display:block;font-weight:500;font-size:.76rem}

/* proefles (ontwerp v2) */
.proef-v2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.proef-v2 figure{background:transparent;aspect-ratio:1;max-height:540px;width:100%;isolation:isolate}
.proef-v2 h2{font-size:clamp(2.2rem,5vw,3.4rem)}
.proef-v2 .veld{margin:24px 0 14px}
.proef-v2 .veld label{display:block;font-weight:600;font-size:.88rem;margin-bottom:7px}
.proef-v2 .cta{width:100%;min-height:58px;font-size:1.05rem}
.klein{color:var(--dof-2);font-size:.86rem;margin-top:12px}
.vraag{margin-top:clamp(48px,7vw,80px);padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--lijn)}
.vraag h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.vraag-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);margin:28px 0 36px}
.vraag-raster>div{display:grid;gap:8px;justify-items:start}
.vraag-raster>div+div{border-left:1px solid var(--lijn);padding-left:clamp(20px,4vw,56px)}
.vraag-raster strong{font-size:1.1rem}
.vraag-raster span{color:var(--dof)}
.praktisch.drie{grid-template-columns:repeat(3,1fr)}

/* stijlkaarten */
.stijlen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.stijl-kaart{--k:var(--accent);background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.stijl-kaart.team{--k:var(--roze)}
.stijl-kaart:hover,.stijl-kaart:focus-within{transform:translateY(-5px);border-color:var(--ink)}
.stijl-kaart figure{position:relative;aspect-ratio:16/12;border:0;border-bottom:5px solid var(--k)}
/* lichte grond onder de illustraties in beide weergaven: de uitsnedes zijn daarop getekend */
.stijl-kaart .slot[data-vrij]{background:var(--gebroken)}
.stijl-kaart:nth-child(even) .slot[data-vrij]{background:color-mix(in srgb,var(--roze) 26%,var(--wit))}
.stijl-kaart .slot[data-vrij] img{padding-top:14px}
.stijl-kaart figure.leeg{border-width:0 0 5px;border-color:var(--k)}
.sk-in{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.sk-in h3{font-size:1.55rem;font-weight:700}
.stijl-kaart p{color:var(--dof);font-size:.95rem;flex:1}
.sk-wanneer{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dof-2)}
.sk-knop{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;margin:4px 0 0 -16px;border-radius:999px;font-weight:700;font-size:.92rem;color:var(--accent)}
.sk-knop:hover{background:var(--bg-2)}
.sk-knop::after{content:"→"}

/* rooster-mixer */
.rooster-sec{background:var(--bg-2);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.filters{display:flex;flex-direction:column;gap:14px;margin:38px 0 10px}
.filterrij{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filterrij b{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dof-2);min-width:84px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--lijn);background:var(--bg);font-weight:600;font-size:.93rem;color:var(--dof);transition:border-color .2s,color .2s,background .2s}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--op-accent);background:var(--accent)}
.teller{color:var(--dof);font-size:.95rem;margin:6px 0 8px}
.teller strong{color:var(--accent);font-variant-numeric:tabular-nums}
.filter-nb{color:var(--dof-2);font-size:.84rem;margin-bottom:26px;max-width:70ch}
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.dag>h3{font-size:1.05rem;font-weight:700;letter-spacing:.1em;color:var(--dof);padding:0 4px 10px;border-bottom:1px solid var(--lijn);margin-bottom:12px}
.dag>h3 span{color:var(--dof-2);font-family:var(--tekst);font-weight:500;font-size:.75rem;letter-spacing:0;text-transform:none;display:block}
.lessen{display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 28%,transparent) transparent;scrollbar-gutter:stable;overscroll-behavior-y:contain}
.lessen>.les{flex-shrink:0}
.lessen::-webkit-scrollbar{width:5px}
.lessen::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 28%,transparent);border-radius:6px}
.lessen::-webkit-scrollbar-track{background:transparent}
.lessen:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.les{--k:var(--accent);width:100%;text-align:left;background:var(--kaart);border:1px solid var(--lijn);border-left:4px solid var(--k);border-radius:12px;padding:11px 12px;min-height:44px;transition:opacity .3s,transform .3s,border-color .2s,background .2s}
.les.team{--k:var(--roze);background:color-mix(in srgb,var(--roze) 14%,var(--kaart))}
.les:hover{border-color:var(--ink);border-left-color:var(--k)}
.les[aria-pressed="true"]{border-color:var(--ink);border-left-color:var(--k);box-shadow:0 0 0 1px var(--ink)}
.les time{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--dof)}
.les strong{display:block;font-weight:700;font-size:.95rem;line-height:1.3;margin:2px 0 3px}
.les small{display:block;color:var(--dof);font-size:.76rem}
.les.uit{opacity:.2;transform:scale(.985)}
.les.uit:hover{opacity:.55}
.les-detail{margin-top:30px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(22px,3.5vw,34px);display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.les-detail .leeg-tekst{grid-column:1/-1;color:var(--dof-2);text-align:center;padding:8px 0}
.ld-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ld-kop h3{font-size:1.8rem;font-weight:800}
.ld-tag{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.06em;background:var(--bg-2);border:1px solid var(--lijn);color:var(--ink)}
.ld-tag.team{background:var(--roze);border-color:transparent;color:var(--groen)}
.les-detail p{color:var(--dof);font-size:.98rem}
.ld-meta{list-style:none;display:grid;gap:10px}
.ld-meta li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--lijn);padding-bottom:9px;font-size:.92rem}
.ld-meta li b{color:var(--dof-2);font-weight:600}
.ld-meta li span{font-weight:600;text-align:right}
.ld-acties{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.bron{color:var(--dof-2);font-size:.82rem;margin-top:18px}

/* wacht-op-klant: zichtbaar leeg, nooit gevuld met voorbeeldinhoud */
.wacht{border:1.5px dashed var(--lijn-sterk);border-radius:var(--r);padding:24px;background:var(--bg)}
.wacht b{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:var(--roze);color:var(--groen);padding:4px 10px;border-radius:6px;margin-bottom:10px}
.wacht p{color:var(--dof);font-size:.95rem;max-width:62ch}
.tarieven{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.tarief{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:24px}
.tarief h3{font-size:1.3rem;margin-bottom:4px}
.tarief .prijs{font-family:var(--display);font-size:2.2rem;font-weight:800;color:var(--accent)}
.tarief .prijs sub{font-size:.85rem;color:var(--dof-2);font-family:var(--tekst);font-weight:500;vertical-align:baseline}
.tarief p{color:var(--dof);font-size:.92rem;margin:8px 0 12px}

/* team & studio */
.docenten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.docent{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.docent figure{aspect-ratio:4/3.2;border:0}
.docent figure.leeg{border-width:0 0 1px}
body:not(.mock-uit) .docent .slot.leeg{background:var(--bg-2);border-width:0 0 1px}
body:not(.mock-uit) .docent:nth-child(3n+2) .slot.leeg{background:color-mix(in srgb,var(--roze) 30%,var(--kaart))}
body:not(.mock-uit) .docent:nth-child(3n) .slot.leeg{background:color-mix(in srgb,var(--beige) 45%,var(--kaart))}
body:not(.mock-uit) .docent .slot.leeg::before{content:attr(data-initiaal);position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:6.5rem;line-height:1;color:var(--accent)}
body:not(.mock-uit) .docent .slot.leeg::after{content:"Portret volgt"}
.docent .d-in{padding:18px 20px 22px}
.docent h3{font-size:1.4rem}
.docent .rol{color:var(--dof);font-size:.9rem;margin:4px 0 12px}
.d-chips{display:flex;gap:7px;flex-wrap:wrap}
.d-chips span{display:inline-flex;align-items:center;font-size:.76rem;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--bg-2);border:1px solid var(--lijn);color:var(--ink)}
.d-chips span.team{background:var(--roze);border-color:transparent;color:var(--groen)}
.studio-blok{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:70px}
.studio-blok figure{border-radius:var(--r);aspect-ratio:16/11}
.studio-blok ul{list-style:none;margin-top:18px;display:grid;gap:10px;color:var(--dof)}
.studio-blok ul li{padding-left:22px;position:relative}
.studio-blok ul li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:2px;background:var(--accent)}

/* nieuws */
.nieuws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
#nieuws .article-list{margin-top:32px}
main > .sectie .article-list{margin-top:32px}
.nieuws-kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.nieuws-kaart figure{aspect-ratio:16/9;background:var(--bg-2);overflow:hidden}
.nieuws-kaart figure img{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding-top:10px}
.nieuws-kaart div{padding:18px 20px 22px;display:grid;gap:8px}
.nieuws-kaart h3{font-size:1.35rem}
.nieuws-kaart p{color:var(--dof);font-size:.93rem}
.nieuws-kaart time{font-size:.78rem;color:var(--dof-2);font-weight:600}
.citaat{max-width:850px;margin:0 auto;text-align:center}
.citaat blockquote{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.2}
.citaat blockquote::before{content:"“";color:var(--accent)}
.citaat blockquote::after{content:"”";color:var(--accent)}
.citaat figcaption{margin-top:18px;color:var(--dof-2);font-size:.88rem}

/* proefles */
.proef{background:var(--bg-2);border-top:1px solid var(--lijn)}
.proef-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,60px);margin-top:40px;align-items:start}
.stappen{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(22px,3.5vw,34px)}
.stappen ol{list-style:none;display:grid;gap:18px;margin-bottom:26px;counter-reset:stap}
.stappen li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;counter-increment:stap}
.stappen li::before{content:counter(stap);font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1;color:var(--accent)}
.stappen li strong{display:block;font-size:1.05rem}
.stappen li span{color:var(--dof);font-size:.95rem}
.praktisch{display:grid;gap:16px}
.p-kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:22px}
.p-kaart h3{font-size:1.15rem;margin-bottom:10px}
.p-kaart p,.p-kaart li{color:var(--dof);font-size:.93rem}
.p-kaart ul{list-style:none;display:grid;gap:7px}
.p-kaart li{display:flex;justify-content:space-between;gap:12px}
.p-kaart li span:last-child{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.p-kaart a{font-weight:600}

/* paginakop voor Lesaanbod, Over ons en Contact */
.pagina-kop{padding:clamp(48px,7vw,84px) 0 clamp(28px,4vw,44px);border-bottom:1px solid var(--lijn)}
.pagina-kop h1{font-size:clamp(3rem,8vw,6.2rem);font-weight:800;margin-bottom:18px}
.pagina-kop p{max-width:60ch;color:var(--dof);font-size:1.08rem}
.ankers{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.ankers a{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--lijn);font-weight:600;font-size:.93rem;color:var(--dof);text-decoration:none}
.ankers a:hover{color:var(--ink);border-color:var(--ink)}
.hoofdnav [aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.drawer nav [aria-current="page"]{color:var(--accent)}
.intern-nb{font-size:.8rem;color:var(--dof-2);margin-top:14px;max-width:70ch}
.meer{margin-top:28px}

/* home: deze week in de zaal */
.kop-rij{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.dagen-kort{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:36px}
.dag-kort{display:grid;gap:6px;align-content:start;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:20px;text-decoration:none;transition:transform .25s,border-color .25s}
.dag-kort:hover{transform:translateY(-3px);border-color:var(--ink)}
.dag-kort b{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;line-height:1}
.dag-kort span{font-weight:700;font-variant-numeric:tabular-nums}
.dag-kort small{color:var(--dof);font-size:.84rem}
.dag-kort .nu{display:none;justify-self:start;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--op-accent);padding:3px 9px;border-radius:6px}
.dag-kort.vandaag{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.dag-kort.vandaag .nu{display:inline-block}

/* home: kennismaken met de studio, met feiten uit het rooster */
.over-teaser{background:var(--bg-2);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.teaser-raster{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
.teaser-raster .held-cta{margin-top:24px}
.feiten{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feit{background:var(--bg);border:1px solid var(--lijn);border-radius:var(--r);padding:22px}
.feit b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--accent)}
.feit span{color:var(--dof);font-size:.95rem}

/* proeflesband: de afsluiter op Home, Over ons en Contact */
.proef-band{background:var(--groen);color:var(--wit)}
.band-in{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(40px,6vw,64px)}
.proef-band .kicker{color:var(--roze)}
.proef-band h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.proef-band p{opacity:.85;margin-top:10px;max-width:46ch}
.proef-band .cta{background:var(--groen);border-color:var(--roze);color:var(--wit)}
.proef-band .cta:hover{background:var(--wit);border-color:var(--wit);color:var(--groen)}
.proef-band .cta.spook{background:transparent;border-color:rgba(255,255,255,.45);color:var(--wit)}
.proef-band .cta.spook:hover{background:rgba(255,255,255,.12);border-color:var(--wit)}
.proef-band :focus-visible{outline-color:var(--wit)}

/* over ons: verhaal en waarden */
.verhaal-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.verhaal-raster p{color:var(--dof);max-width:58ch;margin-top:14px}
.verhaal-raster p.lead{color:var(--ink);font-size:1.2rem;margin-top:18px}
.verhaal-raster figure{border-radius:var(--r);aspect-ratio:7/8}
.verhaal-raster figure.klantfoto{aspect-ratio:2287/2663}
.verhaal-raster .klantfoto img{object-fit:contain}
.waarden{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.waarde{border-top:5px solid var(--accent);background:var(--bg-2);border-radius:0 0 var(--r) var(--r);padding:26px 24px}
.waarde:nth-child(2){border-top-color:var(--roze)}
.waarde:nth-child(3){border-top-color:var(--beige)}
.waarde h3{font-size:1.7rem;margin-bottom:10px}
.waarde p{color:var(--dof);font-size:.96rem}

/* contact: kaart, route en vraagformulier */
.route-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,4vw,48px);margin-top:36px;align-items:start}
.route-kaart{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--bg-2);border:1px solid var(--lijn)}
.route-kaart>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* positiemarkering: de punt wijst naar het midden van de kaart, daar ligt De Berchplaets */
.kaart-pin{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-36px 0 0 -15px;background:var(--groen);border:3px solid var(--wit);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 6px 14px rgba(25,27,27,.3)}
.kaart-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-84px);background:var(--antraciet);color:var(--wit);font-weight:700;font-size:.86rem;padding:6px 12px;border-radius:999px;white-space:nowrap}
.kaart-bron{position:absolute;left:10px;bottom:8px;font-size:.68rem;background:rgba(255,255,255,.88);color:#4e5150;padding:2px 7px;border-radius:5px}
.kaart-knop{position:absolute;right:12px;bottom:12px;background:var(--wit);color:var(--antraciet);border:1.5px solid rgba(25,27,27,.3);border-radius:999px;font-weight:700;font-size:.84rem;padding:9px 16px;min-height:44px}
.kaart-knop:hover{border-color:var(--antraciet)}
.route-kaart.ms-embed-aan .kaart-knop{display:none}
.route-info h3{font-size:1.5rem;margin-bottom:8px}
.route-info p{color:var(--dof)}
.route-info p a{color:var(--ink);font-weight:600}
.route-info .held-cta{margin:20px 0 26px}
.contact-raster{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:36px}
.formulier{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(22px,3.5vw,34px)}
.formulier .veld{margin:0 0 16px}
.veld label{display:block;font-weight:600;font-size:.88rem;margin-bottom:7px}
.veld input,.veld textarea{width:100%;background:var(--bg);border:1.5px solid var(--lijn-sterk);border-radius:12px;color:var(--ink);font:inherit;padding:12px 14px;min-height:50px}
.veld textarea{min-height:120px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.veld [aria-invalid="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.akkoord{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--dof);margin:4px 0 18px}
.akkoord input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:none}
.form-status{margin-top:14px;font-weight:600;font-size:.92rem;color:var(--accent);min-height:1.4em}

/* privacy- en cookieverklaring */
.privacy{max-width:760px}
.privacy h1{font-size:clamp(3rem,8vw,6.2rem);font-weight:800;margin-bottom:18px}
.privacy h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:44px 0 12px}
.privacy h3{font-family:var(--tekst);text-transform:none;font-size:1.05rem;font-weight:700;line-height:1.4;letter-spacing:0;margin:22px 0 6px}
.privacy p,.privacy li{color:var(--dof)}
.privacy p+p{margin-top:12px}
.privacy ul{margin:12px 0 0 20px;display:grid;gap:8px}
.privacy .privacy-lead{font-size:1.15rem;color:var(--ink)}
.privacy .privacy-versie{font-size:.88rem;color:var(--dof-2);margin-top:8px}
.privacy [data-ms-cookie-table]{margin-top:8px}
.privacy [data-ms-cookie-table] h3{margin-top:26px}
.voet-knop{font:inherit;font-size:.9rem;color:var(--dof);text-decoration:underline;text-underline-offset:3px;padding:0;text-align:left}
.voet-knop:hover{color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--lijn);padding:32px 0 110px}
.voet{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
.voet .merk img{height:128px}
.voet .merk{width:max-content;margin-left:-18.865px} /* compensate original logo's transparent left inset; no cropping */
.voet p,.voet li,.voet a{color:var(--dof);font-size:.9rem}
.voet ul{list-style:none;display:grid;gap:8px;margin-top:12px}
.voet h3{font-size:.78rem;font-family:var(--tekst);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dof-2);margin-bottom:4px}
.voet .disclaimer{margin-top:16px;font-size:.8rem;color:var(--dof-2);max-width:48ch}

/* vaste actiebalk mobiel */
.actiebalk{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--glas-dicht);backdrop-filter:blur(10px);border-top:1px solid var(--lijn)}
.actiebalk a{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:56px;border-radius:14px;font-weight:700;text-decoration:none}
.actiebalk .bel{border:1.5px solid var(--lijn-sterk)}
.actiebalk .boek{background:var(--accent);color:var(--op-accent)}

@media (max-width:1080px){
  .stijlen-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .zoeker-raster{gap:28px;padding-block:32px 40px}
  .zoeker figure{max-width:440px;max-height:clamp(240px,52vw,330px)}
  .hoofdnav,.top .cta,.top .thema{display:none}
  .burger{display:flex}
  .mega{display:none}
  .held-raster{grid-template-columns:1fr;min-height:0}
  .held-in{padding:44px clamp(18px,4vw,44px) 28px}
  .hero-showcase{padding:8px 0 68px}
  .hero-viewport{height:clamp(390px,72vw,500px);mask-image:linear-gradient(90deg,transparent,#fff 6%);-webkit-mask-image:linear-gradient(90deg,transparent,#fff 6%)}
  .hero-title{height:88px;left:8%;width:84%}
  .hero-titelvlak{height:88px}
  .hero-dancer{inset:82px 0 0;height:calc(100% - 82px)}
  .wband span{flex-basis:220px;width:220px}
  .week{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:12px;padding:0 0 14px;margin:0}
  .dag{min-width:min(76vw,300px);scroll-snap-align:start}
  .dagen-kort{grid-template-columns:repeat(2,1fr)}
  /* nieuws: horizontale slider, binnen de zijmarges zoals het rooster; kaarten slank omdat de illustraties weinig hoogte nodig hebben */
  .nieuws-grid{display:flex;gap:12px;margin-top:28px;padding:0 0 14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #nieuws .article-list{margin-top:28px}
  main > .sectie .article-list{margin-top:28px}
  .nieuws-grid::-webkit-scrollbar{display:none}
  /* sliders die met de muis te slepen zijn: tijdens het slepen staat het snappen uit, daarna snapt het script zelf */
  .sleepbaar{cursor:grab}
  .slepen-actief{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none;scroll-behavior:auto}
  .slepen-actief *{pointer-events:none}
  .nieuws-kaart{flex:0 0 min(76vw,320px);scroll-snap-align:start}
  .nieuws-kaart figure{aspect-ratio:auto;height:150px}
  .nieuws-kaart figure img{padding-top:8px}
  .nieuws-kaart div{padding:14px 16px 18px;gap:6px}
  .nieuws-kaart h3{font-size:1.2rem}
  .nieuws-grid .wacht{flex:0 0 100%;scroll-snap-align:start}
  .teaser-raster,.verhaal-raster,.waarden,.route-grid,.contact-raster{grid-template-columns:1fr}
  .verhaal-raster figure{max-height:360px}
  .verhaal-raster figure.klantfoto{width:100%;max-width:440px;max-height:none;justify-self:center}
  .route-kaart{aspect-ratio:4/3}
  .les-detail,.zoeker-raster,.stijl-detail,.paneel,.teams-sec,.proef-v2,.vraag-raster,.praktisch.drie{grid-template-columns:1fr}
  .stijl-lijst{grid-template-columns:1fr}
  .vraag-raster>div+div{border-left:0;padding-left:0;border-top:1px solid var(--lijn);padding-top:20px}
  .paneel figure{max-height:260px;aspect-ratio:480/324}
  .proef-v2 figure{aspect-ratio:590/549}
  /* mobiel: halve cirkel als vloer, beeld weer op ware grootte onderaan */
  .paneel figure::before,.proef-v2 figure::before{top:auto;bottom:0;width:88%;transform:translate(-50%,50%)}
  .paneel .slot[data-vrij] img,.proef-v2 .slot[data-vrij] img{object-position:center bottom;padding:0}
  .proef-grid,.studio-blok{grid-template-columns:1fr}
  .tarieven,.nieuws-grid{grid-template-columns:1fr}
  .docenten-grid{grid-template-columns:repeat(2,1fr)}
  .voet{grid-template-columns:1fr}
  .actiebalk{display:flex}
  footer{padding-bottom:130px}
}
@media (max-width:560px){
  .zoeker-raster{gap:24px}
  .keuzes{gap:10px;margin:22px 0 24px}
  .keuze{min-height:62px;padding:14px 16px}
  .zoek-rij{gap:16px}
  .stijlen-grid,.docenten-grid,.keuzes,.zoek-rij,.veld-rij{grid-template-columns:1fr}
  .stijl-rij{grid-template-columns:38% 1fr}
  .stijl-rij figure{min-height:200px}
  .filterrij b{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mega.open,.stijl-kaart,.les,.cta{transition:none}
  .wband-track{transform:none!important}
}

/* reviewwidget van het platform, in de klantkleuren */
#reviews .ms-widget{font-family:var(--tekst);--ms-accent:var(--accent);--ms-ink:var(--ink)}
#reviews .ms-submit{background:var(--accent);color:var(--op-accent);border-radius:999px}
#reviews .ms-rev-stars,#reviews .ms-rev-starpick button.is-on{color:var(--accent)}
#reviews .ms-rev-reply{border-color:var(--accent);background:var(--bg-2)}
/* beide weergaven: lijnen en lege sterren uit de tokens, invoervelden op de kaartkleur */
#reviews .ms-rev-item{border-top-color:var(--lijn)}
#reviews .ms-rev-starpick button{color:var(--lijn-sterk)}
#reviews .ms-widget input,#reviews .ms-widget textarea,#reviews .ms-widget select{background:var(--kaart);color:var(--ink);border-color:var(--lijn-sterk)}
#stijlDetail{scroll-margin-top:96px}
/* fotostrook Over ons: eigen foto's van de klant; op smalle schermen een veegbare rij zoals nieuws */
.fotomuur{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.fotomuur figure{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.fotomuur img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){
  .fotomuur{display:flex;gap:12px;margin-top:28px;padding:0 0 14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fotomuur::-webkit-scrollbar{display:none}
  .fotomuur figure{flex:0 0 min(78vw,300px);scroll-snap-align:start}
}