/* =========================================================================
   Armand Bissesar — globale stylesheet voor alle opt-inpagina's
   -------------------------------------------------------------------------
   Elke pagina laadt ALLEEN dit bestand. Pas je hier iets aan, dan verandert
   het op elke pagina die dit bestand laadt.

   Volgorde van het bestand:
     1. Stelknoppen (kleuren, fonts, maten)   <- hier pas je 95% van alles aan
     2. Fonts (self-hosted)
     3. Reset en basis
     4. Layout (container, secties)
     5. Componenten (kop, hero, video, knop, formulier, pop-up, reviews, voet)
     6. Responsive (desktop-uitbreidingen)
     7. Toegankelijkheid en print
   ========================================================================= */


/* =========================================================================
   1. STELKNOPPEN
   Verander hier een waarde en de hele site verandert mee.
   ========================================================================= */

:root {

  /* --- Kleuren (overgenomen van armandbissesar.com) --- */
  --kleur-achtergrond:      #FEF5EB;  /* crème, de paginakleur          */
  --kleur-vlak:             #FFFFFF;  /* witte kaarten en formulierblok */
  --kleur-vlak-zacht:       #F7EADC;  /* iets dieper crème voor blokken */
  --kleur-inkt:             #1A1A18;  /* alle lopende tekst             */
  --kleur-inkt-zacht:       #5C5A55;  /* bijschriften, rol, bedrijf     */
  --kleur-groen:            #194D20;  /* merkkleur: knoppen, accenten   */
  --kleur-groen-donker:     #113617;  /* hover-staat van de knop        */
  --kleur-groen-tekst:      #FFFFFF;  /* tekst op groen                 */
  --kleur-oranje:           #D4721F;  /* accent: bolletje, focusrand    */
  --kleur-pil:              rgba(25, 77, 32, 0.09);  /* vlak achter de tagline */
  /* Dezelfde kleur, maar dekkend. Nodig waar twee pilvormen elkaar
     overlappen: bij doorzichtige vlakken wordt de overlap donkerder. */
  --kleur-pil-vlak:         #E9E6D9;
  --kleur-lijn:             rgba(26, 26, 24, 0.14);
  --kleur-lijn-op-groen:    rgba(255, 255, 255, 0.22);
  --kleur-sluier:           rgba(26, 26, 24, 0.55);  /* achter de pop-up */

  /* --- Fonts --- */
  --font-kop:   "Cormorant", Georgia, "Times New Roman", serif;
  --font-tekst: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Typografie. clamp() = mobiel, meeschalend, desktop --- */
  --maat-h1:        clamp(2.125rem, 1.30rem + 3.5vw, 3.75rem);  /* 34px -> 60px */
  --maat-subtitel:  clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);   /* 18px -> 24px */
  --maat-h2:        clamp(1.75rem,  1.20rem + 2.4vw, 3rem);     /* 28px -> 48px */
  --maat-h3:        clamp(1.25rem,  1.05rem + 0.9vw, 1.75rem);  /* 20px -> 28px */
  --maat-tekst:     1.0625rem;                                   /* 17px         */
  --maat-groot:     clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --maat-quote:     1.125rem;                                    /* 18px         */
  --maat-klein:     0.875rem;                                    /* 14px         */
  --maat-mini:      0.8125rem;                                   /* 13px         */

  --regelhoogte-kop:   1.2;   /* ruimte tussen twee kopregels; de
                                 getekende streep valt in die ruimte */
  --regelhoogte-tekst: 1.6;
  --letterafstand-kop: -0.01em;

  /* --- Ruimte. Eén schaal voor de hele site. --- */
  --ruimte-3xs: 0.25rem;
  --ruimte-2xs: 0.5rem;
  --ruimte-xs:  0.75rem;
  --ruimte-s:   1rem;
  --ruimte-m:   1.5rem;
  --ruimte-l:   2rem;
  --ruimte-xl:  3rem;
  --ruimte-2xl: 4rem;

  /* Verticale ruimte van een sectie: mobiel krap, desktop ruim */
  --sectie-ruimte: clamp(2.75rem, 1.5rem + 5vw, 6rem);

  /* --- Breedtes --- */
  --breedte-container: 1200px;   /* buitenrand van de inhoud       */
  --breedte-midden:    46rem;    /* video en tekst in de hero      */
  --breedte-titel:     54rem;    /* de h1 mag breder dan de rest    */
  --breedte-tekst:     38rem;    /* leesbare regellengte           */
  --breedte-formulier: 30rem;    /* het formulierblok en de pop-up */
  --rand-marge:        clamp(1.25rem, 0.5rem + 3vw, 4.5rem);

  /* --- Vormtaal --- */
  /* Beeldverhouding van het videokader. 16 / 9 past bij de meeste embeds.
     Wijkt je preview daarvan af, zet hier dan zijn eigen verhouding neer
     (bijvoorbeeld 782 / 429), dan wordt er niets bijgesneden. */
  --verhouding-video: 782 / 429;

  --radius-s:    8px;
  --radius-m:    12px;
  --radius-l:    20px;
  --radius-rond: 999px;

  --schaduw-zacht: 0 1px 2px rgba(26, 26, 24, 0.05),
                   0 8px 24px rgba(26, 26, 24, 0.07);
  --schaduw-modaal: 0 24px 60px rgba(26, 26, 24, 0.28);

  /* --- Beweging --- */
  --overgang: 160ms ease;
}


