/* ------------------------------------------------------------------
   Even-Coaching - Tremelo, Aarschot en verder
   Palet: de huisstijl van de zaak zelf (AV-0002). Donkerblauw #0F3A5F,
   accentroze #E9B8B5, zacht roze #F2CFC5, zacht groen #A7B3A0, en het
   beige dat er al stond. De diepe en lichte varianten hieronder zijn
   diezelfde kleuren, alleen donkerder of lichter gezet waar kleine tekst
   leesbaar moet blijven. De evenwichtslijn is hun logo in beweging:
   een lijn die piekt en daarna vlak wordt.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-latinext.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: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-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: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/karla-latinext.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: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/karla-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;
}

:root {
  --inkt: #0f3a5f;        /* huisstijl: donkerblauw */
  --inkt-diep: #0a2942;   /* hetzelfde blauw, dieper: hero en voettekst */
  --blauw: #1d5c8c;       /* hetzelfde blauw, lichter: links en focus */
  --roze: #e9b8b5;        /* huisstijl: accentroze */
  --roze-zacht: #f2cfc5;  /* huisstijl: zacht roze */
  --roze-diep: #aa414b;   /* accentroze, dieper gezet: leesbaar en nog altijd roze */
  --roze-waas: #f9e5df;   /* accentroze, sterk verdund: hele banden en vlakken */
  --groen: #a7b3a0;       /* huisstijl: zacht groen */
  --groen-diep: #4e5c48;  /* hetzelfde groen, dieper voor tekst en tekens */
  --zand: #f3ebe1;        /* hun bestaande beige, behouden */
  --papier: #fbf8f4;
  --tekst: #2c3244;
  --zacht: #6c6a72;
  --lijn: #e7dcd0;
  --kop: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --max: 1160px;
  --r: 16px;
  --r-groot: clamp(20px, 3.2vw, 34px);
  --schaduw: 0 18px 44px -28px rgba(10, 41, 66, .45);
  /* Sinds de zesde ronde draagt elk vlak een zachte schaduw in rust in plaats
     van enkel een haarlijn. Katrijn schreef dat de dunne omlijning rond het
     CTA-vlak en sommige knoppen "wat vlak" aanvoelt; dit is het antwoord.
     Geen 3D, wel diepte: de schaduw is laag, breed en ver uitgelopen. */
  --schaduw-rust: 0 12px 30px -22px rgba(10, 41, 66, .38);
  --schaduw-diep: 0 26px 58px -32px rgba(10, 41, 66, .46);
  --schaduw-knop: 0 10px 20px -12px rgba(10, 41, 66, .42);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--tekst);
  background: var(--papier);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-optical-sizing: auto;
  color: var(--inkt);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.9vw, 2.5rem); }
h3 { font-size: clamp(1.16rem, 2.1vw, 1.4rem); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
a { color: var(--blauw); }

.wrap { width: min(100% - 2.4rem, var(--max)); margin-inline: auto; }
.smal { width: min(100% - 2.4rem, 760px); margin-inline: auto; }
section { padding: clamp(3.2rem, 7vw, 5.6rem) 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- randen: een gekleurd vlak eindigt niet in een rechte lijn ---------
   Katrijn schreef op 22/09 dat de pagina als opeenvolgende horizontale
   stroken leest: beige vlak, wit vlak, beige vlak, roze vlak. Elke sectie
   met een kleur draagt daarom een vorm aan haar BOVENrand, in haar eigen
   kleur, die in de sectie erboven loopt.

   Alleen de bovenrand, en dat is met opzet: zo hoort bij elke overgang
   precies een vorm, en kunnen twee gekleurde secties nooit twee vormen
   over elkaar leggen. Wil je een gekleurde band met een ronde ONDERkant,
   geef dan de sectie eronder .rand .rand-papier: dan stijgt er een vorm in
   de grondkleur op in die band. Zo werkt de roze reviewband op de homepage.

   ZEVENDE RONDE, 22/09: "de overgangen die je nu maakt lopen niet mooi door.
   er is altijd een fijn lijntje, een licht kleurverschil, een afbeelding dat
   niet doorloopt." Alle drie klopten, en alle drie kwamen ze uit dezelfde
   opzet: de vorm was een LOS blokje dat boven de sectie hing (bottom: 100%),
   in een eigen effen kleur.

     1. het lijntje. Boven en sectie raakten elkaar op een breuk van een
        pixel. Bij 1280 viel dat toevallig goed, bij 1663 niet: dan stond er
        over de volle breedte een rij van een pixel in de kleur van de sectie
        DAARBOVEN tussen de twee in. Meetbaar, niet ingebeeld: zie
        tmp/naad/naadcheck.py, die zoekt een pixel die lichter of donkerder is
        dan zijn buren boven en onder.
     2. het kleurverschil. Het blokje kreeg --randkleur, een effen kleur,
        terwijl .oproep een verloop draagt. Effen naast verloop is altijd een
        rand.
     3. de afbeelding. Op een .beeldband stond in dat blokje enkel het
        donkerblauw; de foto begon pas onder de vorm, met een kaarsrechte
        lijn dwars door de boog.

   Daarom is de vorm nu GEEN los blokje meer. De sectie zelf wordt --randhoog
   hoger (negatieve bovenmarge, evenveel extra bovenpadding, dus de tekst
   blijft staan waar ze stond), en alles wat in die sectie de grond schildert
   krijgt hetzelfde masker: bovenaan de vorm, daaronder een vol vlak. Het is
   dus een en dezelfde verf, een en dezelfde foto, met een stuk uit de bovenrand
   geknipt. Een spleet kan niet meer bestaan, want er is niets meer om tussen
   te vallen.

   Houd de hoogte bescheiden: het stuk boven de grens ligt over de ONDERSTE
   ruimte van de sectie erboven. */
.rand {
  position: relative;
  --randhoog: clamp(1.3rem, 3vw, 2.6rem);
  /* de boog: een halve ellips van rand tot rand, uitgerekt tot --randhoog.
     preserveAspectRatio="none" doet het rekken, zodat dezelfde tekening op
     elke breedte past. */
  --randvorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12A60 12 0 0 1 120 12Z' fill='%23000'/%3E%3C/svg%3E");
  /* De twee lagen van het masker OVERLAPPEN twee pixels, en dat is de hele
     truc. Ze tellen bij elkaar op (mask-composite: add) en lopen niet over
     1 heen, dus een overlap is gratis. Sluiten ze exact op elkaar aan, dan
     zakt de dekking op de naadpixel naar 0,94 doordat de onderrand van de
     tekening zelf al antialiast: over de volle breedte een streepje van de
     kleur eronder. Precies hetzelfde streepje als vroeger, alleen twintig
     keer flauwer. Gemeten op de homepage bij 1280, niet bedacht. */
  --randmasker:
    var(--randvorm) 0 0 / 100% var(--randhoog) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--randhoog) - 2px) / 100% 100% no-repeat;
  margin-top: calc(var(--randhoog) * -1);
  padding-top: calc(var(--koppad, clamp(3.2rem, 7vw, 5.6rem)) + var(--randhoog));
}
.rand::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--randkleur, var(--papier));
  -webkit-mask: var(--randmasker);
          mask: var(--randmasker);
}
/* de foto en de waas van een .beeldband liggen op inset: 0 en vullen dus ook
   het stuk boven de grens: met hetzelfde masker loopt het beeld gewoon door
   tot in de boog, in plaats van eronder te beginnen. */
.rand > .beeldband-beeld, .rand > .beeldband-waas {
  -webkit-mask: var(--randmasker);
          mask: var(--randmasker);
}
/* de inhoud staat boven die grondlaag: allebei geplaatst, en ::before komt
   eerst in de boom. Geen z-index, met opzet, want dan zou de sectie een eigen
   stapelcontext krijgen en kan een paneel dat bewust over de grens zakt
   (.visie-verder-over) niet meer boven de sectie eronder uitkomen. */
.rand > .wrap, .rand > .smal { position: relative; }
/* een schuine overgang in plaats van een boog, voor afwisseling tussen de
   pagina's onderling: de vorm loopt op naar rechts */
