/* FitCore — huisstijl afgeleid van de flyer: saliegroen, diepblauw, zongeel. */

:root {
  /* Kleur */
  --sage-900:#8fae9f; --sage-700:#a8c3b6; --sage-500:#b8cdc4; --sage-300:#d8e4dd; --sage-100:#eef3f0;
  --ink:#27415a; --ink-700:#3d566d; --ink-500:#556d82; --paper:#ffffff;
  --zon:#f2c230; --zon-diep:#8a6404;
  --lijn:rgba(39,65,90,.14);

  /* Typografische schaal (1.25) */
  --t-xs:0.75rem; --t-s:1rem; --t-m:1rem; --t-l:1.25rem;
  --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:2.5rem; --t-4xl:3.25rem;

  /* Ruimteschaal (x2) */
  --r-1:0.25rem; --r-2:0.5rem; --r-3:1rem; --r-4:1.5rem; --r-5:2rem;
  --r-6:3rem; --r-7:4rem; --r-8:6rem;

  --straal:14px; --straal-s:8px;
  --schaduw:0 1px 2px rgba(39,65,90,.06), 0 8px 24px rgba(39,65,90,.08);
  --breedte:70rem;
  /* Zo tekent de browser ook de formuliervelden, de keuzelijsten en de
     schuifbalken in de modus die de bezoeker gekozen heeft. */
  color-scheme:light dark;

  --vink:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 13l6 6L21 4' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Donkere modus: dezelfde huisstijl, omgekeerde inkt en papier. */
@media (prefers-color-scheme:dark){
  :root{
    --sage-900:#243b33; --sage-700:#2b463c; --sage-500:#16211d; --sage-300:#1e2d28; --sage-100:#1b2724;
    --ink:#e8f1ec; --ink-700:#cddbd4; --ink-500:#9db3a9; --paper:#20302a;
    --zon:#f5cf52; --zon-diep:#ffdf7a;
    --lijn:rgba(232,241,236,.18);
    --schaduw:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  font-family:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--t-m); line-height:1.65; color:var(--ink-700);
  background:var(--sage-500);
  -webkit-font-smoothing:antialiased;
}

/* Achtergrondmotief van de flyer: chevrons links, stippen rechts. */
.motief{position:relative;isolation:isolate;overflow:hidden}
.motief::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='6' cy='6' r='5' fill='white' opacity='.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='120'><path d='M10 6 L46 60 L10 114' fill='none' stroke='white' stroke-width='7' opacity='.4'/></svg>");
  background-position:right -10px top -10px, left -20px top 0;
  background-repeat:repeat-y, repeat-y;
  background-size:60px 60px, 90px 120px;
}

/* Een woord als "Toegankelijkheidsverklaring" is op een telefoon breder dan
   het scherm en zette de hele pagina aan het schuiven. De taal staat op
   nl-BE, dus de browser mag afbreken; lukt dat niet, dan breekt het woord
   alsnog in plaats van buiten beeld te lopen. */
h1,h2,h3,h4{font-family:Oswald,"Arial Narrow",system-ui,sans-serif;color:var(--ink);line-height:1.12;
  font-weight:600;letter-spacing:.01em;margin:0 0 var(--r-3);
  hyphens:auto;overflow-wrap:break-word}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-l)}
h4{font-size:var(--t-m);font-weight:500}
p{margin:0 0 var(--r-3);max-width:62ch}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--zon-diep)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
ul{margin:0 0 var(--r-3);padding-left:1.15em}
li{margin-bottom:var(--r-2)}
strong{color:var(--ink)}

/* De gele koppen van de flyer. */
.zonkop{display:inline-block;color:var(--zon);background:var(--ink);font-weight:700;
  padding:0.25rem 1rem;border-radius:var(--straal-s);text-shadow:none;
  box-shadow:0 3px 0 rgba(39,65,90,.25)}

.omhulsel{width:min(100% - 2.5rem,var(--breedte));margin-inline:auto}
.smal{width:min(100% - 2.5rem,48rem);margin-inline:auto}

section{padding-block:var(--r-7)}
.vlak{background:var(--sage-100)}
.vlak-wit{background:var(--paper)}

.overslaan{position:absolute;left:-9999px}
.overslaan:focus{left:var(--r-3);top:var(--r-3);z-index:100;background:var(--ink);color:var(--paper);
  padding:var(--r-2) var(--r-3);border-radius:var(--straal-s)}