/* =========================================================================
   2. FONTS — self-hosted, geen verzoek naar Google.
   Scheelt een DNS-lookup plus TLS naar fonts.googleapis.com én
   fonts.gstatic.com, en houdt de pagina AVG-schoon.
   Beide bestanden zijn variabele fonts: één bestand dekt alle gewichten.
   ========================================================================= */

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-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: "Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/dmsans-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: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* DM Sans cursief. Zonder dit bestand trekt de browser de rechte letters
   scheef, wat er duidelijk minder goed uitziet. Wordt alleen opgehaald
   als er cursieve tekst op de pagina staat. */
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/dmsans-italic-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: "DM Sans";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/dmsans-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}



/* =========================================================================
   3. RESET EN BASIS
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--ruimte-l);
}

body {
  margin: 0;
  background-color: var(--kleur-achtergrond);
  color: var(--kleur-inkt);
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  line-height: var(--regelhoogte-tekst);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 700;
  line-height: var(--regelhoogte-kop);
  letter-spacing: var(--letterafstand-kop);
  text-wrap: balance;      /* voorkomt een losse hangende slotregel */
}

h1 { font-size: var(--maat-h1); }
h2 { font-size: var(--maat-h2); }
h3 { font-size: var(--maat-h3); }

p { margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure { margin: 0; }

img,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-underline-offset: 0.18em; }

blockquote { margin: 0; }

iframe { border: 0; }

button { font: inherit; }


/* =========================================================================
   4. LAYOUT
   ========================================================================= */

/* Elke sectie krijgt automatisch dezelfde binnenmarge en verticale ruimte.
   Nieuwe pagina's hoeven daar niets voor te doen. */
.pagina-inhoud > section,
.paginakop,
.paginavoet {
  padding-inline: var(--rand-marge);
}

.pagina-inhoud > section {
  padding-block: var(--sectie-ruimte);
}

/* De inhoudsbreedte binnen een sectie */
.hero__binnen,
.social-proof__binnen,
.cta__binnen,
.boeking__binnen,
.paginakop__binnen,
.paginavoet__binnen {
  width: 100%;
  max-width: var(--breedte-container);
  margin-inline: auto;
}

/* Secties met een afwijkende achtergrond */
.social-proof {
  background-color: var(--kleur-groen);
  color: var(--kleur-groen-tekst);
}

.cta,
.boeking {
  background-color: var(--kleur-vlak-zacht);
}


/* =========================================================================
   5. COMPONENTEN
   ========================================================================= */

/* --- 5.1 Paginakop ------------------------------------------------------ */

.paginakop {
  padding-block: var(--ruimte-m);
  text-align: center;
}

.paginakop__logo {
  width: 190px;
  height: auto;
  margin-inline: auto;
}


/* --- 5.2 Hero — één gecentreerde kolom ---------------------------------- */

/* Even specifiek als `.pagina-inhoud > section` hierboven, anders wint de
   algemene sectieruimte van deze kleinere bovenmarge. */