.rand-schuin {
  --randhoog: clamp(1.6rem, 3.6vw, 3rem);
  --randvorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12L120 0V12Z' fill='%23000'/%3E%3C/svg%3E");
}
.rand-schuin-links {
  --randhoog: clamp(1.6rem, 3.6vw, 3rem);
  --randvorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0L120 12H0Z' fill='%23000'/%3E%3C/svg%3E");
}
.rand-papier { --randkleur: var(--papier); }
.rand-wit { --randkleur: #fff; }
.rand-hoog { --randhoog: clamp(2rem, 4.6vw, 4rem); }

/* --- een kleurvlak dat NIET over de volle breedte loopt ----------------
   De tweede helft van hetzelfde antwoord: niet elke kleur hoeft een band te
   zijn. Een .vlak is een afgerond paneel binnen de gewone paginabreedte, met
   de grondkleur links en rechts ernaast zichtbaar. */
.vlak {
  border-radius: var(--r-groot);
  padding: clamp(2rem, 4.6vw, 3.4rem) clamp(1.3rem, 3.6vw, 2.8rem);
}
.vlak-roze { background: var(--roze-zacht); }
.vlak-waas { background: var(--roze-waas); }
.vlak-zand { background: var(--zand); }
.vlak-wit { background: #fff; box-shadow: var(--schaduw-rust); }
.vlak-inkt { background: linear-gradient(150deg, var(--inkt) 0%, var(--inkt-diep) 100%); color: #fff; }
.vlak-inkt h2, .vlak-inkt h3 { color: #fff; }
.vlak-inkt p { color: rgba(255,255,255,.88); }
.vlak-inkt .opschrift { color: var(--roze); }

/* --- een foto als achtergrond van een sectie ---------------------------
   "Misschien kunnen we, zoals bij de hero, op sommige plaatsen een
   afbeelding als achtergrond gebruiken in plaats van telkens een effen
   kleurvlak." Dat is dit. Dezelfde opbouw als de hero: beeld, waas, inhoud.
   De waas is diep genoeg voor witte tekst (minstens 4,5) en licht genoeg om
   de ruimte zelf nog te zien. Niet op elke pagina, en nooit twee na elkaar. */
/* GEEN overflow: hidden hier. Het beeld ligt al op inset: 0 en kan dus niet
   uitlopen, terwijl overflow: hidden wel de randvorm van .rand zou wegknippen,
   want die hangt met bottom: 100% BUITEN de sectie. */
.beeldband { position: relative; color: #fff; background: var(--inkt-diep); --randkleur: var(--inkt-diep); }
.beeldband-beeld { position: absolute; inset: 0; }
.beeldband-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
/* Staat er een MENS op de achtergrondfoto, dan is de uitsnede geen smaak maar
   inhoud. De 48% hierboven mikt op het midden van een ruimte, en dat is precies
   fout bij een foto van Katrijn: haar gezicht zit op ruim een derde van de
   hoogte, dus hoe breder het scherm, hoe verder haar hoofd boven de bovenrand
   uit schoof. Op de slotoproep van "Wie zijn we" viel het er bij 1491 helemaal
   af. Deze band mikt hoger in het beeld, zodat haar gezicht midden in de band
   staat en er boven haar kruin genoeg lucht overblijft voor de schuine vorm om
   in de achtergrond te knippen in plaats van in haar hoofd. Nagemeten van 390
   tot 2560. */
.beeldband-gezicht .beeldband-beeld img { object-position: center 22%; }
.beeldband-waas {
  position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(10,41,66,.95) 0%, rgba(10,41,66,.89) 42%, rgba(15,58,95,.80) 100%);
}
.beeldband > .wrap, .beeldband > .smal { position: relative; }
.beeldband h2, .beeldband h3 { color: #fff; }
.beeldband p { color: rgba(255,255,255,.88); }
.beeldband .opschrift { color: var(--roze); }
.beeldband .lead { color: rgba(255,255,255,.88); }
.beeldband .scheiding::after { background: var(--roze); }
/* deze drie zetten zelf een tekstkleur en winnen op specificiteit van
   .beeldband p, dus ze staan hier expliciet. Wie een nieuw onderdeel op een
   beeldband zet, controleert eerst of het zijn eigen kleur meebrengt. */
.beeldband .beweging p, .beeldband .spoor p, .beeldband .stroom dd { color: rgba(255,255,255,.86); }
.beeldband .beweging { border-top-color: var(--roze); }
/* En omgekeerd: wat op de beeldband een eigen WITTE bodem heeft, houdt zijn
   eigen tekstkleuren. Zonder deze regel werd de titel van een kaart wit op
   wit en was ze weg (gezien op de eerste schermafbeelding van 22/09). */
.beeldband .kaart h3, .beeldband .kaart h2,
.beeldband .stroom h3, .beeldband .paneel h3, .beeldband .paneel h2,
.beeldband .spoor h3, .beeldband .bouwsteen h3,
.beeldband .locatie h3, .beeldband .artikel h3,
.beeldband .faq summary { color: var(--inkt); }
.beeldband .kaart p, .beeldband .paneel p, .beeldband .bouwsteen p { color: var(--zacht); }
/* en dus ook de knop: het accentroze hoort op het DONKERE vlak, niet op een
   witte kaart die daarop ligt. Roze met blauwe tekst op wit haalt geen 4,5. */
.beeldband .kaart .knop-vol, .beeldband .stroom .knop-vol,
.beeldband .paneel .knop-vol, .beeldband .locatie .knop-vol { background: var(--inkt); color: #fff; }
.beeldband .kaart .knop-vol:hover, .beeldband .stroom .knop-vol:hover,
.beeldband .paneel .knop-vol:hover, .beeldband .locatie .knop-vol:hover { background: var(--inkt-diep); color: #fff; }
/* Een dichtere waas voor een beeld met LEESBARE tekst erop (het whiteboard
   in de oefenruimte). Bij .80 bleef het handschrift meelezen naast de
   lopende tekst; hier zakt het terug tot textuur. */
.beeldband-dicht .beeldband-waas {
  background: linear-gradient(118deg, rgba(10,41,66,.96) 0%, rgba(10,41,66,.93) 45%, rgba(15,58,95,.90) 100%);
}
/* op een smal scherm staat de tekst over de volle hoogte van het beeld, dus
   daar loopt de waas van boven naar onder in plaats van schuin */
@media (max-width: 700px) {
  .beeldband-waas {
    background: linear-gradient(180deg, rgba(10,41,66,.86) 0%, rgba(10,41,66,.92) 55%, rgba(10,41,66,.94) 100%);
  }
}
/* NEGENDE RONDE: een band waar de foto zelf iets zegt. Breaking Even op de
   visiepagina droeg de ruimte in Haasrode onder een waas van .93, en Katrijn
   schreef: "foto achter Breaking-Even is niet duidelijk, kan hier een foto
   staan die balans weergeeft?" De waas is hier dus de donkerblauwe gloed van
   de hero: vol links waar de tekst staat, open rechtsboven waar het beeld
   spreekt, en onderaan weer dicht onder de drie bewegingen.
   Sinds ronde 10 is het beeld breaking-schaduw.jpg (een gespiegelde trap in
   schuin licht, de wandelaar op ongeveer 65% breed); de
   uitsnede houdt de LINKERrand vast, zodat zij naar rechts schuift, weg van
   de tekst, zodra het beeld breder is dan het scherm. */
/* RONDE 15: sinds AV-0005 is het beeld Katrijns eigen breaking-horizon.jpg
   (1342x1172: een donkere wig linksboven, een vrouw klein aan de horizon op
   72% breed en 57% hoog, een vloer die van schaduw naar licht gaat). Met
   cover over de hele sectie werd dat ruim anderhalf keer uitvergroot en viel
   de compositie weg ("kan ze wat meer uitgezoomd?"). Dus nu staat het beeld
   op zijn eigen verhouding, NOOIT bijgesneden: over de volle breedte, en op
   een breed scherm hoogstens 1180 breed tegen de rechterrand, met links het
   donkerblauw van de sectie waar het beeld al donker is. --be-h is de hoogte
   van dat beeld; de drie bewegingen beginnen pas onderaan, waar de waas het
   beeld in het donkerblauw laat overlopen. */
.beeldband-open { --be-h: calc(min(100vw, 1180px) * .8733); }
.beeldband-open .beeldband-beeld img {
  position: absolute; top: 0; right: 0; left: auto;
  width: min(100%, 1180px); height: auto; aspect-ratio: 1342 / 1172; object-fit: cover;
}
/* breder dan het beeld: de linkerrand loopt zacht in het donkerblauw over,
   anders staat er een naad waar de foto begint */
@media (min-width: 1181px) {
  .beeldband-open .beeldband-beeld img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
}
/* RONDE 16 (opmerking admin op v15): het beeld op zijn eigen hoogte liet
   een groot donker gat tussen de inleiding en de bewegingen. Nu bepaalt de
   inhoud de hoogte van de sectie en valt de ONDERkant van het beeld weg, het
   beeld wordt niet kleiner: dezelfde breedte, bovenaan vastgezet (de wig, de
   lucht en de vrouw blijven staan), de bewegingen staan op de vloer. Is de
   sectie toch hoger dan het beeld (smalle tablet), dan vult cover de hoogte. */
@media (min-width: 701px) {
  .beeldband-open .beeldband-beeld { overflow: hidden; }
  .beeldband-open .beeldband-beeld img {
    height: 100%; min-height: 0; aspect-ratio: auto;
    object-fit: cover; object-position: 70% 0;
  }
  .beeldband-open .wrap > .reveal:first-child { max-width: 36rem !important; }
}
.beeldband-open .beeldband-waas {
  background:
    linear-gradient(90deg, rgba(10,41,66,.92) 0%, rgba(10,41,66,.82) 30%, rgba(10,41,66,.3) 56%, rgba(10,41,66,0) 78%);
}
/* tot 1440 breed valt de derde beweging op de lichte vloer: daar zakt de
   onderkant iets in het donkerblauw, pas onder de voeten van de vrouw */
@media (min-width: 701px) and (max-width: 1439px) {
  .beeldband-open .beeldband-waas {
    background:
      linear-gradient(180deg, rgba(10,41,66,0) 0, rgba(10,41,66,0) 74%, rgba(10,41,66,.62) 86%, rgba(10,41,66,.7) 100%),
      linear-gradient(90deg, rgba(10,41,66,.92) 0%, rgba(10,41,66,.82) 30%, rgba(10,41,66,.3) 56%, rgba(10,41,66,0) 78%);
  }
  .beeldband-open .beweging h3, .beeldband-open .beweging p { text-shadow: 0 1px 12px rgba(10,41,66,.55); }
}
/* op een gsm staat de foto BOVEN de tekst, zoals in de hero: het hele beeld
   over de volle breedte, en de tekst begint waar de vloer in het donker
   overloopt */
@media (max-width: 700px) {
  .beeldband-open { --be-h: 87.33vw; }
  .beeldband-open .beeldband-beeld img {
    top: var(--be-top, 4.5rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  }
  .beeldband-open .beeldband-waas {
    background: linear-gradient(180deg, rgba(10,41,66,.1) 0, rgba(10,41,66,.05) calc(var(--be-top, 4.5rem) + var(--be-h) * .6), rgba(10,41,66,.92) calc(var(--be-top, 4.5rem) + var(--be-h) * .9), rgb(10,41,66) calc(var(--be-top, 4.5rem) + var(--be-h)), rgb(10,41,66) 100%);
  }
  .beeldband-open > .wrap { padding-top: max(2rem, calc(var(--be-top, 4.5rem) + var(--be-h) * .84 - var(--koppad) - var(--randhoog, 0px))); }
}

/* --- knoppen ------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .72rem 1.5rem;
  font-family: var(--body); font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.knop:hover { transform: translateY(-1px); }
/* een knop draagt haar eigen schaduw: zonder die schaduw las een pil met een
   lijntje eromheen als een plat vlak op de pagina (opmerking van 22/09) */
.knop-vol { background: var(--inkt); color: #fff; box-shadow: var(--schaduw-knop); }
.knop-vol:hover { background: var(--inkt-diep); box-shadow: 0 16px 28px -14px rgba(10, 41, 66, .5); }
/* op een donker vlak verdwijnt een blauwe knop: daar draagt het accentroze hem */
.hero .knop-vol, .oproep .knop-vol, .beeldband .knop-vol { background: var(--roze); color: var(--inkt); }
.hero .knop-vol:hover, .oproep .knop-vol:hover, .beeldband .knop-vol:hover { background: var(--roze-zacht); color: var(--inkt); }
/* de lijnknop is geen kale omlijning meer: een witte bodem plus dezelfde
   zachte schaduw, zodat hij als knop leest en niet als een leeg kadertje */
.knop-lijn { border-color: rgba(15, 58, 95, .28); color: var(--inkt); background: #fff; box-shadow: var(--schaduw-knop); }
.knop-lijn:hover { background: var(--inkt); color: #fff; border-color: var(--inkt); box-shadow: 0 16px 28px -14px rgba(10, 41, 66, .5); }
.knop-licht { border-color: rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.08); }
.knop-licht:hover { background: #fff; color: var(--inkt); border-color: #fff; }
.knop-klein { min-height: 44px; padding: .55rem 1.15rem; font-size: .95rem; }

.pijl { text-decoration: none; font-weight: 600; color: var(--blauw); display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.pijl::after { content: ''; width: 18px; height: 1.5px; background: currentColor; transition: width .2s; }
.pijl:hover::after { width: 28px; }

.opschrift {
  font-family: var(--body); font-size: .82rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--roze-diep);
  margin: 0 0 .9rem;
}
.opschrift-licht { color: var(--roze); }

/* --- kop van de site ------------------------------------------------ */
.balk {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 248, 244, .93);
  backdrop-filter: blur(9px);
  /* GEEN border-bottom. Die stond in --lijn, een beige, en op de pagina's die
     onder de balk in donkerblauw openen (visie, begeleiding, en elke andere
     .visiekop) lag daar dus een lichte haarlijn op het blauw: precies het
     "fijn lijntje" waar de opmerking van 22/09 over gaat, alleen dan bovenaan
     elke pagina. Een doorschijnend donker streepje past zich wel aan: op
     papier zie je het nauwelijks, op donkerblauw verdwijnt het. */
  box-shadow: 0 1px 0 rgba(15, 58, 95, .07), 0 14px 30px -26px rgba(10, 41, 66, .55);
}
.balk-in { display: flex; align-items: center; gap: 1rem; min-height: 74px; }
.merk { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.merk img { width: 158px; }
.hoofdnav { display: flex; align-items: center; gap: .25rem; }
.hoofdnav a {
  text-decoration: none; color: var(--inkt); font-weight: 500; font-size: .98rem;
  padding: .55rem .68rem; border-radius: 9px; display: inline-flex; align-items: center; min-height: 44px;
}
.hoofdnav a:hover { background: var(--zand); color: var(--blauw); }
.hoofdnav a[aria-current="page"] { color: var(--roze-diep); }
.balk .knop { margin-left: .5rem; }
/* let op de specificiteit: .hoofdnav a (0,1,1) wint van .knop-vol (0,1,0) en zette
   de tekst van de menuknop op inkt, wat op het nieuwe donkerblauw onleesbaar is */
.hoofdnav a.knop-vol, .hoofdnav a.knop-vol:hover { color: #fff; }
.hoofdnav a.knop-lijn { color: var(--inkt); }
.hoofdnav a.knop-lijn:hover { color: #fff; }
/* --- submenu onder Begeleiding ---------------------------------------
   Vier onderliggende paginas. Op een breed scherm klapt het paneel open bij
   hover en bij focus-within, zodat een toetsenbord er zonder extra knop bij
   kan; op een smal scherm staat het gewoon ingesprongen in het burgerpaneel.
   .navgroep rekt over de volle hoogte van de menuregel, anders valt er tussen
   de link en het paneel een gaatje waar de muis doorheen zakt. */
.navgroep { position: relative; display: flex; align-items: center; align-self: stretch; }
.navpijl {
  width: 15px; height: 15px; margin-left: -.25rem; flex: 0 0 auto;
  fill: none; stroke: var(--zacht); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease, stroke .18s ease;
}
.navgroep:hover .navpijl, .navgroep:focus-within .navpijl { transform: rotate(180deg); stroke: var(--roze-diep); }
.navmenu {
  display: none;
  position: absolute; top: 100%; left: -.4rem; z-index: 60;
  min-width: 17.5rem; padding: .45rem;
  background: #fff; border: 1px solid var(--lijn); border-radius: 14px;
  box-shadow: 0 22px 44px -22px rgba(10, 41, 66, .42);
}
.navgroep:hover .navmenu, .navgroep:focus-within .navmenu { display: block; }
/* let op de specificiteit: .hoofdnav a is 0,1,1 en wint anders van .navmenu a */
.hoofdnav .navmenu a { display: block; padding: .62rem .85rem; border-radius: 9px; font-size: .95rem; white-space: nowrap; }
.hoofdnav .navmenu a:hover { background: var(--zand); color: var(--blauw); }
.hoofdnav .navmenu a[aria-current="page"] { color: var(--roze-diep); background: var(--roze-zacht); }

.veni-langs { display: flex; gap: .3rem; }
.veni-langs a { text-decoration: none; color: var(--zacht); font-size: .85rem; font-weight: 700; padding: .3rem .45rem; }
.veni-langs a[aria-current="true"] { color: var(--inkt); }

.burger {
  display: none; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--lijn);
  border-radius: 12px; background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.burger span { display: block; width: 20px; height: 1.8px; background: var(--inkt); position: relative; transition: background .15s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1.8px; background: var(--inkt);
  transition: transform .22s ease, top .22s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* 1120 en niet 1000: sinds de visiepagina erbij kwam telt het menu zeven items
   plus de knop, en dat past niet meer naast het logo op een smalle desktop.
   Wie dit getal wijzigt, wijzigt ook de resize-grens in assets/js/site.js. */
@media (max-width: 1120px) {
  .burger { display: inline-flex; }
  .hoofdnav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--lijn);
    padding: .6rem 1.2rem 1.4rem; box-shadow: var(--schaduw);
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .hoofdnav a { padding: .8rem .4rem; border-radius: 0; border-bottom: 1px solid var(--lijn); font-size: 1.05rem; }
  .hoofdnav .knop { margin: 1rem 0 0; width: 100%; }
  /* het submenu staat hier gewoon ingesprongen open: een tweede dichtklapstand
     in een paneel dat zelf al dichtklapt levert meer fouten op dan ruimte */
  .navgroep { display: block; align-self: auto; }
  /* .hoofdnav a is inline-flex, dus in een blok-navgroep krimpt de link tot haar
     tekst en loopt haar onderlijn niet door zoals bij de andere menu-items */
  .hoofdnav .navgroep > a { display: flex; }
  .navpijl { display: none; }
  .navmenu {
    display: block; position: static; min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .hoofdnav .navmenu a {
    padding: .7rem .4rem .7rem 1.5rem; border-radius: 0; font-size: .99rem;
    color: var(--zacht); white-space: normal; position: relative;
  }
  .hoofdnav .navmenu a::before {
    content: ''; position: absolute; left: .45rem; top: 1.52rem;
    width: 6px; height: 1.6px; background: var(--roze);
  }
  .hoofdnav .navmenu a[aria-current="page"] { background: none; }
  /* pas verbergen wanneer het script echt draait: sterft het, dan blijft het menu bereikbaar */
  html.js-anim .hoofdnav[data-open="nee"] { display: none; }
}

/* --- de evenwichtslijn: hun logo in beweging ------------------------ */
.evenlijn { display: block; width: 100%; height: auto; overflow: visible; }
.evenlijn path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.evenlijn-spoor { stroke: currentColor; stroke-width: 1.6; opacity: .22; }
.evenlijn-actief { stroke: var(--roze); stroke-width: 2.6; }
.evenlijn-stip { fill: var(--roze); }
.scheiding { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.6rem; }
.scheiding::before { content: ''; height: 1.5px; width: 54px; background: var(--roze); }
.scheiding::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--roze-diep); }

/* --- hero ----------------------------------------------------------- */
.hero { position: relative; background: var(--inkt-diep); color: #fff; overflow: hidden; padding: 0; }
.hero-beeld { position: absolute; inset: 0; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.hero-waas {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,41,66,.94) 0%, rgba(10,41,66,.86) 38%, rgba(10,41,66,.52) 66%, rgba(15,58,95,.42) 100%);
}
.hero-in { position: relative; padding: clamp(3.4rem, 8vw, 6.4rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-tekst { max-width: 40rem; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--roze); }
.hero-lead { font-size: clamp(1.04rem, 1.9vw, 1.22rem); color: rgba(255,255,255,.9); max-width: 34rem; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.hero .evenlijn { color: #fff; margin: 1.4rem 0 .2rem; max-width: 34rem; }
.hero-voet {
  position: relative; display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; align-items: center;
  padding: 1.15rem 0; border-top: 1px solid rgba(255,255,255,.2);
}
.hero-voet p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.86); }
.hero-voet strong { color: #fff; font-weight: 600; }
/* Ook op een gsm staat de tekst OP de foto, niet eronder: een foto met een band
   tekst eronder leest als twee losse blokken. De waas draait daarvoor mee van
   staand naar liggend: bovenaan licht, zodat je de ruimte zelf ziet, en naar
   onder toe bijna vol inkt, waar de titel, de tekst en de knoppen staan. */
@media (max-width: 700px) {
  .hero-beeld img { object-position: 60% 38%; }
  .hero-waas {
    background: linear-gradient(180deg,
      rgba(10,41,66,.28) 0%, rgba(10,41,66,.54) 20%,
      rgba(10,41,66,.80) 46%, rgba(10,41,66,.88) 74%, rgba(10,41,66,.91) 100%);
  }
  .hero-in { padding: 8rem 0 1.7rem; }
  .hero-voet { border-top-color: rgba(255,255,255,.24); gap: .8rem 1.6rem; }
}

/* --- visieblok EVEN -------------------------------------------------- */
.visie { background: var(--zand); --randkleur: var(--zand); }
.visie-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.even-lijst { list-style: none; margin: 0; padding: 0; }
.even-lijst li {
  position: relative; padding: .62rem 0 .62rem 2.5rem;
  border-bottom: 1px solid var(--lijn); font-size: 1.06rem;
}
.even-lijst li:last-child { border-bottom: 0; }
.even-lijst li::before {
  content: ''; position: absolute; left: .35rem; top: 1.32rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--groen-diep);
}
/* EVEN staat in het warme roze: Katrijn vroeg het woord telkens te benadrukken */
.even-lijst b { font-family: var(--kop); font-weight: 600; color: var(--roze-diep); letter-spacing: .02em; }
.breaking {
  margin-top: 1.6rem; padding: 1.5rem 1.7rem; background: #fff;
  border-left: 4px solid var(--roze-diep); border-radius: 0 var(--r-groot) var(--r-groot) 0;
  box-shadow: var(--schaduw-diep);
}
.breaking p:last-child { margin-bottom: 0; }

/* --- kop van een binnenpagina ---------------------------------------- */
.paginakop { background: var(--zand); --randkleur: var(--zand); padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(2.2rem, 5vw, 3.4rem); }
.lead { font-size: clamp(1.05rem, 1.9vw, 1.2rem); color: var(--zacht); }
.snelnav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.snelnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.1rem;
  background: #fff; border: 1px solid var(--lijn); border-radius: 999px;
  text-decoration: none; color: var(--inkt); font-size: .95rem; font-weight: 600;
  box-shadow: var(--schaduw-knop);
}
.snelnav a:hover { border-color: var(--roze); color: var(--roze-diep); }

/* --- paneel en stappen ----------------------------------------------- */
.paneel { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--schaduw-rust); }
.paneel-zacht { background: var(--roze-zacht); border-color: transparent; margin-top: 1.6rem; font-size: 1.02rem; box-shadow: none; }
.paneel h3:first-child { margin-top: 0; }
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; }
.stappen li { counter-increment: stap; position: relative; padding: 0 0 1.15rem 3rem; }
.stappen li:last-child { padding-bottom: 0; }
.stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: .1rem;
  width: 32px; height: 32px; border-radius: 50%; background: var(--roze-zacht);
  color: var(--inkt); font-family: var(--kop); font-weight: 600; font-size: 1rem;
  display: grid; place-items: center;
}
.stappen li::after {
  content: ''; position: absolute; left: 15.5px; top: 2.4rem; bottom: .55rem; width: 1px; background: var(--lijn);
}
.stappen li:last-child::after { display: none; }
.stappen b { display: block; color: var(--inkt); font-weight: 700; font-size: 1.02rem; }
.stappen span { display: block; color: var(--zacht); font-size: .98rem; line-height: 1.6; }
.vinkjes { list-style: none; padding: 0; margin: 0; }
.vinkjes li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
.vinkjes li::before {
  content: ''; position: absolute; left: .25rem; top: .48rem; width: 9px; height: 15px;
  border: solid var(--groen-diep); border-width: 0 2px 2px 0; transform: rotate(42deg);
}

/* --- kaarten -------------------------------------------------------- */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 1.4rem; }
/* Vier kaarten vielen met auto-fit als 3 + 1 uit elkaar, met dat ene weesje
   op de tweede rij. Dezelfde val als bij .bouwstenen-vier, maar deze kaarten
   zijn kort genoeg voor vier kolommen naast elkaar. */
.kaarten-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .kaarten-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kaarten-vier { grid-template-columns: 1fr; } }
.kaart {
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 1.7rem 1.6rem; display: flex; flex-direction: column;
  box-shadow: var(--schaduw-rust);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); border-color: var(--roze); }
/* Een streepje in het warme roze boven de titel, hetzelfde streepje als in
   .scheiding. Katrijn vroeg het roze vaker te voelen; zo staat het op elke
   kaart van de site in plaats van enkel onderaan een pagina. */
.kaart::before {
  content: ''; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--roze-diep); margin: 0 0 1.1rem;
}
.kaart h3 { margin-bottom: .5rem; }
.kaart p { color: var(--zacht); font-size: 1rem; }
.kaart .pijl { margin-top: auto; }
.kaart-merk { width: 42px; height: 42px; border-radius: 12px; background: var(--roze-zacht); display: grid; place-items: center; margin-bottom: 1rem; }
.kaart-merk span { font-family: var(--kop); font-weight: 600; color: var(--inkt); font-size: 1.15rem; }
/* een volle knop onderaan een kaart zakt naar de onderrand, net als de pijl,
   zodat de drie knoppen van een rij op dezelfde lijn staan */
.kaart .knop, .stroom .knop { margin-top: auto; align-self: center; }
/* en ook als de knop in een omhulsel zit (een alinea, of een laag die de
   bewerkmodus eromheen legt): dan zakt dat omhulsel naar de onderrand */
.kaart > :has(> .knop), .stroom > :has(> .knop), .artikel-in > :has(> .pijl) { margin-top: auto; }
/* ronde 10: de knop staat in het MIDDEN van de kaart, ook in een omhulsel */
.kaart > :has(> .knop), .stroom > :has(> .knop) { align-self: stretch; text-align: center; }

/* --- geldstromen ---------------------------------------------------- */
.stroom {
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 1.7rem 1.6rem; display: flex; flex-direction: column;
  box-shadow: var(--schaduw-rust);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.stroom:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); border-color: var(--roze); }
.stroom-badge { height: 52px; width: auto; margin-bottom: 1.1rem; object-fit: contain; object-position: left center; }
/* de kaart zonder logo krijgt hetzelfde hoogteblok, zodat de drie titels op één lijn staan */
.stroom .kaart-merk { width: 52px; height: 52px; margin-bottom: 1.1rem; }
.stroom .kaart-merk span { font-size: 1.4rem; color: var(--inkt); }
/* twee regels hoog, ook als er maar een regel in staat: anders begint de ene
   kaart haar "Voor wie" een regel hoger dan de kaart ernaast */
.stroom-prijs {
  font-family: var(--kop); font-size: 1.5rem; color: var(--groen-diep);
  margin: 0 0 .3rem; font-weight: 600; line-height: 1.18; min-height: 2.36em;
}
/* op een kolom staat er niets naast, dan is die tweede regel alleen een gat */
@media (max-width: 620px) { .stroom-prijs { min-height: 0; } }
.stroom dl { margin: .8rem 0 1.2rem; font-size: .97rem; }
.stroom dt { font-weight: 700; color: var(--inkt); margin-top: .75rem; }
.stroom dd { margin: .1rem 0 0; color: var(--zacht); }
.stroom .pijl { margin-top: auto; }

/* --- quote ---------------------------------------------------------- */
.quote { background: var(--groen); color: var(--inkt); }
.quote blockquote { margin: 0; font-family: var(--kop); font-size: clamp(1.3rem, 3.1vw, 1.95rem); line-height: 1.32; font-weight: 400; }
.quote figcaption { margin-top: 1.3rem; font-size: .98rem; color: var(--inkt); opacity: .82; }
.quote-ster { color: var(--inkt); letter-spacing: .18em; font-size: 1.05rem; margin-bottom: 1rem; }

/* --- reviews: telkens een in beeld, met pijlen en bolletjes ----------
   De reviews staan als gewone blokken in de opmaak. Sterft het script, dan
   staan ze gewoon onder elkaar: drie leesbare quotes is beter dan een leeg
   vak. Pas als het script echt draait (js-anim) wordt er een getoond. */
/* De band staat sinds de vijfde ronde in het zachte roze in plaats van het
   groen, en de witte kaart eronder is weg: Katrijn schreef dat ze geen fan
   was van dat witte blok, en dat ze donkerblauw, zachtroze en beige meer
   met elkaar wil zien spelen. De quote staat nu rechtstreeks op de band,
   met een groot aanhalingsteken als watermerk erachter. Het groen bleef als
   accent (iconen, bolletjes, vinkjes, tarieven). */
.reviews { background: var(--roze-zacht); --randkleur: var(--roze-zacht); color: var(--inkt); }
.reviews .opschrift { color: var(--inkt); }
.reviews h2 { color: var(--inkt); }
.review-kader { position: relative; margin-top: 1.4rem; }
.review-spoor { display: grid; gap: 1.2rem; }
.review {
  margin: 0; background: transparent; border-radius: 0; box-shadow: none;
  padding: clamp(.6rem, 2vw, 1.2rem) clamp(.4rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
/* Het aanhalingsteken loopt mee in de tekststroom in plaats van absoluut
   bovenaan te hangen: de quotes liggen op elkaar in een rastervak en staan
   verticaal gecentreerd, dus een vast anker zou bij een korte quote losraken.
   Groot, licht en decoratief, dus geen contrasteis. */
.review::before {
  content: '\201C'; display: block; font-family: var(--kop); font-weight: 600;
  font-size: clamp(3.8rem, 7vw, 5.2rem); line-height: .52;
  color: #fff; opacity: .8; margin: 0 0 .1rem;
}
/* Zodra het script draait liggen de drie quotes op elkaar in een enkel
   rastervak. Zo is het blok altijd zo hoog als de langste review en springt
   de pagina niet bij elke wissel. De verborgen quotes dragen aria-hidden,
   dus de scrollcheck slaat ze terecht over. */
/* Zonder witte kaart wordt die hoogte zichtbaar als leeg roze: de langste
   review liet ruim honderd pixels boven en onder een korte quote staan.
   Daarom bepaalt de ACTIEVE quote de hoogte en liggen de andere er absoluut
   onder, buiten de stroom. site.js laat het verschil in een derde seconde
   mee groeien of krimpen, zodat de pagina alsnog niet verspringt. */
/* ZESDE RONDE: een echte carrousel in plaats van een tekstwissel.
   "De sliderfunctie is goed, maar qua vormgeving voelt het nu nog vrij
   statisch omdat enkel de tekst wisselt en de compositie hetzelfde blijft.
   Graag ... een stukje van de vorige en volgende review zichtbaar maken."

   De drie quotes liggen dus niet meer op elkaar maar naast elkaar op een
   spoor dat schuift. De actieve staat vol en op ware grootte in het midden,
   de buren steken links en rechts uit het venster, lichter en iets kleiner.
   Zo zie je in een oogopslag dat er meer dan een review is, en zie je de
   wissel ook echt gebeuren.

   De buren dragen aria-hidden (site.js), want voor een schermlezer is er
   maar een actieve quote; de scrollcheck slaat ze daardoor terecht over. */
.review-kader[data-slider="aan"] .review-venster { overflow: hidden; }
.review-kader[data-slider="aan"] .review-spoor {
  display: flex; position: relative; gap: clamp(.7rem, 2.2vw, 1.6rem);
  /* bovenaan uitlijnen, niet strekken: zo beginnen het aanhalingsteken, de
     sterren en de tekst van elke quote op dezelfde hoogte, en valt de
     lege ruimte van een korte quote onderaan in plaats van er rond */
  align-items: flex-start;
  transition: transform .55s cubic-bezier(.33, .02, .2, 1);
}
.review-kader[data-slider="aan"] .review {
  flex: 0 0 var(--reviewbreed, 62%);
  opacity: .32; transform: scale(.93);
  transition: opacity .45s ease, transform .45s ease;
}
.review-kader[data-slider="aan"] .review[data-actief="ja"] { opacity: 1; transform: none; }
/* op een gsm is 62% te smal om te lezen: daar steekt er net een rand van de
   buren uit, genoeg om te tonen dat er meer is */
@media (max-width: 700px) {
  /* 78 en niet 84: bij 84% is de uitstekende rand zo smal dat je alleen de
     marge van de buurkaart ziet en niet haar tekst, en dan lijkt het weer
     een enkele quote. De tekst mag hier ook dichter bij de rand staan. */
  .review-kader[data-slider="aan"] { --reviewbreed: 78%; }
  .review-kader[data-slider="aan"] .review { padding-left: .5rem; padding-right: .5rem; }
}
/* NEGENDE RONDE: een volle getuigenis in het midden, zonder de randjes van
   de vorige en de volgende ("liever een volledige getuigenis centraal, maar
   wel duidelijk dat het een slider is"). Het venster is een leesbreedte
   breed en elke quote vult het helemaal, dus de buren liggen volledig buiten
   beeld. Het schuiven zelf blijft, net als de pijlen, bolletjes en teller.
   Verticaal gecentreerd: het venster is zo hoog als de langste quote, en een
   korte staat dan in het midden in plaats van bovenaan met een gat eronder. */
.review-kader[data-slider="aan"] .review-venster { max-width: 50rem; margin-inline: auto; }
.review-kader[data-slider="aan"] { --reviewbreed: 100%; }
.review-kader[data-slider="aan"] .review-spoor { align-items: center; }
.review-kader[data-slider="aan"] .review { opacity: 0; transform: none; }
.review-kader[data-slider="aan"] .review[data-actief="ja"] { opacity: 1; }
@media (max-width: 700px) {
  .review-kader[data-slider="aan"] { --reviewbreed: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .review-kader[data-slider="aan"] .review-spoor,
  .review-kader[data-slider="aan"] .review { transition: none; }
}
/* de teller naast de pijlen: nog een manier om te tonen dat er meerdere zijn */
.review-teller {
  font-family: var(--kop); font-weight: 600; color: var(--inkt);
  font-size: .98rem; letter-spacing: .08em; min-width: 4.4rem; text-align: center;
}
.review-teller b { font-weight: 600; }
.review-teller span { opacity: .5; }
.review-ster { color: var(--roze-diep); letter-spacing: .18em; font-size: 1rem; margin: 0 0 .9rem; }
.review blockquote {
  margin: 0; font-family: var(--kop); font-weight: 400; color: var(--inkt);
  font-size: clamp(1.06rem, 1.75vw, 1.28rem); line-height: 1.55;
}
/* de naam staat op de roze band, dus in donkerblauw: het warme roze haalt
   daar geen 4,5 op deze grond en een naam is gewone tekst, geen versiering */
.review figcaption { margin-top: 1.2rem; font-size: .95rem; font-weight: 700; color: var(--inkt); }
.review-stuur { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.6rem; }
.review-pijl {
  width: 46px; height: 46px; flex: 0 0 46px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--inkt); background: transparent; color: var(--inkt);
  display: grid; place-items: center; transition: background-color .2s, color .2s;
}
.review-pijl:hover { background: var(--inkt); color: #fff; }
.review-pijl svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.review-bollen { display: flex; gap: .5rem; align-items: center; }
.review-bol {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.review-bol::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--inkt); opacity: .35; transition: opacity .2s, transform .2s;
}
.review-bol[aria-current="true"]::before { opacity: 1; transform: scale(1.35); }
/* vanaf vijf reviews past pijl, bolletjes, teller en pijl niet meer op 390:
   de pijlen vielen over de rand. Op een smal scherm tellen de bolletjes al. */
@media (max-width: 560px) {
  .review-teller { display: none; }
  .review-bollen { gap: 0; }
  .review-stuur { gap: .5rem; }
}

/* --- twee kolommen met beeld ---------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.duo-omgekeerd .duo-beeld { order: 2; }
.duo-vorm { grid-template-columns: 1.3fr 1fr; align-items: start; }
.duo-beeld img { border-radius: var(--r); box-shadow: var(--schaduw); width: 100%; }
.duo-beeld { position: relative; }
.duo-beeld::after {
  content: ''; position: absolute; right: -14px; bottom: -14px; width: 96px; height: 96px;
  border: 1.5px solid var(--roze); border-radius: var(--r); z-index: -1;
}
/* alleen de kale lijsten in een duo krijgen bollen; .vinkjes en .stappen houden hun eigen teken */
.duo ul:not([class]) { padding-left: 0; list-style: none; margin: 0 0 1.4rem; }
.duo ul:not([class]) li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; }
.duo ul:not([class]) li::before { content: ''; position: absolute; left: 0; top: .68rem; width: 8px; height: 8px; border-radius: 50%; background: var(--groen-diep); }

/* --- opleidingen ---------------------------------------------------- */
.beeldduo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.beeldduo img { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- locaties ------------------------------------------------------- */
.locaties { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; }
.locatie { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--schaduw-rust); }
.locatie img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.locatie-in { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.locatie h3 { margin-bottom: .35rem; }
.locatie address { font-style: normal; color: var(--zacht); margin-bottom: 1rem; }
.locatie .knop { margin-top: auto; align-self: center; }
.locatie-online { background: linear-gradient(150deg, var(--inkt) 0%, var(--inkt-diep) 100%); color: #fff; border-color: transparent; }
.locatie-online h3 { color: #fff; }
.locatie-online address, .locatie-online p { color: rgba(255,255,255,.85); }
/* de onlinekaart loopt over de volle breedte, zodat de laatste rij van het
   raster niet met een enkele smalle kaart eindigt */
.locaties .locatie-online { grid-column: 1 / -1; }
.locatie-online .locatie-in {
  padding: 1.9rem 1.7rem 2rem;
  display: grid; grid-template-columns: minmax(200px, 19rem) 1fr; gap: .4rem 2.6rem; align-items: start;
}
.locatie-online p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .locatie-online .locatie-in { grid-template-columns: 1fr; gap: .9rem; }
}
/* de kaart zonder kaartje: een plaats waar een coach van het collectief zit */
.locatie-plat .locatie-in { padding-top: 1.7rem; }
.locatie-plat .plaatsteken {
  width: 40px; height: 40px; border-radius: 50%; background: var(--roze-zacht);
  display: grid; place-items: center; margin-bottom: .9rem;
}
.locatie-plat .plaatsteken svg { width: 19px; height: 19px; fill: none; stroke: var(--inkt); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --- iconen: lijntekeningen in een rondje, in hun eigen kleuren -------- */
.icoon {
  width: 62px; height: 62px; border-radius: 50%; background: var(--roze-zacht);
  display: grid; place-items: center; margin-bottom: 1.1rem; flex: 0 0 62px;
}
.icoon svg { width: 30px; height: 30px; fill: none; stroke: var(--inkt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icoon-groen { background: var(--groen); }
.icoon-roze { background: var(--roze); }
.icoon-zand { background: var(--zand); }
.icoon-klein { width: 48px; height: 48px; flex-basis: 48px; margin-bottom: .9rem; }
.icoon-klein svg { width: 23px; height: 23px; }

/* --- visiepagina ------------------------------------------------------ */
.visiekop { background: linear-gradient(150deg, var(--inkt) 0%, var(--inkt-diep) 100%); --randkleur: var(--inkt); color: #fff; }
.visiekop h1 { color: #fff; }
.visiekop .opschrift { color: var(--roze); }
.visiekop .lead { color: rgba(255,255,255,.88); }
.visiekop-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 3.6rem); align-items: center; }
.visiekop-beeld img { border-radius: var(--r); box-shadow: 0 26px 60px -30px rgba(0,0,0,.7); width: 100%; }
.visiekop .evenlijn { color: #fff; margin: 1.2rem 0 .4rem; max-width: 30rem; }

/* De drie sporen lopen op als de treden op haar eigen beeld bovenaan deze
   pagina: welzijn onderaan, werkhervatting bovenaan. Dat is enkel een
   uitlijning op een breed scherm; onder 900px staan ze gewoon onder elkaar,
   want een trap van drie stapelt niet. */
.sporen { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.4rem; align-items: start; }
.spoor {
  background: #fff; border: 1px solid var(--lijn); border-top: 3px solid var(--roze);
  border-radius: var(--r); padding: 1.7rem 1.6rem; box-shadow: var(--schaduw-rust);
}
.spoor h3 { margin-bottom: .4rem; }
.spoor p { color: var(--zacht); font-size: 1rem; margin-bottom: 0; }
@media (min-width: 900px) {
  .sporen-trap .spoor:nth-child(1) { margin-top: 3.2rem; }
  .sporen-trap .spoor:nth-child(2) { margin-top: 1.6rem; }
}

/* de drie bewegingen van Breaking Even, als een rij met een lijn erdoor */
.bewegingen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; margin-top: 2.4rem; }
.beweging { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--roze); }
/* het cijfer stond op .55 doorzichtigheid en verdween daardoor half in de
   beige grond; nu vol in het warme roze, in een zacht roze schijf */
.beweging .nummer {
  font-family: var(--kop); font-size: 1.42rem; font-weight: 600; color: var(--roze-diep);
  width: 52px; height: 52px; border-radius: 50%; background: var(--roze-zacht);
  display: grid; place-items: center; line-height: 1; margin: 0 0 .8rem;
}
.beweging h3 { margin-bottom: .45rem; }
.beweging p { color: var(--zacht); font-size: 1rem; margin-bottom: 0; }

.bouwstenen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
/* vier blokken vallen met auto-fit als 3 + 1 uit elkaar, en dat weesje op de
   laatste rij is precies wat een raster lelijk maakt: twee bij twee dus */
.bouwstenen-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .bouwstenen-vier { grid-template-columns: 1fr; } }
.bouwsteen {
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.6rem 1.5rem;
  box-shadow: var(--schaduw-rust);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.bouwsteen:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); border-color: var(--roze); }
.bouwsteen h3 { font-size: 1.14rem; margin-bottom: .4rem; }
.bouwsteen p { color: var(--zacht); font-size: .99rem; margin-bottom: 0; }
/* de vier stappen van het OCMW-traject: het cijfer groot in het huisstijlblauw,
   en lucht tussen de inleidende zin en de opsomming (vraag klant, AV-0007) */
.bouwstenen-stappen .nummer {
  font-family: var(--kop); font-size: 2.3rem; font-weight: 600; line-height: 1;
  color: var(--inkt); margin: 0 0 .7rem; letter-spacing: .01em;
}
.bouwstenen-stappen .bouwsteen p + .vinkjes { margin-top: 1rem; }
.bouwstenen-stappen .vinkjes + .kern { margin-top: 1.1rem; }

/* --- de bouwstenen als lijst, niet als raster -------------------------
   "De kaarten op zich vind ik mooi. Maar het is omdat er bovenaan al drie
   kaarten staan, dat het verderop wat repetitief begint te voelen.
   Misschien kan dezelfde inhoud en dezelfde icoonstijl hier op een andere
   manier gepresenteerd worden."

   Dus: dezelfde zes teksten en dezelfde iconen, maar zonder kader. Het icoon
   staat naast de tekst in plaats van erboven, er loopt een haarlijn tussen de
   items, en de tweede kolom staat een stuk lager dan de eerste. Die verschuiving
   is wat het uit het raster haalt; ze gebeurt met transform, dus de lijnen
   blijven netjes uitgelijnd binnen hun eigen kolom. Onder 860px staat alles
   gewoon onder elkaar. */
.stenenlijst {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 5vw, 4.4rem);
}
.steen {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 1.15rem;
  align-items: start; padding: 1.45rem 0;
  border-bottom: 1px solid rgba(15, 58, 95, .15);
}
.steen .icoon { width: 54px; height: 54px; flex-basis: 54px; margin: 0; grid-row: span 2; align-self: start; }
.steen .icoon svg { width: 25px; height: 25px; }
.steen h3 { font-size: 1.12rem; margin: .35rem 0 .35rem; }
.steen p { color: var(--inkt); opacity: .8; font-size: .99rem; margin: 0; }
@media (min-width: 861px) {
  /* de rechterkolom zakt een halve stap: zo leest het als twee lopende
     lijsten naast elkaar in plaats van als zes vakjes in een raster */
  .stenenlijst > .steen:nth-child(even) { transform: translateY(2.6rem); }
  .stenenlijst { padding-bottom: 2.6rem; }
  .stenenlijst > .steen:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 860px) {
  .stenenlijst { grid-template-columns: 1fr; }
  .stenenlijst > .steen:last-child { border-bottom: 0; }
}

/* --- een foto met een gekleurd vlak erachter --------------------------
   Diepte zonder extra elementen op de pagina: het vlak steekt links boven
   de foto uit en brengt meteen wat roze midden op de pagina. */
.beeld-omlijst { position: relative; }
.beeld-omlijst::before {
  content: ''; position: absolute; z-index: 0;
  left: clamp(-1.6rem, -2.4vw, -1rem); top: clamp(-1.6rem, -2.4vw, -1rem);
  width: 62%; height: 62%;
  background: var(--roze-zacht); border-radius: var(--r-groot);
}
.beeld-omlijst img { position: relative; z-index: 1; border-radius: var(--r-groot); }
/* het oude kadertje rechtsonder (.duo-beeld::after) vervalt hier: twee
   versieringen rond een foto is er een te veel, en die twee raakten elkaar.
   In een gekleurd .vlak valt datzelfde kadertje sowieso weg tegen de grond,
   en het las daar als een streepje langs de foto. */
.beeld-omlijst::after, .vlak .duo-beeld::after { display: none; }
@media (max-width: 560px) { .beeld-omlijst::before { display: none; } }

/* het strookje onder het EVEN-blok op de homepage en onder de drie sporen
   op de visiepagina. Katrijn vond de tekst hoog en links in een groot wit
   vlak hangen, met de knop er los naast. Daarom: een warm roze paneel,
   alles gecentreerd, en de knop vlak onder de zin in plaats van ernaast. */
/* Zesde ronde: "CTA knop roze past niet op achtergrond", met een
   schermafbeelding van precies dit blok. Het was een heel bleek roze
   (--roze-waas) met een haarlijntje eromheen, op een beige grond: twee
   tinten die nauwelijks verschillen, met een lijn ertussen. Dat leest als
   een leeg kader in plaats van als een vlak.
   Nu: het echte zachtroze uit hun huisstijl, geen omlijning, een ruime
   hoekafronding en een zachte schaduw eronder. Zo staat het blok OP de
   pagina in plaats van erin uitgesneden, en dat is meteen het antwoord op
   "de dunne omlijning voelt wat vlak, dit mag iets zachter en moderner". */
.visie-verder {
  margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(2rem, 4.4vw, 3rem) clamp(1.5rem, 4vw, 2.8rem);
  background: var(--roze-zacht); border: 0; border-radius: var(--r-groot);
  box-shadow: var(--schaduw-diep);
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center;
}
.visie-verder p { margin: 0; font-family: var(--kop); font-size: clamp(1.12rem, 2.2vw, 1.42rem); color: var(--inkt); line-height: 1.35; max-width: 36rem; }
.visie-verder .knop { flex: 0 0 auto; }
/* op een zachtroze grond zou hetzelfde roze verdwijnen: daar staat het blok in wit */
.band-roze .visie-verder, .vlak-roze .visie-verder { background: #fff; }
/* Overlappen: het blok zakt over de grens met de sectie eronder heen, zodat
   de twee vlakken in elkaar haken in plaats van tegen elkaar te liggen.
   De sectie eronder draagt dan .na-overlap voor de extra kopruimte. */
.visie-verder-over { margin-bottom: calc(clamp(2rem, 5vw, 3.6rem) * -1); position: relative; z-index: 3; }
/* De sectie laat haar onderpadding vallen, anders zakt het paneel alleen in
   de eigen marge van die sectie en steekt het nergens uit. Die ene pixel is
   GEEN slordigheid: met padding-bottom 0 klapt de negatieve marge van het
   paneel samen met de marge van de sectie zelf, en dan wordt de sectie
   HIERONDER omhooggetrokken in plaats van het paneel eruit te laten steken.
   Een greintje onderpadding breekt dat samenklappen. */
.sectie-zonder-voet { padding-bottom: 1px; }
/* --koppad in plaats van padding-top, want een .rand-sectie telt haar eigen
   randhoogte bij die waarde op. Zet je hier gewoon padding-top, dan wint deze
   regel (ze staat later) en zakt de vorm over de tekst. */
.na-overlap { --koppad: clamp(5.2rem, 11vw, 8.6rem); padding-top: calc(var(--koppad) + var(--randhoog, 0px)); }

/* --- de diepe paginas onder Begeleiding ------------------------------
   Katrijn vond de begeleidingspagina "te grijs en sober" en vroeg om meer
   donkerblauw en roze, en om vaker een visual die de inhoud draagt. Deze
   drie bouwstenen zijn daarvoor, en ze staan hier zodat de vier paginas
   onder Begeleiding er als een geheel uitzien. */

/* een kop in donkerblauw, zonder beeld ernaast (met beeld: .visiekop-raster) */
/* .snelnav a draagt een witte achtergrond en donkerblauwe tekst; op de donkere
   kop wordt dat een witte pil met onzichtbare tekst, dus alle drie omzetten */
.visiekop .snelnav a {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .92);
}
.visiekop .snelnav a:hover { background: rgba(255, 255, 255, .18); border-color: var(--roze); color: var(--roze); }

/* een zachtroze band, als derde grondtoon naast het beige van .visie en het
   donkerblauw van .oproep: zo wisselt een lange pagina van kleur */
.band-roze { background: var(--roze-zacht); --randkleur: var(--roze-zacht); }
.band-roze .kaart, .band-roze .paneel { border-color: rgba(15, 58, 95, .12); }
.band-roze .bouwsteen { border-color: transparent; }

/* de beeldspraak: een tekening die de tekst draagt, met de uitleg ernaast.
   De "bal onder water" was hiervan de eerste, en zij vroeg om meer. */
.beeldspraak {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 3rem); align-items: center;
  margin: 0; padding: clamp(1.6rem, 3.4vw, 2.4rem);
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-groot);
  box-shadow: var(--schaduw-rust);
}
.beeldspraak-donker { background: linear-gradient(150deg, var(--inkt) 0%, var(--inkt-diep) 100%); border-color: transparent; color: #fff; }
.beeldspraak-donker h3 { color: #fff; }
.beeldspraak-donker p { color: rgba(255, 255, 255, .88); }
.beeldspraak figcaption { margin: 0; }
.beeldspraak h3 { margin: 0 0 .6rem; }
.beeldspraak p:last-child { margin-bottom: 0; }
.beeldspraak svg { display: block; width: 100%; height: auto; }
.beeldspraak-fig { background: var(--zand); border-radius: 13px; padding: 1.1rem; }
.beeldspraak-donker .beeldspraak-fig { background: rgba(255, 255, 255, .07); }
/* NEGENDE RONDE: twee tekeningen naar de werkbladen die Katrijn zelf gebruikt
   (Stresszones en Batterijen), in het palet van de site en geen kopie van
   het blad. De batterijen laden zich op zodra de figuur in beeld komt; zonder
   script, in een schermafbeelding en bij minder beweging staan ze gewoon vol.
   De zichtbaar-regel is even specifiek als de verborgen, zie de reveal-regel. */
.batterijen .lading { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.6s cubic-bezier(.3, .1, .2, 1) .25s; }
html.js-anim:not([data-veni-shot]) .batterijen .lading { transform: scaleY(0); }
.batterijen.in .lading,
html.js-anim:not([data-veni-shot]) .batterijen.in .lading { transform: none; }
.band-roze .beeldspraak { border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .batterijen .lading, html.js-anim:not([data-veni-shot]) .batterijen .lading { transform: none; transition: none; }
  .zones .zone-stip { display: none; }
}

/* een langere vinkjeslijst in kolommen; grid en geen columns, want een
   li met een absoluut geplaatst vinkje mag niet over een kolomrand breken */
.signalenlijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: .15rem 2.2rem; }

/* --- vraag en antwoord ------------------------------------------------
   Native <details>, dus geen script: valt dat weg, dan staat er nog altijd
   een lijst met vragen die opengaan. Een gesloten antwoord is display:none
   en telt dus niet mee als onzichtbare inhoud in beeld. */
.faq { display: grid; gap: .8rem; }
.faq details {
  background: #fff; border: 1px solid var(--lijn); border-radius: 13px;
  padding: 0 clamp(1.1rem, 2.4vw, 1.5rem); box-shadow: var(--schaduw-rust);
}
.faq details[open] { border-color: var(--roze); box-shadow: var(--schaduw-diep); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.05rem 2.4rem 1.05rem 0; min-height: 44px;
  font-family: var(--kop); font-weight: 600; font-size: 1.06rem; color: var(--inkt);
  display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .2rem; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--roze-diep); border-bottom: 2px solid var(--roze-diep);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.faq-in { padding: 0 0 1.2rem; border-top: 1px solid var(--lijn); }
.faq-in p { margin: 1rem 0 0; color: var(--zacht); }
.faq-in p:first-child { margin-top: 1rem; }
.faq-in ul { margin: .9rem 0 0; padding-left: 0; }

@media (max-width: 760px) {
  .beeldspraak { grid-template-columns: 1fr; }
}

/* --- collectief ----------------------------------------------------- */
.coaches { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.4rem; }
.coach-plaats {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-size: .9rem; font-weight: 700; color: var(--inkt);
  background: var(--zand); border-radius: 999px; padding: .3rem .8rem;
}
.regios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem 2rem; margin: 0; padding: 0; list-style: none; }
.regios > li { border-top: 2px solid var(--roze); padding-top: .9rem; }
.regios h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.regios p { color: var(--zacht); font-size: .97rem; margin: 0; }
.coach { display: grid; grid-template-columns: 96px 1fr; gap: 1.3rem; align-items: start;
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.5rem; box-shadow: var(--schaduw-rust); }
.coach-plek {
  width: 96px; height: 96px; border-radius: 50%; background: var(--roze-zacht);
  display: grid; place-items: center; font-family: var(--kop); font-size: 1.9rem; color: var(--inkt); font-weight: 600;
}
.coach h3 { margin-bottom: .15rem; }
.coach .rol { color: var(--roze-diep); font-weight: 700; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .7rem; }
.kern {
  font-family: var(--kop); font-size: 1.02rem; color: var(--groen-diep);
  letter-spacing: .04em; font-weight: 600; margin: .6rem 0 0;
}
.coach .kern { font-size: .9rem; margin: .6rem 0 0; }
.coach img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

/* --- blog ----------------------------------------------------------- */
/* auto-fill, niet auto-fit: met een enkel artikel blijft de kaart smal in plaats
   van over de hele breedte uit te rekken */
.artikels { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.4rem; list-style: none; padding: 0; margin: 0; }
.artikel { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--schaduw-rust); transition: transform .22s, box-shadow .22s; }
.artikel:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); }
.artikel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.artikel-in { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.artikel time { font-size: .85rem; color: var(--roze-diep); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.artikel h3 { margin: .5rem 0 .5rem; font-size: 1.22rem; }
.artikel p { color: var(--zacht); font-size: .98rem; }
.artikel .pijl { margin-top: auto; }
/* ronde 15: onder elk artikel een volle knop, gecentreerd en op de onderrand,
   zoals de knoppen van de kaarten onder "Wie betaalt" (vraag van Katrijn) */
.artikel .knop { margin-top: auto; align-self: center; }
.artikel-in > :has(> .knop) { margin-top: auto; align-self: stretch; text-align: center; }
.artikel-in > p:has(+ .knop), .artikel-in > p:has(+ :has(> .knop)) { margin-bottom: 1.2rem; }
.pager { display: flex; gap: .8rem; align-items: center; justify-content: center; margin-top: 2.4rem; }
.pager span { color: var(--zacht); font-size: .95rem; }

/* het artikel zelf */
.post-kop { background: var(--zand); --randkleur: var(--zand); padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.post-beeld img { width: 100%; border-radius: var(--r); margin-bottom: 2rem; max-height: 460px; object-fit: cover; }
.post-body { font-size: 1.07rem; }
.post-body > *:first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.25em; }
.post-body h2 { font-size: clamp(1.35rem, 2.6vw, 1.72rem); margin: 2.1em 0 .55em; }
.post-body h3 { font-size: 1.2rem; margin: 1.8em 0 .5em; }
/* h4 stond er niet, en haar eigen artikels gebruiken hem voor de genummerde stappen:
   zonder deze regel viel hij terug op de basisgrootte en las hij als gewone tekst. */
.post-body h4 { font-size: 1.05em; margin: 1.5em 0 .4em; color: var(--inkt); }
.post-body ul, .post-body ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.post-body li { margin-bottom: .5em; }
.post-body strong { color: var(--inkt); font-weight: 700; }
.post-body em { font-style: italic; }
/* Sinds 10-09-2026 kan er een foto in de lopende tekst staan, en die komt uit
   haar eigen artikels: soms 1200px breed. Zonder deze regel loopt zo'n beeld uit
   haar kolom, en dat is het eerste wat zij ziet terwijl ze in de editor typt. */
.post-body img { max-width: 100%; height: auto; border-radius: var(--r); margin: 2rem 0; }
.post-body figure { margin: 2rem 0; }
.post-body figure img { margin: 0; }
.post-body figcaption { margin-top: .7rem; font-size: .92rem; color: var(--zacht); }
.post-body a { color: var(--blauw); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.post-body a:hover { color: var(--roze-diep); }
/* Een vetgedrukte link is een knop. De editor en de sanitizer laten geen class
   toe, dus het signaal moet iets zijn wat zij zelf kan maken: link zetten, vet
   maken. De eerste knop in een alinea is vol, een tweede ernaast is een lijn. */
.post-body strong > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .72rem 1.5rem; margin: .35rem .5rem .35rem 0;
  font-family: var(--body); font-size: 1rem; font-weight: 600; line-height: 1.25;
  border-radius: 999px; border: 1.5px solid var(--inkt); text-decoration: none;
  background: var(--inkt); color: #fff; box-shadow: var(--schaduw-knop);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.post-body strong > a:hover { background: var(--inkt-diep); border-color: var(--inkt-diep); color: #fff; transform: translateY(-1px); }
.post-body strong + strong > a { background: #fff; color: var(--inkt); border-color: rgba(15, 58, 95, .28); }
.post-body strong + strong > a:hover { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.post-body blockquote {
  margin: 1.8em 0; padding: .2em 0 .2em 1.4em; border-left: 3px solid var(--roze);
  font-family: var(--kop); font-size: 1.16em; color: var(--inkt);
}

/* --- formulier ------------------------------------------------------ */
.formulier { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: clamp(1.5rem, 3.5vw, 2.4rem); box-shadow: var(--schaduw-rust); }
.veld { margin-bottom: 1.15rem; }
.veld label { display: block; font-weight: 600; font-size: .95rem; color: var(--inkt); margin-bottom: .38rem; }
.veld input, .veld select, .veld textarea {
  width: 100%; max-width: 100%; font-family: var(--body); font-size: 1rem; color: var(--tekst);
  padding: .72rem .9rem; min-height: 48px; background: var(--papier);
  border: 1.5px solid var(--lijn); border-radius: 11px;
}
.veld textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--blauw); outline-offset: 1px; border-color: transparent; }
.veld-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding { margin-top: 1rem; padding: .85rem 1.1rem; border-radius: 11px; font-size: .97rem; }
.melding-ok { background: #e8f2ec; color: #1f5b3f; border: 1px solid #bcd9c8; }
.melding-fout { background: #fbeae6; color: #a03d24; border: 1px solid #f0cabf; }
.klein { font-size: .9rem; color: var(--zacht); }

/* --- vertrouwensbalk ------------------------------------------------- */
.labels { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: center; justify-content: center; }
.labels img { max-height: 62px; width: auto; }
/* let op de specificiteit: .labels img wint anders van .labels-cert en het
   certificaat verschrompelt tot badgeformaat */
.labels img.labels-cert { max-height: 172px; border-radius: 8px; border: 1px solid var(--lijn); background: #fff; }

/* --- oproep --------------------------------------------------------- */
/* Het verloop loopt van BOVEN naar ONDER, niet meer schuin. Reden: onder de
   slotoproep staat de voet in het effen --inkt-diep. Een schuin verloop komt
   aan de onderrand links lichter uit dan rechts, en dan ligt er een zichtbare
   horizontale grens tussen oproep en voet. Verticaal eindigt de hele
   onderrand op precies de kleur van de voet, en zie je de grens niet meer. */
.oproep { background: linear-gradient(180deg, var(--inkt) 0%, var(--inkt-diep) 100%); --randkleur: var(--oproepverloop); --oproepverloop: linear-gradient(180deg, var(--inkt) 0%, var(--inkt-diep) 100%); color: #fff; text-align: center; }
.oproep h2 { color: #fff; }
.oproep p { color: rgba(255,255,255,.88); max-width: 40rem; margin-inline: auto; }
.oproep-knoppen { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.7rem; }
/* Een slotoproep met een foto eronder: de tekst staat hier GECENTREERD, dus
   de schuine waas van een gewone beeldband (donker links, lichter rechts)
   zou de zin half op het lichte stuk zetten. Hier dus een gelijkmatige waas
   over het hele beeld. */
.oproep .beeldband-waas {
  background: linear-gradient(160deg, rgba(10,41,66,.93) 0%, rgba(15,58,95,.87) 100%);
}
/* met een foto eronder geen verloop maar het effen donkerblauw: dat is enkel
   de grond ONDER het beeld, de foto en haar waas liggen erover. Het staat als
   --randkleur en niet als background, want de grond van een .rand-sectie
   wordt door haar ::before geschilderd (zie de randen bovenaan dit blad). */
.oproep.beeldband { --randkleur: var(--inkt-diep); }
/* en de foto lost onderaan op in de kleur van de voet, zodat de slotoproep en
   de voet als een vlak lezen in plaats van als twee blauwen tegen elkaar */
.oproep.beeldband .beeldband-waas {
  background:
    linear-gradient(180deg, rgba(10,41,66,0) 62%, var(--inkt-diep) 100%),
    linear-gradient(160deg, rgba(10,41,66,.93) 0%, rgba(15,58,95,.87) 100%);
}

/* --- voet ------------------------------------------------------------ */
.voet { background: var(--inkt-diep); color: rgba(255,255,255,.78); padding: clamp(2.8rem, 6vw, 4rem) 0 2rem; }
.voet-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
.voet h4 { color: #fff; font-family: var(--body); font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 700; }
.voet a { color: rgba(255,255,255,.78); text-decoration: none; }
.voet a:hover { color: var(--roze); }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: .5rem; }
.voet li a { display: inline-flex; align-items: center; min-height: 34px; }
.voet-logo { width: 180px; margin-bottom: 1.2rem; filter: brightness(0) invert(1); opacity: .9; }
.voet address { font-style: normal; }
.voet-slot { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.16); font-size: .87rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; }

/* --- reveal: verborgen ALLEEN wanneer het script echt draait --------- */
html.js-anim:not([data-veni-shot]) .reveal { opacity: 0; transform: translateY(14px); }
.reveal { transition: opacity .6s ease, transform .6s ease; }
.reveal.in,
html.js-anim:not([data-veni-shot]) .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, html.js-anim:not([data-veni-shot]) .reveal { opacity: 1; transform: none; transition: none; }
  .knop:hover, .kaart:hover { transform: none; }
}

/* --- smallere schermen ------------------------------------------------ */
@media (max-width: 860px) {
  .visie-raster, .duo, .veld-duo, .beeldduo, .visiekop-raster { grid-template-columns: 1fr; }
  .duo-omgekeerd .duo-beeld { order: 0; }
  .visie-verder .knop { width: 100%; }
  .voet-raster { grid-template-columns: 1fr 1fr; }
  .voet-raster > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .wrap, .smal { width: min(100% - 1.8rem, var(--max)); }
  .merk img { width: 128px; }
  .hero-knoppen .knop, .oproep-knoppen .knop { width: 100%; }
  .coach { grid-template-columns: 1fr; }
  .coach-plek, .coach img { width: 76px; height: 76px; font-size: 1.5rem; }
  .duo-beeld::after { display: none; }
  .labels img { max-height: 50px; }
  .labels img.labels-cert { max-height: 168px; }
  .voet-raster { grid-template-columns: 1fr; }
}

/* --- ronde 10 (24/09/2026) ------------------------------------------ */
/* Knoppen onder een tekstblok in een kaartachtig vak staan gecentreerd
   (Katrijn: "knoppen in het midden van het kader, doorheen heel de website"). */
.knoppenrij { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.4rem; }
.knoppenrij-links { justify-content: flex-start; }
.paneel > .knop { display: flex; width: fit-content; margin: 1.2rem auto 0; }

/* Signalen in drie groepen: fysiek, mentaal, emotioneel */
.signalen-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.signalen-drie .paneel h3 { font-size: 1.18rem; margin: 0 0 .9rem; display: flex; align-items: center; gap: .6rem; }
.signalen-drie .paneel h3::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--roze-diep); flex: none; }
.signalen-drie .paneel:nth-child(2) h3::before { background: var(--blauw); }
.signalen-drie .paneel:nth-child(3) h3::before { background: var(--groen-diep); }
.signalen-slot { margin: 1.4rem 0 0; font-style: italic; color: var(--inkt); }
@media (max-width: 900px) { .signalen-drie { grid-template-columns: 1fr; } }

/* Zes punten als drie op drie, nooit vier plus twee */
.signalenlijst-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .signalenlijst-drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .signalenlijst-drie { grid-template-columns: 1fr; } }

/* Profielen: grote portretten in plaats van bolletjes */
.profielen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.profiel {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; align-items: start;
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.3rem; box-shadow: var(--schaduw-rust);
}
.profiel-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 13px; display: block; }
.profiel h3 { margin: .3rem 0 .15rem; }
.profiel .rol { color: var(--roze-diep); font-weight: 700; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .7rem; }
.profiel p { color: var(--zacht); font-size: .98rem; }
.profiel .kern { font-size: .92rem; }
.profiel .knoppenrij { justify-content: flex-start; }
@media (max-width: 1080px) { .profielen { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .profiel { grid-template-columns: 1fr; }
  .profiel-foto { max-width: 17rem; margin: 0 auto; width: 100%; }
  .profiel .knoppenrij { justify-content: center; }
}

/* Profielpagina: portret naast de tekst */
.profielkop { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.profielkop-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-groot); box-shadow: var(--schaduw); display: block; }
.profielkop .rollen { list-style: none; padding: 0; margin: .4rem 0 1.2rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.paginakop .coach-plaats { background: #fff; }
.profielkop .rollen li { background: var(--roze-zacht); color: var(--inkt); border-radius: 999px; padding: .3rem .85rem; font-size: .9rem; font-weight: 700; }
.visiekop .profielkop .rollen li { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 800px) {
  .profielkop { grid-template-columns: 1fr; }
  .profielkop-foto { max-width: 17rem; }
}

/* Galerij van opleidingen: vaste tegels van 4:3, drie per rij (twaalf foto's
   = vier volle rijen). Een kolommenraster liet de laatste kolom korter eindigen. */
.galerij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2.2rem 0 0; }
.galerij figure { margin: 0; }
.galerij img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 13px; box-shadow: var(--schaduw-rust); }
@media (max-width: 760px) { .galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }
/* de inleiding boven de galerij in twee blokken, even breed als het raster eronder */
.galerij-tekst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
.galerij-tekst p { margin-top: 0; margin-bottom: 0; }
@media (max-width: 760px) { .galerij-tekst { grid-template-columns: 1fr; gap: 1rem; } }

/* Opleidingen voor de dienstenchequesector: kaart met uitklapbare fiche */
.opleidingen-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
/* zolang alles dicht is, trekt de rij gelijk; gaat een fiche open, dan rekt de buurkaart niet mee */
.opleidingen-lijst:has(details[open]) { align-items: start; }
@media (max-width: 860px) { .opleidingen-lijst { grid-template-columns: 1fr; } }
.opleiding h3 { margin-bottom: .35rem; }
.opleiding .ondertitel { font-weight: 700; color: var(--inkt); font-size: .98rem; }
.opleiding details { margin-top: auto; padding-top: .2rem; border-top: 1px solid var(--lijn); }
.opleiding > p:nth-last-of-type(1) { margin-bottom: 1.2rem; }
.opleiding > .knoppenrij { margin-top: 1.1rem; }
.opleiding summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--blauw); padding: .7rem 0 .2rem;
}
.opleiding summary::-webkit-details-marker { display: none; }
.opleiding summary::after { content: '+'; font-size: 1.3rem; line-height: 1; }
.opleiding details[open] summary::after { content: '−'; }
.opleiding summary:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.fiche { margin: .6rem 0 0; font-size: .95rem; }
.fiche dt { font-weight: 700; color: var(--inkt); margin-top: .8rem; }
.fiche dd { margin: .15rem 0 0; color: var(--zacht); }
.fiche ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.fiche a { color: var(--blauw); font-weight: 700; }
/* AV-0009: wat openklapt staat op een lichtroze grond, los van de korte info erboven */
.opleiding .fiche { background: var(--roze-waas); border-radius: 12px; padding: .3rem 1.1rem 1.1rem; margin-bottom: .6rem; }

/* Stappen en sessies op de OCMW-pagina */
.sessies { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; counter-reset: sessie; }
.sessies li { background: #fff; border-radius: var(--r); padding: 1.3rem 1.2rem; box-shadow: var(--schaduw-rust); counter-increment: sessie; }
.sessies li::before { content: 'Sessie ' counter(sessie); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--roze-diep); margin-bottom: .5rem; }
.sessies b { display: block; font-family: var(--kop); font-size: 1.08rem; color: var(--inkt); margin-bottom: .35rem; }
.sessies span { color: var(--zacht); font-size: .96rem; }
@media (max-width: 1000px) { .sessies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sessies { grid-template-columns: 1fr; } }


/* OCMW-pagina (AV-0007): haar eigen foto als achtergrond van de kop. De foto
   vult de rechterkant, links loopt ze uit in het donkerblauw onder de tekst.
   Op een smal scherm staat ze bovenaan als band en zakt ze onderaan weg. */
.visiekop-foto { position: relative; overflow: hidden; isolation: isolate; padding: clamp(4.2rem, 9vw, 7.4rem) 0; }
.visiekop-achtergrond {
  position: absolute; top: 0; bottom: 0; right: 0; left: 28%; width: 72%; height: 100%;
  object-fit: cover; object-position: 50% 42%; z-index: -2;
}
.visiekop-foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--inkt-diep) 0%, var(--inkt-diep) 28%, rgba(10, 41, 66, .88) 38%, rgba(10, 41, 66, .45) 58%, rgba(10, 41, 66, .12) 80%, rgba(10, 41, 66, .05) 100%);
}
.visiekop-foto .wrap > * { max-width: 34rem; }
.visiekop-foto .lead { text-shadow: 0 1px 12px rgba(10, 41, 66, .6); }
@media (max-width: 760px) {
  .visiekop-foto { padding-top: calc(62vw + 1.6rem); }
  .visiekop-achtergrond { left: 0; width: 100%; height: 66vw; bottom: auto; object-position: 44% 40%; }
  .visiekop-foto::after { background: linear-gradient(180deg, rgba(10, 41, 66, .05) 0, rgba(10, 41, 66, .1) 40vw, var(--inkt-diep) 66vw); }
}