/* Kop en menu */
.kop{background:var(--sage-300);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:40}
/* Het merk duwt de rest naar rechts; het menu en de belknop sluiten samen
   aan op de rechterrand van het omhulsel. Een auto-marge op .menu zou niets
   doen: die ul is geen kind van de flexrij, de <nav> eromheen wel. */
.kop-rij{display:flex;align-items:center;gap:var(--r-4);min-height:72px;flex-wrap:wrap}
.merk{display:flex;align-items:center;gap:0.5rem;margin-right:auto;text-decoration:none;
  font-family:Oswald,sans-serif;font-size:1.5rem;color:var(--ink);letter-spacing:.02em}
.merk b{font-weight:700}.merk span{font-weight:300}
.bliksem{width:26px;height:26px;flex:none}
.menu{display:flex;gap:var(--r-4);flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}
.menu li{margin:0}
.menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:var(--t-s);
  font-weight:500;color:var(--ink-700);padding:0.25rem 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--zon)}
.kop .knop{padding:0.5rem 1rem;font-size:var(--t-s);min-height:44px}
/* Het tweede woord van de knop in de kop. Op een smal scherm valt het weg,
   zodat logo, knop en hamburger samen op één regel passen; "Intake" alleen
   zegt daar genoeg, en het is het woord dat op de hele site gebruikt wordt. */
.kop-extra{white-space:nowrap}

/* Op de Boost-pagina is het logo de titel. De kop zelf heeft geen tekst
   meer nodig — die staat in het logo en in het alt-veld — dus ze krijgt
   alleen nog de ruimte eronder van een h1. */
.h1-logo{margin-bottom:var(--r-3)}

/* Aanbod heeft een submenu. Het klapt open op :hover en op :focus-within,
   dus ook voor wie met de tab-toets door de kop gaat. Geen javascript. */
.heeft-sub{position:relative}
.heeft-sub>a::after{content:"";width:.38em;height:.38em;margin-left:.45em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-.12em)}
.tak-actief>a{color:var(--ink);border-bottom-color:var(--zon)}
.submenu{display:none;position:absolute;left:-0.5rem;top:100%;z-index:50;min-width:13rem;
  list-style:none;margin:0;padding:var(--r-1);background:var(--sage-300);
  border:1px solid var(--lijn);border-radius:var(--straal-s);box-shadow:var(--schaduw)}
.heeft-sub:hover>.submenu,.heeft-sub:focus-within>.submenu{display:block}
.submenu li{margin:0}
.submenu a{display:flex;align-items:center;width:100%;min-height:44px;
  padding-inline:var(--r-2);border-bottom:2px solid transparent;border-radius:var(--straal-s)}
/* In het submenu zou een gele onderlijn als scheidingslijn lezen; de
   huidige pagina krijgt er daarom een vlak in plaats van een lijn. */
.submenu a[aria-current="page"]{background:var(--sage-100);border-bottom-color:transparent}

/* De hamburger bestaat alleen op een smal scherm. Het aankruisvakje is de
   schakelaar, het label is wat je ziet; samen openen ze het menu zonder
   javascript. */
.menu-schakel,.hamburger,.sub-schakel,.sub-knop{display:none}

/* Knoppen: twee stijlen, meer niet */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  font-family:Poppins,sans-serif;font-size:var(--t-m);font-weight:600;line-height:1.2;
  padding:0.75rem 1.5rem;border-radius:var(--straal-s);border:2px solid var(--ink);
  background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,transform .15s}