.pagina-inhoud > .hero {
  padding-top: var(--ruimte-s);
}

/* De hero-kolom is zo breed als de container; de onderdelen bepalen zelf
   hun maximum. Zo kan de titel breder zijn dan de video eronder. */
.hero__binnen {
  display: grid;
  justify-items: center;
  gap: var(--ruimte-s);
  text-align: center;
}

/* --- Tagline -------------------------------------------------------------
   Eén pil met twee delen: een gevuld labeltje ("Gratis video") en de
   omschrijving ernaast.

   Dit is de mobiele vorm: het labeltje staat als tabje bovenop de pil,
   omdat de twee delen naast elkaar niet meer op een telefoon passen. De
   twee vormen hebben dezelfde dekkende kleur en overlappen elkaar, zodat
   het één doorlopende vorm lijkt. Vanaf 40em (zie Responsive) staan ze
   weer naast elkaar in één pil.
   ------------------------------------------------------------------------ */

.hero__tagline {
  position: relative;
  display: inline-block;
  max-width: 100%;
  /* Ruimte boven de pil voor het tabje */
  margin-top: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-rond);
  background-color: var(--kleur-pil-vlak);
  color: var(--kleur-inkt);
  /* Krimpt mee met smalle schermen zodat de omschrijving op één regel past.
     De bovengrens is de normale tekstmaat; die wordt vanaf ongeveer 410px
     bereikt. Past hij op een heel smal toestel alsnog niet, dan valt hij
     gewoon terug op twee regels in plaats van uit de pil te lopen. */
  font-size: clamp(0.6875rem, 4.15vw - 2.8px, var(--maat-klein));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.hero__tagline-label-houder {
  position: absolute;
  top: -2rem;
  left: 50%;
  z-index: 1;
  display: inline-block;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  /* Alleen de bovenhoeken rond: de onderkant loopt over in de pil. */
  border-radius: 1rem 1rem 0 0;
  background-color: var(--kleur-pil-vlak);
}

.hero__tagline-label {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-rond);
  background-color: var(--kleur-groen);
  color: var(--kleur-groen-tekst);
  font-size: var(--maat-mini);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__tagline-tekst {
  display: block;
}

.hero__titel {
  max-width: var(--breedte-titel);
  margin-top: var(--ruimte-2xs);
}

/* --- Getekende onderstreping onder een paar woorden van de titel ------- */

.titel-accent {
  position: relative;
  /* z-index: 0 maakt hier een eigen stapelcontext. Daardoor kan de streep
     met z-index: -1 achter de letters vallen en toch boven de
     paginaachtergrond blijven. */
  z-index: 0;
  /* Houdt de onderstreepte woorden op één regel, anders loopt de streep
     over een regelovergang heen. */
  white-space: nowrap;
}

.titel-accent__streep {
  position: absolute;
  /* Achter de letters. Zie de stapelcontext op .titel-accent hierboven. */
  z-index: -1;
  /* Overlapt de onderkant van de letters in plaats van eronder te blijven.
     Hoger zetten laat de streep verder door de woorden heen lopen. */
  bottom: 0.05em;
  /* Iets breder dan de woorden, zodat de streep aan beide kanten doorloopt
     zoals bij een streep die je met de hand zet. */
  left: -2%;
  width: 104%;
  height: auto;
  color: var(--kleur-groen);
  pointer-events: none;
}

/* De subtitel is de tweede helft van de belofte. Zelfde serif als de kop,
   maar lichter en in het groen, zodat hij erbij hoort zonder te concurreren. */
/* Zelfde kleur als de titel, zodat het één zin blijft. Cursief en tussen
   haakjes houden hem ondergeschikt aan de kop erboven. DM Sans loopt
   optisch groter dan Cormorant, dus de maat gaat hier een stap omlaag. */
.hero__subtitel {
  max-width: var(--breedte-midden);
  font-family: var(--font-tekst);
  font-size: var(--maat-subtitel);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--kleur-inkt);
}


/* --- 5.3 Videoblok ------------------------------------------------------ */