/* de talentenkaarten in de inleiding, boven het paneel "Samen met OCMW's" */
.talentbeeld { margin: 0 0 1.6rem; }
.talentbeeld img { display: block; width: 100%; max-width: 762px; border-radius: var(--r); box-shadow: var(--schaduw); }

/* Dienstenchequesector (AV-0007): per opleiding een lijnillustratie in de
   stijl van de blogbeelden, in de rechterbovenhoek achter de kaart. */
.opleiding { position: relative; overflow: hidden; }
.opleiding > :not(.opl-illu) { position: relative; z-index: 1; }
.opl-illu { position: absolute; top: .5rem; right: .2rem; width: 168px; height: auto; z-index: 0; pointer-events: none; }
.opleiding > h3, .opleiding > .ondertitel { padding-right: 150px; }
@media (max-width: 560px) {
  .opl-illu { width: 112px; top: .4rem; right: 0; }
  .opleiding > h3 { padding-right: 88px; }
  .opleiding > .ondertitel { padding-right: 0; }
}

/* --- ALLERLAATSTE regel van dit blad, en dat is geen toeval -------------
   De grond van een sectie met een gevormde overgang wordt geschilderd door
   haar ::before, met het masker dat de vorm uit de bovenrand knipt. De sectie
   zelf moet dus doorzichtig zijn: schildert ze ook haar eigen rechthoek, dan
   staat die rechthoek gewoon weer in de boog en heb je de rechte lijn terug.

   Deze regel moet daarvoor winnen van .visie, .reviews, .band-roze, .oproep
   en .beeldband, die allemaal verderop in dit blad hun kleur zetten. Ze staat
   daarom achteraan en niet bij de andere .rand-regels. Zet je ergens een
   nieuwe gekleurde sectieklasse bij, geef die dan --randkleur mee (dat is wat
   de ::before leest), niet alleen background. */