.knop:hover{background:#1b2f42;color:#fff;transform:translateY(-1px)}
.knop-tweede{background:transparent;color:var(--ink)}
.knop-tweede:hover{background:var(--ink);color:#fff}
.knoppenrij{display:flex;flex-wrap:wrap;gap:var(--r-3);align-items:center;margin-bottom:var(--r-3)}

/* Held */
.held{background:var(--sage-500);padding-block:var(--r-6) 0}
.held-rij{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--r-6);align-items:center}
.held h1{font-size:clamp(2.25rem,6vw,var(--t-4xl));margin-bottom:var(--r-3)}
.held .lead{font-size:var(--t-l);color:var(--ink-700);margin-bottom:var(--r-4)}
/* De uitsnede uit de flyer is 1 op 4; die houden we op hoogte in plaats van
   op breedte, anders wordt ze een meter lang. */
/* De uitsnede uit de flyer heeft haar eigen saliegroene achtergrond (exact
   #b8cdc4). Die staat als vlak rond het beeld, anders leest hij als een
   losse groene rechthoek op de sectie. */
.portret{display:flex;align-items:flex-end;justify-content:center;
  align-self:center;justify-self:center;overflow:hidden;
  width:min(100%,17rem);height:clamp(17rem,38vh,24rem);
  background:#b8cdc4;border-radius:var(--straal);box-shadow:var(--schaduw)}
.portret img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom}

/* Sfeerbeelden: vaste verhouding, zodat de pagina niet verspringt. */
.beeld{display:block;border-radius:var(--straal);overflow:hidden;
  background:var(--sage-300);box-shadow:var(--schaduw)}
.beeld img{display:block;width:100%;height:auto;object-fit:cover}
/* Staande beelden niet breder laten worden dan ze hoeven: op volle
   kolombreedte worden ze anderhalf scherm hoog. */
.beeld-staand{width:min(100%,24rem);justify-self:center;align-self:center}
.beeld-staand img{aspect-ratio:3/4}
/* Een breed beeld niet bijsnijden maar smaller houden: anders zou het op
   volle kolombreedte een halve pagina hoog worden. */
.beeld-breed{width:min(100%,50rem);margin-inline:auto}
.beeld-breed img{height:auto}
.held .beeld img{max-height:clamp(20rem,52vh,30rem)}
.onder-held{display:flex;flex-wrap:wrap;gap:var(--r-3) var(--r-5);font-size:var(--t-s);
  color:var(--ink);padding-bottom:var(--r-5);margin-top:var(--r-4)}
.onder-held span{display:flex;align-items:center;gap:0.5rem}

/* Vinklijst van de flyer */
.vinken{list-style:none;padding:0;margin:0 0 var(--r-4)}
.vinken li{display:flex;gap:0.75rem;align-items:flex-start;margin-bottom:var(--r-2);font-size:var(--t-m)}
.vinken li a,.notitie a,.onder-held a{display:inline-block;min-height:24px;padding-block:0.25rem}
.vinken li::before{content:"";flex:none;width:1.15em;height:1.15em;margin-top:.2em;
  background-color:var(--ink);
  -webkit-mask:no-repeat center/contain var(--vink);mask:no-repeat center/contain var(--vink)}

/* Roosters en kaarten */
.rooster{display:grid;gap:var(--r-4)}
.rooster-mid{align-items:center}
/* Kaarten even hoog maken is netjes zolang ze allemaal tekst hebben; staat
   er in één kaart alleen een titel, dan is een leeg vak lelijker dan een
   kaart die krimpt. */
.rooster-top{align-items:start}
.stapel{display:grid;gap:var(--r-4);align-content:start}
.k2{grid-template-columns:repeat(2,1fr)}
.k3{grid-template-columns:repeat(3,1fr)}
.kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--straal);
  padding:var(--r-4);box-shadow:var(--schaduw)}
.kaart h3{margin-bottom:var(--r-2)}
.kaart p:last-child{margin-bottom:0}
.kaart-icoon{width:2.75rem;height:2.75rem;margin-bottom:var(--r-3);color:var(--ink)}
/* Wanneer een les doorgaat, onder haar beschrijving. Een lijn erboven maakt
   duidelijk dat dit geen zin uit de tekst meer is maar een gegeven. */
.les-wanneer{margin:var(--r-3) 0 0;padding-top:var(--r-2);border-top:1px solid var(--lijn);
  font-family:Oswald,sans-serif;font-size:var(--t-s);letter-spacing:.01em;color:var(--ink)}
.les-wanneer a{color:inherit}
.les-wanneer-stil{font-family:Poppins,sans-serif;font-size:var(--t-xs);color:var(--ink-700)}
/* De vijf plaatsen passen op een breed scherm naast elkaar. */
.plaatsen{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--r-1) var(--r-4)}

/* De contactpagina: drie blokken in twee kolommen. Links de gegevens en de
   uren, rechts het formulier over de volle hoogte, en daaronder links wat er
   na het versturen gebeurt. Op een telefoon worden het drie blokken onder
   elkaar in bronvolgorde, en staat het formulier dus na één kort blok in
   plaats van na drie. */
.contact-rooster{display:grid;grid-template-columns:1fr 1fr;gap:var(--r-4);align-items:start}
.contact-rooster>:nth-child(2){grid-column:2;grid-row:1 / span 2}

/* Lessenrooster */
.rooster-tabel{width:100%;border-collapse:collapse;background:var(--paper);
  border-radius:var(--straal);overflow:hidden;box-shadow:var(--schaduw);font-size:var(--t-s)}