/* Lopende tekst in de hero, onder de titel. */
.hero__tekst {
  max-width: var(--breedte-tekst);
  color: var(--kleur-inkt-zacht);
  font-size: var(--maat-groot);
}

/* Kleine kanttekening, bijvoorbeeld een p.s. onder de video. */
.hero__notitie {
  max-width: var(--breedte-tekst);
  color: var(--kleur-inkt-zacht);
  font-size: var(--maat-klein);
}

.video-blok {
  width: 100%;
  max-width: var(--breedte-midden);
  margin-top: var(--ruimte-s);
}

/* Het kader houdt zijn beeldverhouding vast (zie --verhouding-video).
   Wat erin staat vult het kader vanzelf: zie de regel voor > * hieronder. */
.video-blok__kader {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;   /* houdt icoon en label als groepje bij elkaar */
  gap: var(--ruimte-xs);
  aspect-ratio: var(--verhouding-video);
  border-radius: var(--radius-m);
  background-color: var(--kleur-groen);
  color: var(--kleur-groen-tekst);
  overflow: hidden;
}

/* Op de opt-in is het kader een link naar het formulier; op de
   aanbodpagina een gewone div met de speler erin. */
.video-blok__kader {
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* De preview of embed (iframe, video of afbeelding) vult het hele kader. */
.video-blok__kader > iframe,
.video-blok__kader > video,
.video-blok__kader > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Onscherpe variant: laat zien dát er een video is zonder de inhoud al
   weg te geven. Gebruik je op een pagina waar de video pas na het
   formulier komt. De lichte vergroting duwt de zachte randen die blur()
   maakt buiten het kader. */
.video-blok__preview--wazig {
  filter: blur(5px);
  transform: scale(1.04);
}

/* Donkere verloopsluier over de preview, zodat de knop er altijd
   voldoende contrast tegen heeft. */
.video-blok__kader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(180deg,
                    rgba(26, 26, 24, 0) 40%,
                    rgba(26, 26, 24, 0.35) 100%);
  pointer-events: none;
}

.video-blok__afspelen {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(56px, 9vw, 84px);
  aspect-ratio: 1;
  border-radius: var(--radius-rond);
  background-color: var(--kleur-groen);
  color: var(--kleur-groen-tekst);
  transition: transform var(--overgang), background-color var(--overgang);
}

.video-blok__afspelen svg {
  width: 38%;
  height: auto;
  /* Het driehoekje staat in de SVG precies in het midden. De massa van een
     driehoek zit links, dus een klein duwtje naar rechts laat hem optisch
     pas echt in het midden staan. */
  transform: translateX(5%);
}

.video-blok__kader:hover .video-blok__afspelen {
  background-color: var(--kleur-groen-donker);
  transform: scale(1.07);
}


/* --- 5.4 Knop ----------------------------------------------------------- */

.cta-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.8rem 1.75rem;
  border: 1px solid var(--kleur-groen);
  border-radius: var(--radius-rond);
  background-color: var(--kleur-groen);
  color: var(--kleur-groen-tekst);
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--overgang), transform var(--overgang);
}

.cta-knop:hover {
  background-color: var(--kleur-groen-donker);
  border-color: var(--kleur-groen-donker);
}

.cta-knop:active { transform: translateY(1px); }

/* Het pijltje schuift een klein stukje mee bij hover. */
.cta-knop__pijl {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--overgang);
}

.cta-knop:hover .cta-knop__pijl { transform: translateX(3px); }

/* De hoofdknop in de hero mag groter */
.cta-knop--groot {
  margin-top: var(--ruimte-2xs);
  padding: 1rem 2.25rem;
  font-size: var(--maat-groot);
}


/* --- 5.5 Formulier ------------------------------------------------------ */

/* Het witte blok waar het formulier in zit. Wordt gebruikt in de
   afsluitende CTA; in de pop-up doet .modaal__binnen hetzelfde werk. */
.formulierblok {
  width: 100%;
  max-width: var(--breedte-formulier);
  padding: var(--ruimte-m);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-l);
  background-color: var(--kleur-vlak);
  box-shadow: var(--schaduw-zacht);
}

.formulierblok__kop {
  font-size: var(--maat-h3);
}

.optin-formulier {
  display: grid;
  gap: var(--ruimte-s);
  margin-top: var(--ruimte-m);
  text-align: left;
}