section.rand { background: transparent; }

/* --- locaties: vaste kaart met spelden uit de lijst (site.js, kaart) -------------- */
.kaartblok { margin: 2.2rem 0 0; }
.kaart-schuif { border-radius: var(--r); box-shadow: var(--schaduw-rust); border: 1px solid var(--lijn); overflow: hidden; background: #f7f3ec; }
.kaart-vlak { position: relative; }
.kaart-vlak > img { display: block; width: 100%; height: auto; }
.kaart-bron { margin: .5rem 0 0; font-size: .78rem; color: var(--zacht); text-align: right; }
.kspeld {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; background: none; cursor: pointer; display: grid; place-items: center; z-index: 2;
}
.kspeld::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--inkt);
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--inkt), 0 6px 14px -4px rgba(10, 41, 66, .55);
  transition: transform .2s ease, background .2s ease;
}
.kspeld::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--roze); animation: kpuls 2.6s ease-out infinite; pointer-events: none;
}
.kspeld:hover::before, .kspeld:focus-visible::before, .kspeld.aan::before { background: var(--roze-diep); transform: scale(1.18); }
.kspeld:focus-visible { outline: none; }
.kspeld:focus-visible::before { box-shadow: 0 0 0 2px var(--inkt), 0 0 0 5px var(--roze); }
@keyframes kpuls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.kspeld-naam {
  position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%);
  background: var(--inkt); color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: .2rem .55rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.kspeld:hover .kspeld-naam, .kspeld:focus-visible .kspeld-naam { opacity: 1; }