.rooster-tabel caption{text-align:left;padding-bottom:var(--r-2);color:var(--ink-700);font-size:var(--t-s)}
.rooster-tabel th,.rooster-tabel td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--lijn)}
.rooster-tabel thead th{background:var(--ink);color:#fff;font-family:Oswald,sans-serif;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;font-size:var(--t-xs)}
.rooster-tabel tbody th{font-family:Oswald,sans-serif;font-weight:600;color:var(--ink);white-space:nowrap}
.rooster-tabel tr:last-child td,.rooster-tabel tr:last-child th{border-bottom:0}
.dagkop th{background:var(--sage-300);font-family:Oswald,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink);font-size:var(--t-xs)}
.tabelhuls{overflow-x:auto}

/* Pakketten */
.pakket{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--lijn);
  border-radius:var(--straal);overflow:hidden;box-shadow:var(--schaduw)}
.pakket img{width:100%;aspect-ratio:715/272;object-fit:cover}
.pakket-body{padding:var(--r-4);display:flex;flex-direction:column;flex:1}
.pakket-body h3{margin-bottom:var(--r-1)}
.pakket .sub{font-size:var(--t-s);color:var(--ink-700);margin-bottom:var(--r-3)}
.prijs{font-family:Oswald,sans-serif;font-size:var(--t-2xl);color:var(--ink);line-height:1;
  margin-bottom:var(--r-3)}
.prijs small{font-size:var(--t-xs);font-family:Poppins,sans-serif;color:var(--ink-700);
  display:block;font-weight:400;margin-top:0.25rem}
/* Zolang het bedrag er niet is, houdt deze regel de plaats vrij. Ze staat
   bewust kleiner: een prijs is een cijfer, dit is er geen. */
.prijs-nog{font-size:var(--t-l);color:var(--ink-700)}
.pakket .knop{margin-top:auto}
.lint{background:var(--zon);color:var(--ink);font-family:Oswald,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:var(--t-xs);text-align:center;padding:0.5rem}
.uitgelicht{border:2px solid var(--zon)}

/* Wat er in een pakket zit: elke regel met haar foto ernaast. */
.inhoud{list-style:none;padding:0;margin:0 0 var(--r-3);display:grid;gap:var(--r-2)}
.inhoud li{display:flex;align-items:center;gap:var(--r-2);margin:0;font-size:var(--t-s)}
/* De producten en de bereidingen zijn vrijgesteld en staan zonder vlakje op
   de kaart. `contain` houdt een fles heel waar `cover` de hals zou
   afsnijden; de vaste maat houdt de regels op één lijn, ook als het ene
   beeld hoog en smal is en het andere breed.
   Let op: het flexkind is de <picture>, niet de <img>. Zonder `flex:none`
   daar kromp de omhulling mee met de tekst ernaast en werd een smalle pot
   tot een streepje platgedrukt. */
.inhoud picture{flex:none;display:block;width:56px;height:56px}
.inhoud img{width:100%;height:100%;object-fit:contain}
/* Wat je ermee maakt: twee naast elkaar, dus wat kleiner. */
.inhoud-twee{grid-template-columns:repeat(2,1fr);gap:var(--r-2) var(--r-3)}
.inhoud-twee li{font-size:var(--t-xs)}
.inhoud-twee picture{width:48px;height:48px}
/* De twee lijsten staan onder elkaar; hun kop mag niet tegen de vorige lijst
   aan plakken. */
.pakket-body h4{margin-top:var(--r-2)}
.smaken{color:var(--ink-700)}
/* De regel die op elke kaart terugkomt: het Boost Programma hoort erbij.
   Ze staat als laatste en krijgt daarom een scheidingslijn. */
.inhoud-boost{border-top:1px solid var(--lijn);padding-top:var(--r-2);font-weight:600}

/* Het logo van het Boost Programma. Het staat op een lichte plaat, want de
   letters zijn diepblauw; in donkere modus komt die plaat terug (zie
   achteraan). In een inhoudsregel vervangt het de productfoto en houdt het
   dus dezelfde breedte. */
.boost-logo{flex:none;display:block}
.boost-logo img{display:block;width:130px;height:auto}
.inhoud-boost .boost-logo img{width:88px}
.boost-logo-groot img{width:min(260px,70vw)}
.boost-logo-groot{margin-bottom:var(--r-3)}

/* Wanneer een intake kan: dag links, uren rechts. */
.urenlijst{list-style:none;padding:0;margin:0 0 var(--r-3);display:grid;gap:var(--r-1);max-width:26rem}
.urenlijst li{display:flex;justify-content:space-between;gap:var(--r-3);margin:0;
  padding:0.4rem 0;border-bottom:1px solid var(--lijn);font-size:var(--t-s)}