.optin-formulier__veld {
  display: grid;
  gap: var(--ruimte-3xs);
}

.optin-formulier__label {
  font-size: var(--maat-klein);
  font-weight: 500;
}

.optin-formulier__invoer {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-s);
  background-color: var(--kleur-vlak);
  color: var(--kleur-inkt);
  font-family: var(--font-tekst);
  /* 16px of groter, anders zoomt iOS in bij het aantikken van een veld */
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--overgang);
}

.optin-formulier__invoer:hover { border-color: rgba(26, 26, 24, 0.3); }

.optin-formulier__invoer:focus {
  border-color: var(--kleur-groen);
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 77, 32, 0.14);
}

.optin-formulier__verzenden {
  width: 100%;
  margin-top: var(--ruimte-3xs);
}

.optin-formulier__verzenden:disabled {
  cursor: progress;
  opacity: 0.65;
}

/* Alleen zichtbaar als het versturen misging. */
.optin-formulier__melding {
  color: #9B2C1E;
  font-size: var(--maat-klein);
}


/* --- 5.6 Pop-up --------------------------------------------------------- */

.modaal {
  width: min(100% - 2rem, var(--breedte-formulier));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background-color: transparent;
  color: var(--kleur-inkt);
  overflow: visible;
}

.modaal::backdrop {
  background-color: var(--kleur-sluier);
}

.modaal__binnen {
  position: relative;
  /* Bovenruimte is groter dan de rest: de kop begint onder het kruisje,
     zodat hij de volle breedte heeft en niet raar afbreekt. */
  padding: var(--ruimte-xl) var(--ruimte-m) var(--ruimte-m);
  border-radius: var(--radius-l);
  background-color: var(--kleur-vlak);
  box-shadow: var(--schaduw-modaal);
}

.modaal__sluiten {
  position: absolute;
  top: var(--ruimte-2xs);
  right: var(--ruimte-2xs);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-rond);
  background-color: transparent;
  color: var(--kleur-inkt-zacht);
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang);
}

.modaal__sluiten:hover {
  background-color: var(--kleur-vlak-zacht);
  color: var(--kleur-inkt);
}

.modaal__kop {
  font-size: var(--maat-h3);
}


/* --- 5.7 Reviews -------------------------------------------------------- */

.social-proof__kop {
  /* Ruim genoeg voor een korte kop op één regel; op mobiel breekt hij
     alsnog vanzelf. */
  max-width: 32ch;
  margin-inline: auto;
  margin-bottom: var(--ruimte-l);
  color: var(--kleur-groen-tekst);
  text-align: center;
}

.social-proof__lijst {
  display: grid;
  gap: var(--ruimte-s);
}

/* Witte kaarten op de groene sectie, zodat de reviews eruit springen. */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-m);
  height: 100%;
  padding: var(--ruimte-m);
  border-radius: var(--radius-m);
  background-color: var(--kleur-vlak);
  color: var(--kleur-inkt);
}

.testimonial__quote {
  font-family: var(--font-tekst);
  font-size: var(--maat-quote);
  line-height: 1.5;
}

/* Foto links, naam en functie rechts, onderaan de kaart. */
.testimonial__bron {
  display: flex;
  align-items: center;
  gap: var(--ruimte-s);
  margin-top: auto;   /* duwt de bron naar de onderkant van de kaart */
}

.testimonial__foto {
  flex: none;
}

.testimonial__foto-afbeelding {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-rond);
  object-fit: cover;
}

/* De aanhalingstekens komen uit de opmaak, niet uit de tekst zelf */
.testimonial__quote p::before { content: "\201C"; }
.testimonial__quote p::after  { content: "\201D"; }

.testimonial__naam {
  font-size: var(--maat-klein);
  font-weight: 600;
}

.testimonial__rol,
.testimonial__bedrijf {
  color: var(--kleur-inkt-zacht);
  font-size: var(--maat-mini);
  line-height: 1.35;
}


/* --- 5.8 Afsluitende CTA ------------------------------------------------ */

.cta__binnen {
  display: grid;
  justify-items: center;
  gap: var(--ruimte-l);
}