/* de speld onder de muis (met haar naam) boven de buren, maar onder een open ballon (AV-0008) */
.kspeld:hover, .kspeld:focus-visible { z-index: 3; }
.kballon {
  position: absolute; z-index: 3; width: 250px; transform: translate(-50%, calc(-100% - 22px));
  background: #fff; border-radius: 14px; box-shadow: var(--schaduw-diep); padding: 1rem 1.1rem 1.05rem;
}
.kballon::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px;
  background: #fff; transform: rotate(45deg);
}
.kballon.onder { transform: translate(-50%, 22px); }
.kballon.onder::after { bottom: auto; top: -7px; }
.kballon h3 { font-size: 1.12rem; margin: 0 1.8rem .1rem 0; }
.kballon .kplek-regio { margin-bottom: .55rem; }
.kballon a { display: flex; align-items: center; min-height: 40px; font-weight: 600; color: var(--blauw); text-decoration: none; }
.kballon a::after { content: '\2192'; margin-left: .4rem; }
.kballon a:hover { color: var(--inkt); text-decoration: underline; }
.kballon-dicht {
  position: absolute; top: .35rem; right: .35rem; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: none; color: var(--zacht); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.kballon-dicht:hover { background: var(--zand); color: var(--inkt); }
@media (max-width: 760px) {
  .kaart-schuif { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .kaart-vlak { width: 1000px; }
  .kballon { width: 220px; }
}

/* de kaart leeft (site.js zet .kaart-live): inzoomen en verschuiven (AV-0008, derde ronde).
   Het vak houdt de verhouding van de kaart; op smal scherm een vaste hoogte. Zonder script
   blijft alles hierboven gelden: de vaste kaart. */
.kaart-schuif.kaart-live {
  position: relative; overflow: hidden; aspect-ratio: 2534 / 1008; touch-action: pan-y;
  cursor: grab; user-select: none; -webkit-user-select: none; outline: none;
}
.kaart-schuif.kaart-live.ingezoomd { touch-action: none; }
.kaart-schuif.kaart-live.sleept { cursor: grabbing; }
.kaart-schuif.kaart-live:focus-visible { box-shadow: 0 0 0 3px var(--roze), var(--schaduw-rust); }
.kaart-live .kaart-vlak { position: absolute; inset: 0; width: auto; overflow: hidden; }
.kaart-live .kaart-vlak > img { position: absolute; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.kaart-scherp { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.kaart-scherp.geladen { opacity: 1; }
.kaart-scherp img { position: absolute; display: block; max-width: none; }
.kaart-spelden { position: absolute; inset: 0; pointer-events: none; }
.kaart-spelden .kspeld, .kaart-spelden .kballon { pointer-events: auto; cursor: pointer; }
.kaart-spelden .kballon { cursor: auto; }
.kaart-knoppen {
  position: absolute; right: .8rem; top: .8rem; z-index: 4; display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: var(--schaduw-rust); border: 1px solid var(--lijn); overflow: hidden;
}
.kaart-knoppen button {
  width: 44px; height: 44px; border: 0; background: #fff; color: var(--inkt); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.kaart-knoppen button + button { border-top: 1px solid var(--lijn); }
.kaart-knoppen button:hover { background: var(--zand); }
.kaart-knoppen button:focus-visible { outline: 3px solid var(--roze); outline-offset: -3px; }
.kaart-knoppen button:disabled { color: var(--lijn); cursor: default; background: #fff; }
.kaart-knoppen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kaart-hint {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
  background: rgba(10, 41, 66, .45); color: #fff; font-weight: 600; font-size: 1.05rem; text-align: center; padding: 1rem;
  opacity: 0; transition: opacity .25s ease;
}
.kaart-hint.toon { opacity: 1; }
@media (max-width: 760px) {
  .kaart-schuif.kaart-live { aspect-ratio: auto; height: 380px; overflow: hidden; }
  .kaart-knoppen { right: .6rem; top: .6rem; }
}

.kplekken {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.kplek {
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.1rem 1.2rem 1.15rem;
  box-shadow: var(--schaduw-rust); transition: border-color .2s ease, transform .2s ease;
}
.kplek.aan { border-color: var(--roze); transform: translateY(-2px); }
.kplek h3 { font-size: 1.15rem; margin: 0 0 .1rem; }
.kplek-regio { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--roze-diep); }
.kplek-coach { display: flex; align-items: center; min-height: 36px; font-weight: 600; color: var(--blauw); text-decoration: none; }
.kplek-coach:hover { color: var(--inkt); text-decoration: underline; }
.kplek-coach:empty, .kplek-coach.leeg { display: none; }
@media (max-width: 980px) { .kplekken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .kplekken { gap: .7rem; } .kplek { padding: .95rem 1rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .kspeld::after { animation: none; opacity: 0; } }
.kplek-coach:has(> span:empty) { display: none; }

/* --- AV-0009: lokale besturen, nog niet bekend (opleidingen) ------------ */
.binnenkort {
  margin-top: 1.4rem; background: #fff; border: 1px dashed var(--roze); border-radius: var(--r);
  padding: clamp(1.5rem, 3.4vw, 2.3rem) clamp(1.4rem, 3.2vw, 2.4rem); box-shadow: var(--schaduw-rust);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1rem clamp(1.6rem, 4vw, 3.2rem);
}
.binnenkort h3 { margin: 0 0 .6rem; }
.binnenkort-label {
  display: inline-block; margin: 0 0 .7rem; padding: .28rem .8rem; border-radius: 999px;
  background: var(--roze-zacht); color: var(--roze-diep); font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.binnenkort-lead { font-family: var(--kop); font-size: 1.12rem; color: var(--inkt); margin: 0; }
.binnenkort-tekst p { color: var(--zacht); margin: 0 0 .8rem; }
.binnenkort-tekst p:first-child { font-style: italic; }
.binnenkort-tekst .binnenkort-slot { color: var(--inkt); font-weight: 700; margin-bottom: 0; }
@media (max-width: 860px) { .binnenkort { grid-template-columns: 1fr; } }

/* --- AV-0009: de Even-Check (homepage) ---------------------------------- */
.evencheck [hidden], .evencheck-sectie [hidden] { display: none !important; }
.evencheck-teaser {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center;
  max-width: 58rem; margin-inline: auto;
}
.evencheck-teaser h2 { margin: .1rem 0 .6rem; }
.evencheck-teaser p:not(.opschrift) { color: var(--zacht); max-width: 36rem; }
.evencheck-teaser .knop { margin-top: .6rem; }
@media (max-width: 640px) {
  .evencheck-teaser { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .evencheck-teaser p:not(.opschrift) { margin-inline: auto; }
}

/* het pauze-icoon: een zachtroze cirkel met twee staafjes die rustig ademen */
.pauze {
  --maat: 104px; width: var(--maat); height: var(--maat); border-radius: 50%; flex: none;
  background: var(--roze-zacht); display: flex; align-items: center; justify-content: center; gap: calc(var(--maat) * .12);
  position: relative;
}
.pauze::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--roze);
  opacity: 0;
}
.pauze span { width: calc(var(--maat) * .1); height: calc(var(--maat) * .36); border-radius: 99px; background: var(--inkt); transform-origin: 50% 50%; }
.pauze-groot { --maat: 88px; margin: 0 auto 1.2rem; }
.pauze-rust { --maat: 64px; margin: 0 auto 1rem; background: var(--groen); }
html:not([data-veni-shot]) .pauze::before { animation: pauze-kring 4.8s ease-out infinite; }
html:not([data-veni-shot]) .pauze span { animation: pauze-adem 4.8s ease-in-out infinite; }
html:not([data-veni-shot]) .pauze span + span { animation-delay: .18s; }
@keyframes pauze-adem { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(.62); } 55% { transform: scaleY(.62); } }
@keyframes pauze-kring { 0% { opacity: 0; transform: scale(.9); } 30% { opacity: .9; } 70%, 100% { opacity: 0; transform: scale(1.18); } }

/* de dialoog zelf */
.evencheck {
  width: min(44rem, calc(100vw - 1.2rem)); max-width: none; max-height: calc(100dvh - 1.2rem); overflow: auto;
  border: 0; border-radius: var(--r-groot); padding: clamp(1.6rem, 4.4vw, 2.8rem) clamp(1.1rem, 4vw, 2.6rem);
  background: var(--papier); color: var(--tekst); box-shadow: var(--schaduw-diep);
}
.evencheck::backdrop { background: rgba(10, 41, 66, .62); }
.evencheck-sluit {
  position: absolute; top: .6rem; right: .6rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--inkt); cursor: pointer; display: grid; place-items: center;
}
.evencheck-sluit:hover { background: var(--roze-waas); }
.evencheck-sluit svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.evencheck-scherm { text-align: center; }
.evencheck-scherm[data-scherm="vragen"] { text-align: left; }
.evencheck-scherm h2 { margin: .2rem 0 .8rem; }
.evencheck-scherm > p:not(.opschrift) { color: var(--zacht); max-width: 34rem; margin-inline: auto; }
.evencheck-scherm > p.evencheck-meta { font-weight: 700; color: var(--roze-diep); font-size: .95rem; letter-spacing: .03em; margin: 1.1rem auto 1.4rem; }

.evenpad { margin: .4rem 0 .2rem; }
.evenpad svg { display: block; width: 100%; height: auto; overflow: visible; }
.evenpad-lijn { fill: none; stroke: var(--roze); stroke-width: 3; stroke-linecap: round; }
.evenpad-stops circle { fill: var(--papier); stroke: var(--roze-diep); stroke-width: 2; transition: fill .3s ease; }
.evenpad-stops circle.voorbij { fill: var(--roze-diep); }
.evenpad-rust { fill: var(--roze-diep); opacity: .25; transition: opacity .4s ease; }
.evenpad-rust.aan { opacity: 1; }
.figuur { fill: none; stroke: var(--inkt); stroke-width: 3; stroke-linecap: round; }
.figuur circle { fill: #fff; }
.figuur-pauze rect { fill: var(--roze-diep); stroke: none; }
.figuur-pauze { transition: opacity .25s ease; }
.figuur.loopt .figuur-pauze { opacity: 0; }
.figuur-been { transform-origin: 0 -18px; }
.figuur-arm { transform-origin: 0 -35px; }
.figuur.loopt .figuur-been-l, .figuur.loopt .figuur-arm-r { animation: figuur-stap .34s ease-in-out infinite alternate; }
.figuur.loopt .figuur-been-r, .figuur.loopt .figuur-arm-l { animation: figuur-stap .34s ease-in-out infinite alternate-reverse; }
@keyframes figuur-stap { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }

.evencheck-scherm > p.evencheck-teller { max-width: none; margin: 0 0 .3rem; font-size: .88rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--roze-diep); }
.evencheck-vraag:focus { outline: none; }
.evencheck-vraag { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .6rem; }
.evencheck-vraag legend { font-family: var(--kop); font-size: clamp(1.25rem, 3vw, 1.55rem); color: var(--inkt); font-weight: 500; line-height: 1.25; margin-bottom: 1rem; padding: 0; }
.evencheck-vraag button {
  display: flex; align-items: flex-start; gap: .85rem; width: 100%; min-height: 52px; text-align: left; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--tekst);
  background: #fff; border: 1.5px solid var(--lijn); border-radius: 14px; padding: .8rem 1rem;
  box-shadow: var(--schaduw-rust); transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.evencheck-vraag button b {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--roze-zacht); color: var(--inkt); font-size: .85rem;
}
.evencheck-vraag button span { padding-top: .15rem; }
.evencheck-vraag button:hover { border-color: var(--roze); transform: translateY(-1px); }
.evencheck-vraag button:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.evencheck-vraag button[aria-pressed="true"] { border-color: var(--inkt); background: var(--roze-waas); }
.evencheck-vraag button[aria-pressed="true"] b { background: var(--inkt); color: #fff; }
.evencheck-stuur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.3rem; min-height: 48px; }
.evencheck-terug {
  border: 0; background: none; font: inherit; font-weight: 700; color: var(--blauw); cursor: pointer;
  min-height: 44px; padding: 0 .2rem; text-decoration: underline; text-underline-offset: 3px;
}
.evencheck-terug:disabled { visibility: hidden; }
.evencheck-stuur .knop { margin-left: auto; }

.evencheck-scherm > p.evencheck-disclaimer { font-size: .95rem; }
.evencheck-scherm > p.evencheck-gelijk { font-weight: 700; color: var(--inkt); }
.evencheck-uitkomst {
  text-align: left; background: #fff; border-radius: var(--r); padding: 1.4rem 1.5rem 1.5rem; margin: 1.2rem 0 0;
  box-shadow: var(--schaduw-rust); border-top: 4px solid var(--roze);
}
.evencheck-uitkomst h3 { margin: .1rem 0 .6rem; }
.evencheck-uitkomst p:not(.opschrift) { color: var(--zacht); margin: 0 0 .7rem; }
.evencheck-uitkomst p.evencheck-noot { color: var(--groen-diep); font-weight: 700; }
.evencheck-uitkomst .knop { margin-top: .4rem; }
[data-scherm="resultaat"] > .evencheck-terug { margin-top: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-veni-shot]) .pauze::before, html:not([data-veni-shot]) .pauze span,
  .figuur.loopt .figuur-been-l, .figuur.loopt .figuur-been-r, .figuur.loopt .figuur-arm-l, .figuur.loopt .figuur-arm-r { animation: none; }
}
.evencheck h2:focus { outline: none; }
@media (max-width: 640px) { .evenpad { margin: 1.9rem 0 .2rem; } }
@media (max-width: 560px) {
  .review-stuur[data-veel] .review-bollen { display: none; }
  .review-stuur[data-veel] .review-teller { display: block; }
}
@media (max-width: 640px) {
  .evencheck-uitkomst { padding: 1.2rem 1.05rem 1.3rem; }
  .evencheck-uitkomst .knop { padding-inline: .9rem; font-size: .9rem; }
}
@media (max-width: 640px) {
  .evencheck-stuur { gap: .6rem; }
  .evencheck-stuur .knop { padding-inline: 1rem; font-size: .95rem; }
}

/* --- locaties per provincie, met een regio van 15 km rond elke speld (AV-0009) ------- */
.kaart-onder { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.2rem; margin-top: .55rem; }
.kaart-onder .kaart-bron { margin: 0 0 0 auto; }
.kaart-legende { margin: 0; display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--zacht); }
.kaart-legende-cirkel {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(233, 184, 181, .35); border: 2px solid rgba(154, 79, 73, .55);
}
.kaart-cirkels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kcirkel {
  position: absolute; border-radius: 50%;
  background: rgba(233, 184, 181, .2); border: 2px solid rgba(154, 79, 73, .42);
  transition: background .2s ease, border-color .2s ease;
}
.kcirkel.aan { background: rgba(233, 184, 181, .4); border-color: var(--roze-diep); }
.kdorp {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--roze-diep); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(10, 41, 66, .3);
}
.kdorp-naam {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: .74rem; font-weight: 600; color: var(--inkt); background: #fff; padding: .1rem .45rem; border-radius: 999px;
  box-shadow: 0 2px 6px -2px rgba(10, 41, 66, .35); opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
/* de naam van een gemeente verschijnt onder de muis; de kaart zelf draagt de plaatsnamen al */
.kaart-cirkels .kdorp { pointer-events: auto; }
.kdorp::before { content: ''; position: absolute; inset: -6px; }
.kdorp:hover { z-index: 1; }
.kdorp:hover .kdorp-naam { opacity: 1; }

.provincies { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
.provincie {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.2rem 1.6rem; align-items: start;
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); box-shadow: var(--schaduw-rust);
  padding: 1.5rem 1.6rem;
}
.provincie-kop { padding-top: .2rem; }
.provincie-kop h3 { margin: 0; }
.provincie-kop h3::after { content: ''; display: block; width: 2.4rem; height: 3px; border-radius: 3px; background: var(--roze); margin-top: .6rem; }
.provincie-plekken {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem;
}
.provincie .kplek { background: var(--papier); box-shadow: none; border-color: transparent; border-radius: 14px; padding: 1rem 1.1rem 1.05rem; }
.provincie .kplek.aan { border-color: var(--roze); }
.provincie .kplek h4 { font-size: 1.15rem; margin: 0 0 .1rem; }
.kplek-omgeving { margin: .45rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--zacht); }
.kplek-omgeving-label {
  display: block; margin-bottom: .15rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--roze-diep);
}
@media (max-width: 760px) {
  .provincie { grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1.1rem; gap: .9rem; }
  .provincie-plekken { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
}

/* pijlerlabels naast de staptitels (begeleiding, "Hoe zo'n traject loopt"):
   klein en zacht roze, zodat ze ondersteunen zonder de titel te overstemmen.
   Eigen klassen, zodat .stappen elders ongewijzigd blijft. */
.stappen .stap-kop { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; }
.stappen .stap-kop b { margin-right: .15rem; }
.stappen .pijler {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  background: var(--roze-waas); color: var(--roze-diep);
  font-size: .74rem; font-weight: 600; line-height: 1.5; letter-spacing: .03em;
}