.urenlijst li:last-child{border-bottom:0}
.urenlijst .dag{font-family:Oswald,sans-serif;font-weight:500;color:var(--ink)}

/* Citaat */
.citaat{border-left:4px solid var(--zon);padding-left:var(--r-3);font-style:italic;
  font-size:var(--t-l);color:var(--ink);margin:0 0 var(--r-4)}
.citaat footer{font-style:normal;font-size:var(--t-s);color:var(--ink-700);margin-top:var(--r-2)}

/* Formulier */
.veld{margin-bottom:var(--r-3)}
.veld label{display:block;font-size:var(--t-s);font-weight:600;color:var(--ink);margin-bottom:var(--r-1)}
.veld input,.veld select,.veld textarea{width:100%;font:inherit;font-size:var(--t-m);
  padding:0.75rem 1rem;border:1px solid var(--ink-500);border-radius:var(--straal-s);
  background:var(--paper);color:var(--ink)}
.veld .hint{font-size:var(--t-xs);color:var(--ink-700);margin-top:var(--r-1)}
fieldset{border:1px solid var(--lijn);border-radius:var(--straal);padding:var(--r-3);margin:0 0 var(--r-4)}
legend{font-family:Oswald,sans-serif;color:var(--ink);padding-inline:0.5rem}