.cta__beeld { width: 100%; }

/* De foto houdt zijn eigen beeldverhouding: bijsnijden naar een vast
   formaat kost bij een liggende foto te veel van het beeld. */
.cta__beeld-afbeelding {
  width: 100%;
  border-radius: var(--radius-m);
}


/* --- 5.9 Agenda (boekingswidget) ---------------------------------------- */

.boeking__kop {
  max-width: 32ch;
  margin-inline: auto;
  margin-bottom: var(--ruimte-l);
  text-align: center;
}

/* De widget brengt zijn eigen opmaak mee; hier alleen de omlijsting.
   Zelfde breedte als de video erboven, zodat de pagina één kolom blijft. */
.boeking__iframe {
  width: 100%;
  max-width: var(--breedte-midden);
  margin-inline: auto;
  border: 0;
  overflow: hidden;
  /* form_embed.js zet na het laden de exacte hoogte. Deze ondergrens
     voorkomt dat het blok dichtklapt zolang dat nog niet gebeurd is. */
  min-height: 640px;
}


/* --- 5.10 Paginavoet ---------------------------------------------------- */

.paginavoet {
  padding-block: var(--ruimte-l);
  border-top: 1px solid var(--kleur-lijn);
  color: var(--kleur-inkt-zacht);
  font-size: var(--maat-mini);
}

.paginavoet__binnen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2xs) var(--ruimte-m);
  align-items: center;
  justify-content: space-between;
}

.paginavoet__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-m);
}

.paginavoet__link { text-decoration: underline; }

.paginavoet__link:hover { color: var(--kleur-inkt); }


/* =========================================================================
   6. RESPONSIVE
   Mobiel is de basis hierboven. Hieronder alleen uitbreidingen.
   De DOM-volgorde blijft ook op desktop de leesvolgorde.
   ========================================================================= */

/* --- Tablet ------------------------------------------------------------- */
@media (min-width: 40em) {

  /* Tagline: labeltje en omschrijving naast elkaar in één pil. Het tabje
     van de mobiele versie verdwijnt; display: contents haalt de houder uit
     de layout zonder dat het labeltje zelf verdwijnt. */
  .hero__tagline {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-2xs);
    max-width: var(--breedte-midden);
    margin-top: 0;
    padding: 4px;
    background-color: var(--kleur-pil);
    text-align: left;
  }

  .hero__tagline-label-houder {
    position: static;
    display: contents;
    padding: 0;
    background-color: transparent;
    transform: none;
  }

  .hero__tagline-label {
    padding: 0.25rem 0.625rem;
  }

  .hero__tagline-tekst {
    display: inline;
    padding: 0 0.75rem 0 0.125rem;
  }

  .social-proof__lijst {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ruimte-m);
  }

  .formulierblok {
    padding: var(--ruimte-l);
  }

  .modaal__binnen {
    padding: var(--ruimte-xl) var(--ruimte-l) var(--ruimte-l);
  }
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 62em) {

  .paginakop { padding-block: var(--ruimte-l); }

  .paginakop__logo { width: 230px; }

  .hero__binnen { gap: var(--ruimte-m); }

  .social-proof__lijst {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Formulier links, foto rechts. */
  .cta__binnen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    column-gap: var(--ruimte-xl);
  }

  /* Het formulier links uitlijnen op de rand van de sectie, niet midden
     in zijn kolom. */
  .cta .formulierblok {
    max-width: var(--breedte-formulier);
    margin-left: 0;
    margin-right: auto;
  }
}


/* =========================================================================
   7. TOEGANKELIJKHEID EN PRINT
   ========================================================================= */

:focus-visible {
  outline: 3px solid var(--kleur-oranje);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .video-blok,
  .cta__beeld,
  .modaal { display: none; }
  body { background: #fff; }
}


/* =========================================================================
   8. AFWIJKINGEN PER PAGINA
   Eén extra class op de <body> en een klein blok hier. De rest van de
   stylesheet blijft gedeeld.
   ========================================================================= */

/* Eenmalig aanbod: de video daar is 8:5 in plaats van de verhouding van
   de preview op de opt-inpagina. */
.pagina-aanbod {
  --verhouding-video: 8 / 5;
}