/* Voet */
.voet{background:var(--ink);color:#e2ecf3;padding-block:var(--r-6) var(--r-4);font-size:var(--t-s)}
.voet h2,.voet h3{color:#fff;font-size:var(--t-m)}
.voet a{color:#fff}
.voet-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--r-4);margin-bottom:var(--r-5)}
/* Donkerblauw op donkerblauw leest als vette tekst, niet als knop. */
.voet .knop{background:var(--zon);border-color:var(--zon);color:#16211d}
.voet .knop:hover{background:#ffdf7a;color:#16211d}
.voet ul{list-style:none;padding:0}
.voet li{margin-bottom:0}
.voet li a,.voet-slot a{display:inline-flex;align-items:center;min-height:44px;padding-block:0.25rem}
.voet-slot{border-top:1px solid rgba(255,255,255,.18);padding-top:var(--r-3);
  display:flex;flex-wrap:wrap;gap:var(--r-3);justify-content:space-between;font-size:var(--t-xs)}

.kruimels{font-size:var(--t-xs);color:var(--ink-700);padding-block:var(--r-3) 0}
.kruimels ol{list-style:none;display:flex;flex-wrap:wrap;gap:0.5rem;padding:0;margin:0}
.kruimels li{margin:0;display:flex;align-items:center}
.kruimels a{display:inline-flex;align-items:center;min-height:44px;padding-right:0.25rem}
.kruimels li::after{content:"\203A";margin-left:0.5rem;color:var(--ink-500)}
.kruimels li:last-child::after{content:""}

.notitie{background:var(--sage-300);border-left:4px solid var(--ink);padding:var(--r-3);
  border-radius:var(--straal-s);font-size:var(--t-s);margin-bottom:var(--r-4)}
.notitie p:last-child{margin-bottom:0}

/* Smalle schermen */
@media (max-width:60rem){
  .k3{grid-template-columns:repeat(2,1fr)}
  .voet-rij{grid-template-columns:repeat(2,1fr)}
  .voet-rij>:first-child{grid-column:1/-1}
}
@media (max-width:44rem){
  :root{--t-4xl:2.5rem;--t-3xl:2rem;--t-2xl:1.5rem;--r-7:2.5rem;--r-8:3.5rem}
  .held-rij{grid-template-columns:1fr}

  .k2,.k3{grid-template-columns:1fr}
  .contact-rooster{grid-template-columns:1fr}
  .contact-rooster>:nth-child(2){grid-column:1;grid-row:auto}
  .beeld-staand img{aspect-ratio:4/3}
  .held .beeld img{max-height:18rem}
  .voet-rij{grid-template-columns:1fr;gap:var(--r-3)}
  .voet-rij>:first-child{grid-column:auto}
  .voet h3{margin-bottom:var(--r-1)}
  /* Het motief is op een breed scherm een accent in de marge; op een
     telefoon loopt het onder de tekst door. Daar mag het vervagen. */
  .motief::before{opacity:.28}
  /* De uitsnede uit de flyer is 1 op 4: in een breed vlak blijft er dan
     vooral leegte over. */
  .portret{width:min(100%,12rem);height:16rem}
  .kop{position:static}
  .knoppenrij .knop{flex:1 1 14rem}
}

/* Kaart met de lesplaatsen */
.kaartvlak{border:0;width:100%;aspect-ratio:16/9;border-radius:var(--straal);
  background:var(--sage-300);box-shadow:var(--schaduw)}

/* Compacte held op mobiel: uitleg en knop in het eerste scherm */
@media (max-width:44rem){
  .held{padding-block:var(--r-4) 0}
  .held h1{font-size:2rem;margin-bottom:var(--r-2)}
  .held .lead{font-size:var(--t-m);margin-bottom:var(--r-3)}
  .portret{height:15rem;justify-self:start;margin-top:var(--r-3)}
  .onder-held{margin-top:var(--r-3);padding-bottom:var(--r-4);gap:var(--r-2) var(--r-3)}
  /* Hamburgermenu: de kop blijft laag genoeg om de kern in beeld te laten.
     Het vakje zelf is onzichtbaar en vangt geen tikken; het label doet het
     werk, en de focusrand van het vakje verschijnt op dat label. */
  .menu-schakel{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
  /* De hamburger staat helemaal rechts; dat is waar iedereen hem zoekt. */
  .hamburger{display:inline-flex;align-items:center;gap:0.5rem;order:3;
    min-height:44px;padding:0 var(--r-3);background:var(--paper);color:var(--ink);
    border:2px solid var(--ink);border-radius:var(--straal-s);
    font-family:Poppins,sans-serif;font-size:var(--t-s);font-weight:600;cursor:pointer}
  .menu-schakel:focus-visible+.hamburger{outline:3px solid var(--ink);outline-offset:3px}
  .strepen{position:relative;display:block;width:1.15rem;height:2px;background:currentColor}
  .strepen::before,.strepen::after{content:"";position:absolute;left:0;
    width:100%;height:2px;background:currentColor}
  .strepen::before{top:-6px}
  .strepen::after{top:6px}
  .merk{margin-right:auto;font-size:1.3rem}
  .bliksem{width:22px;height:22px}
  /* Het menu klapt onder de kop open en vraagt daarvoor een eigen regel.
     Met `nowrap` bleef het op dezelfde regel staan als het logo en viel het
     half buiten beeld. Logo, Bel en Menu passen samen op de eerste regel —
     het logo krimpt desnoods mee (min-width:0). */
  /* Logo, knop en hamburger moeten samen op één regel passen tot 360 px:
     dat is 305 px bruikbare breedte, en de drie samen zijn er net 298. Elke
     marge die hier groeit, duwt de hamburger naar een tweede regel. */
  .kop-rij{min-height:0;padding-block:0.25rem;gap:0.375rem;flex-wrap:wrap}
  .merk{min-width:0}
  /* Logo, Bel en Menu horen samen op één rij te passen. Het nummer kost
     daar te veel breedte; het staat in aria-label, dus een schermlezer
     leest het nog steeds voor. */
  .kop-extra{display:none}
  .kop .knop{padding:0.5rem 0.8rem;order:2;margin-left:0;white-space:nowrap}
  .hamburger{padding:0 0.65rem}
  .kop-rij>nav{order:4;width:100%;display:none}
  .menu-schakel:checked~nav{display:block}
  .menu{flex-direction:column;align-items:stretch;width:100%;margin-left:0;
    gap:0;padding:var(--r-2) 0 var(--r-3)}
  .menu>li+li{border-top:1px solid var(--lijn)}
  .menu a{width:100%;min-height:44px;border-radius:var(--straal-s)}
  /* Over de volle breedte leest een gele onderlijn als scheidingslijn; in
     de uitgeklapte lijst markeren we de huidige pagina daarom met een vlak.
     De tak Aanbod licht hier níet mee op: het submenu staat toch open, en
     twee gemarkeerde regels onder elkaar wijzen nergens meer naar. */
  .menu a[aria-current="page"]{border-bottom-color:transparent;background:var(--sage-100)}
  .menu .tak-actief>a{border-bottom-color:transparent;background:none}
  /* Het rooster heeft drie kolommen; met de ruime celmarge van een breed
     scherm past het net niet op 360 px en moest de tabel schuiven. Smallere
     cellen zijn hier beter dan een schuifbalk. De omhulling blijft staan
     voor het geval een lesnaam ooit langer wordt. */
  /* Net iets kleiner dan de lopende tekst: zo past "Denderhoutem" op 360 px
     naast het uur en de lesnaam, zonder schuifbalk en zonder af te breken. */
  .rooster-tabel{font-size:0.95rem}
  .rooster-tabel th,.rooster-tabel td{padding:0.6rem 0.4rem}
  .rooster-tabel th:first-child,.rooster-tabel td:first-child{padding-left:0.6rem}
  .rooster-tabel th:last-child,.rooster-tabel td:last-child{padding-right:0.6rem}

  /* Het submenu klapt open op een tik, niet op zweven: op een telefoon
     bestaat zweven niet. De link naar Aanbod zelf blijft een link; het
     pijltje ernaast is een apart tikvlak van 56 bij 44 px. */
  .heeft-sub{display:grid;grid-template-columns:1fr auto;align-items:center}
  .heeft-sub>a::after{display:none}
  .heeft-sub>a{grid-column:1}
  .sub-schakel{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
  .sub-knop{display:flex;grid-column:2;align-items:center;justify-content:center;
    width:56px;min-height:44px;cursor:pointer;color:var(--ink-700)}
  .sub-schakel:focus-visible~.sub-knop{outline:3px solid var(--ink);outline-offset:-3px;
    border-radius:var(--straal-s)}
  .pijl{width:.5rem;height:.5rem;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-.12em,-.12em)}
  /* Open: het pijltje wijst omhoog en de tak krijgt een vlak, zodat je ziet
     welk onderdeel openstaat. */
  .sub-schakel:checked~.sub-knop .pijl{transform:rotate(-135deg) translate(-.12em,-.12em)}
  .sub-schakel:checked~.sub-knop{color:var(--ink)}
  .submenu{grid-column:1/-1;position:static;min-width:0;
    padding:0 0 var(--r-2) var(--r-4);background:none;border:0;box-shadow:none}
  /* Zweven bestaat hier niet, maar een muis in de ontwikkelweergave wel: de
     twee regels van de desktop wegen zwaarder dan een kale .submenu en
     zouden het submenu open houden. Daarom dezelfde selectors, hier op
     display:none, met de regel van het aankruisvakje er vlak achter --
     bij gelijke specificiteit wint de laatste. */
  .submenu,.heeft-sub:hover>.submenu,.heeft-sub:focus-within>.submenu{display:none}
  .sub-schakel:checked~.submenu{display:block}
}

/* Hulpklassen — vervangen de inline stijlen in de sjablonen */
/* Tekst die alleen een schermlezer hoort: wel in de boom, niet in beeld. */
.enkel-voorlezen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.midden{text-align:center}
.midden-rij{justify-content:center}
.auto-mid{margin-inline:auto}
.klein{font-size:var(--t-s)}
.lead{font-size:var(--t-l);color:var(--ink-700);max-width:62ch}
.mt-4{margin-top:var(--r-4)}
.mt-5{margin-top:var(--r-5)}
.mb-5{margin-bottom:var(--r-5)}
.mb-6{margin-bottom:var(--r-6)}
.vlak-sage{background:var(--sage-500)}
.held-rij-mid{align-items:center}
.h-m{font-size:var(--t-l)}
.h-s{font-size:var(--t-m);font-weight:600}
.voet-juridisch{display:flex;gap:1rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}
/* Het vinkje naast zijn tekst, niet erboven: `.veld label` en `.veld input`
   zijn specifieker dan een losse klasse, dus die moet mee in de selector. */
.veld .label-vink{display:flex;gap:0.5rem;align-items:flex-start;font-weight:400}
.veld .vinkje-in{width:auto;flex:none;margin-top:0.25rem}

/* Aanraakvlakken: elke link minstens 24 px hoog, knoppen 44 px. */
main p a,main li a,.citaat a,.kaart a:not(.knop){display:inline-block;min-height:26px;padding-block:0.25rem}
.voet p a.knop{margin-top:var(--r-2)}

/* Aanraakvlakken. De ondergrens is 40 x 32 px; knoppen halen 44 px. */
main p a,main li a,.citaat a,.voet a,.kruimels a,
.kaart h3 a,.kaart a:not(.knop){display:inline-block;min-width:40px;min-height:36px;
  padding-block:.5rem;line-height:1.25}
.merk{min-height:44px}
/* De doorverwijslink telt ook mee zodra hij zichtbaar wordt. */
.overslaan{min-height:44px;display:inline-flex;align-items:center}

/* ── Kaarten van het aanbod ───────────────────────────────────────────── */
.dienstkaart h3 a{text-decoration:none}
.dienstkaart h3 a:hover{text-decoration:underline}
.kaart-uit{background:var(--sage-300);border-style:dashed;display:flex;
  flex-direction:column;justify-content:center}

/* ── Genummerde stappen ───────────────────────────────────────────────── */
.stappen{counter-reset:stap;list-style:none;padding:0;display:grid;gap:var(--r-3);
  grid-template-columns:repeat(3,1fr)}
.stappen li{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--straal);
  padding:var(--r-3);margin:0;box-shadow:var(--schaduw)}

/* ── De infovideo op de Boost-pagina ──────────────────────────────────── */
.videovak{position:relative;aspect-ratio:16/9;border-radius:var(--straal);
  overflow:hidden;background:var(--sage-300);box-shadow:var(--schaduw)}
.videovak iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videovak-leeg{display:flex;flex-direction:column;justify-content:center;gap:var(--r-2);
  padding:var(--r-4);text-align:center;border:2px dashed var(--ink);box-shadow:none}
.videovak-leeg p{margin:0;max-width:none}
.videovak-leeg code{background:var(--paper);padding:0 .25rem;border-radius:4px;font-size:.9em}

/* Tekst die Silke nog moet aanleveren. Zichtbaar met opzet: zo gaat een
   plaatshouder niet ongemerkt mee online. */
.vulnog{border-left:4px solid var(--zon);background:var(--sage-100);
  padding:var(--r-2) var(--r-3);border-radius:var(--straal-s);font-size:var(--t-s)}

/* Stappen onder elkaar, voor een kolom die maar half zo breed is. */
.stappen-lijst{grid-template-columns:1fr}

/* Een blok dat de pagina opent: minder lucht eronder dan een volle sectie. */
.kort-blok{padding-block:var(--r-5) var(--r-6)}

@media (max-width:60rem){.stappen{grid-template-columns:1fr}}

/* Wat de zaak doet en waar, boven de titel: binnen vijf seconden duidelijk. */
.kicker{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:var(--t-xs);color:var(--ink);margin-bottom:var(--r-2);font-weight:500}

/* Lokveld tegen spam op het contactformulier: onzichtbaar en niet
   bereikbaar met het toetsenbord, dus een mens vult het nooit in. */
.lokveld{display:none}

/* ── Donkere modus, deel twee ─────────────────────────────────────────────
   De kleuren hierboven komen uit de variabelen en volgen vanzelf. Wat hier
   staat, stuurt componenten bij die in het licht een vaste kleur hebben.
   Dit blok moet áchter die componenten staan: bij gelijke specificiteit
   wint de laatste regel, en anders doet het niets. */
@media (prefers-color-scheme:dark){
  /* Diepblauw op een donkere pagina verdwijnt; de hoofdknop wordt geel. */
  .knop{background:var(--zon);color:#16211d;border-color:var(--zon)}
  .knop:hover{background:var(--zon-diep);color:#16211d}
  .knop-tweede{background:transparent;color:var(--ink);border-color:var(--ink)}
  .knop-tweede:hover{background:var(--ink);color:#16211d}
  /* De inkt is hier licht; geel op licht haalt geen contrast. De zonkop
     houdt daarom haar donkere plaat. */
  .zonkop{background:#16211d;color:var(--zon);box-shadow:0 3px 0 rgba(0,0,0,.45)}
  .rooster-tabel thead th{background:var(--sage-700);color:var(--ink)}
  .dagkop th{background:var(--sage-700)}
  .lint{background:var(--zon);color:#16211d}
  .voet{background:#101a17;color:var(--ink-700)}
  .voet h2,.voet h3,.voet a{color:var(--ink)}
  .voet-slot{border-top-color:rgba(232,241,236,.18)}
  .notitie{background:var(--sage-300);border-left-color:var(--zon)}
  .motief::before{opacity:.12}
  .portret img,.beeld img,.pakket img{filter:brightness(.92)}
  /* De producten en het logo zijn op wit gefotografeerd en diepblauw
     getekend. Zonder plaat eronder verdwijnen ze in een donkere kaart. */
  .boost-logo{background:#fff;border-radius:var(--straal-s);padding:0.3rem 0.5rem}
  /* De kaart van OpenStreetMap blijft licht; iets temperen volstaat, een
     omgekeerde kaart is onleesbaar. */
  .kaartvlak{filter:brightness(.88) contrast(1.04)}
  .videovak-leeg{border-color:var(--sage-900)}
  :focus-visible{outline-color:var(--zon)}
}