/* ==========================================================================
   ZIN EN ZIJN: stylesheet voor de hele site
   Elke pagina laadt dit ene bestand. Wijzig je hier iets, dan verandert het
   overal mee.

   Inhoud
   1. Huisstijl (tokens)      <- hier pas je kleuren, letters en maten aan
   2. Fonts
   3. Basis
   4. Layout
   5. Componenten
   6. Secties
   7. Pop-up
   8. Responsive
   ========================================================================== */


/* ==========================================================================
   1. HUISSTIJL
   Dit blok is de enige plek waar kleuren en maten staan. Alles eronder
   verwijst hiernaar. Wil je de knop een andere kleur, verander --actie en
   het geldt voor elke knop op elke pagina.
   ========================================================================== */

:root{

  /* --- de huisstijl ------------------------------------------------------
     Vier kleuren van de klant, plus wit. Meer heeft de site niet nodig. */
  --paper:      #F7F0E7;   /* grijsroze: de achtergrond van zo goed als alles */
  --blauw:      #00B5C2;   /* het blauw van de klant: uitsluitend een vlak */
  --bordeaux:   #943010;   /* koppen, opschriften, knoppen */
  --grijs:      #67666A;   /* alle lopende tekst */
  --wit:        #FFFFFF;   /* de reviewkaarten */

  --zand:       #ECE5D3;   /* alleen nog de banden op de bedankpagina */
  --inkt:       #2B2926;   /* alleen waar het echt donker moet: invulvelden */

  /* Wil je de knoppen een andere kleur dan de koppen, koppel --actie dan
     los van --bordeaux. */
  --actie:      var(--bordeaux);

  /* LET OP, EN DRAAI DIT NIET TERUG ZONDER OVERLEG.

     Het blauw staat op verzoek van de klant óók op tekst, en op de blauwe
     band staat witte tekst. Allebei zitten onder de norm van WCAG AA. Dat is
     een bewuste keuze, geen vergissing, en hier staan de getallen zodat
     niemand ze hoeft na te zoeken:

       blauw als tekst op grijsroze    2.21   norm 4.5
       blauw als tekst op beige        1.99   norm 4.5
       blauw als vinkje op grijsroze   2.21   norm 3.0
       wit op de blauwe band           2.50   norm 4.5

     Wat dat in de praktijk betekent: de opschriften, de vinkjes en de tekst
     op de blauwe band zijn slecht leesbaar voor wie minder scherp ziet, en op
     een telefoon in de zon voor zo ongeveer iedereen. De koppen en de lopende
     tekst zijn niet geraakt, die staan gewoon in bordeaux en grijs.

     Moet het ooit wél de norm halen, dan is er geen tussenweg: blauw kan dan
     alleen een vlak zijn, met inkt erop (5.79). Een donkerder blauw van
     dezelfde tint (#266C73, 186 graden, zelfde verzadiging) haalt 5.34 op
     grijsroze en 6.04 met wit erop.

     Wat wél klopt: de knop op de band is bordeaux met witte letters. Die
     letters halen 7.81 op het bordeaux, en het vlak van de knop 3.12 tegen de
     band, net boven de grens van 3.0. En de focusrand in het formulier is
     bordeaux gebleven: dat is geen tekst maar een functioneel signaal, en
     blauw haalt daar 2.50 tegen het witte veld. */

  /* afgeleiden voor randen en lijnen */
  --grijs-12:    rgba(103, 102, 106, .12);
  --grijs-20:    rgba(103, 102, 106, .20);
  --grijs-40:    rgba(103, 102, 106, .40);
  --bordeaux-20: rgba(148, 48, 16, .20);
  --blauw-20:    rgba(38, 108, 115, .20);
  --inkt-20:     rgba(43, 41, 38, .20);  /* vlak achter beeld dat nog moet komen */

  /* De pijl in de knoppen. Staat hier als masker, zodat hij de letterkleur van
     de knop overneemt en er geen apart bestand voor nodig is. */
  --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* --- letters ---------------------------------------------------------- */
  /* Eén familie voor alles. Twee variabelen, zodat je later een aparte
     letter voor de koppen kunt inzetten zonder alles langs te lopen. */
  --font-kop:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-tekst:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;


  /* --- maten ------------------------------------------------------------ */
  --breedte:      1120px;  /* max breedte van de inhoud */
  --rand-zij:     64px;    /* zijmarge op desktop */
  --rand-boven:   60px;

  /* koppen schalen mee met het scherm; het tweede getal is de desktopmaat */
  --h1:  clamp(34px, 5.1vw, 52px);
  --h2:  clamp(26px, 3.6vw, 36px);
  --h3:  19px;

  /* --- vormen ----------------------------------------------------------- */
  --rond-knop:   3px;
  --rond-kaart:  12px;
  --rond-pil:    100px;

  /* Hoe dekkend de laag zand over de achtergrondfoto ligt. Alleen nog in
     gebruik op de bedankpagina; de opt-in heeft geen achtergrondfoto meer. */
  --hero-dekking: .95;

  /* --- ritme ------------------------------------------------------------ */
  --gat-xs:  8px;
  --gat-s:   16px;
  --gat-m:   24px;
  --gat-l:   32px;
  --gat-xl:  48px;
  --gat-2xl: 80px;
}


/* ==========================================================================
   2. FONTS
   Lokaal geserveerd, geen verbinding met Google. Het is een variabel font:
   dit ene bestand dekt alle gewichten van 300 tot 800.
   ========================================================================== */

@font-face{
  font-family:"Open Sans";
  src:url("../fonts/open-sans.woff2") format("woff2");
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
   3. BASIS
   ========================================================================== */

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--grijs);
  font-family:var(--font-tekst);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

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

/* Koppen staan op bold. Dat is wat het nieuwe ontwerp vraagt; eerder stond
   de hele site op regular. */
h1,h2,h3{
  font-family:var(--font-kop);
  color:var(--bordeaux);
  margin:0;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.16;
}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);line-height:1.4;letter-spacing:-.005em}

p{margin:0}
.lood{font-size:19px;line-height:1.66;max-width:30em}
.nazin{font-size:14.5px;color:var(--grijs)}

a{color:inherit}

button{font:inherit}

/* kleur van een stuk tekst omzetten, bijvoorbeeld de tweede helft van een kop */
.kleur-accent{color:var(--bordeaux)}
.kleur-tekst {color:var(--grijs)}
/* Blauw accent binnen een kop. Dit mag wél: op grijsroze haalt blauw 3.23, en
   voor grote tekst is 3.0 de grens. In een regel van 17px zou het niet mogen. */
.kleur-blauw {color:var(--blauw)}

/* alleen zichtbaar voor schermlezers */
.verborgen{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


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

.container{
  width:100%;
  max-width:var(--breedte);
  margin:0 auto;
}
/* smallere kolommen voor secties die vooral gelezen worden */
.container--smal {max-width:760px}
.container--midden{max-width:940px}

.midden{text-align:center}
.midden .stapel,.stapel.midden{align-items:center}

/* verticale stapel met een instelbaar gat */
.stapel{display:flex;flex-direction:column;align-items:flex-start}
.stapel--s  {gap:var(--gat-s)}
.stapel--m  {gap:var(--gat-m)}
.stapel--l  {gap:var(--gat-l)}
.stapel--xl {gap:var(--gat-xl)}


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

/* --- opschrift boven een kop --------------------------------------------- */
.label{
  font-family:var(--font-tekst);
  font-size:12px;font-weight:600;line-height:1.5;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--blauw);
  margin:0;
}

/* LET OP: de opschriften staan in blauw op verzoek van de klant, en dat blijft
   onder de norm. Blauw haalt 3.23 op grijsroze en 2.90 op beige, terwijl voor
   tekst van deze maat 4.5 geldt. Bewuste keuze, geen vergissing.
   Moet het alsnog de norm halen: #127076 is dezelfde tint en verzadiging maar
   donkerder, en komt op 5.15 en 4.64 uit. Dat is één regel hierboven. */

/* --- badge: pil met een gekleurd label ervoor ----------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px 4px 4px;
  background:var(--bordeaux-20);
  border-radius:var(--rond-pil);
  max-width:100%;
}
.badge__label{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 10px;
  background:var(--bordeaux);
  border-radius:var(--rond-pil);
  color:var(--wit);
  font-size:12px;font-weight:400;line-height:1.5;
  white-space:nowrap;
}
.badge__tekst{
  font-size:12px;font-weight:400;line-height:1.5;
  color:var(--grijs);
}

/* --- knop ---------------------------------------------------------------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:19px 34px;min-height:44px;
  background:var(--actie);
  border:1px solid var(--actie);
  border-radius:var(--rond-knop);
  color:var(--wit);
  font-size:17px;font-weight:600;line-height:1.3;
  text-decoration:none;cursor:pointer;
  transition:filter .18s ease, transform .18s ease;
}
/* De pijl zit in de css en niet in de html, zodat elke knop hem krijgt zonder
   dat je hem ergens kunt vergeten. Het is een masker, dus hij neemt de
   letterkleur van de knop over: wit op bordeaux, bordeaux op de lichte knop.
   Een knop die al een eigen icoon in de tekst heeft, krijgt .knop--kaal. */
.knop::after{
  content:"";
  flex:none;width:17px;height:17px;
  background:currentColor;
  -webkit-mask:var(--pijl) center/contain no-repeat;
          mask:var(--pijl) center/contain no-repeat;
  transition:transform .18s ease;
}
.knop--kaal::after{display:none}
.knop:hover{filter:brightness(1.12)}
.knop:hover::after{transform:translateX(3px)}
.knop:active{transform:translateY(1px)}

/* Wie minder beweging wil zien, krijgt die niet. */
@media (prefers-reduced-motion:reduce){
  .knop,.knop::after{transition:none}
  .knop:hover::after{transform:none}
}
.knop:focus-visible{outline:2px solid var(--grijs);outline-offset:3px}
.knop[disabled]{opacity:.6;cursor:default}

.knop--breed{width:100%}


/* --- vinklijst ----------------------------------------------------------- */
.vinken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gat-xs)}
.vinken li{display:flex;align-items:flex-start;gap:14px;font-size:17px;line-height:1.55}
.vinken svg{flex:none;width:26px;height:26px;margin-top:1px;color:var(--blauw)}

/* --- plek: zichtbare markering voor materiaal dat nog moet komen ----------
   Verwijder het hele .plek-blok zodra het echte beeld of de echte tekst er
   staat. Ze zijn expres opvallend, zodat er niets per ongeluk live gaat.    */
.plek{
  border:1px dashed var(--bordeaux);
  border-radius:8px;
  background:rgba(255,255,255,.55);
  padding:20px;margin:20px;
  text-align:center;
  font-size:13px;line-height:1.6;
  color:var(--grijs);
}
.plek code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  background:var(--grijs-20);
  padding:1px 5px;border-radius:3px;
  overflow-wrap:anywhere;
}

/* --- kaart --------------------------------------------------------------- */
/* De kaart is wit met ronde hoeken. Wit tegen grijsroze scheelt maar 1.13 aan
   contrast, dus de haarlijn doet het werk; zonder die lijn zweeft de kaart. */
.kaart{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--gat-m);
  padding:32px 30px;
  background:var(--wit);
  border:1px solid var(--grijs-12);
  border-radius:var(--rond-kaart);
}

/* --- genummerde stappen (bijvoorbeeld de vijf audio's) -------------------- */
/* width:100% is nodig: in een .stapel (flex met align-items:flex-start)
   krimpt een blok anders tot zijn eigen inhoud. De reviewrij, de
   tijdbalk en de faq hebben het om dezelfde reden. */
.stappen{list-style:none;margin:0;padding:0;counter-reset:stap;display:grid;gap:0;width:100%}
.stappen li{
  counter-increment:stap;
  position:relative;
  padding:20px 0 20px 62px;
  border-bottom:1px solid var(--grijs-20);
}
.stappen li:first-child{border-top:1px solid var(--grijs-20)}
.stappen li::before{
  content:counter(stap);
  position:absolute;left:0;top:18px;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--grijs-40);border-radius:50%;
  font-family:var(--font-kop);font-size:15px;color:var(--bordeaux);
}
.stappen h3{margin-bottom:2px}
.stappen p{font-size:15px;color:var(--grijs)}

/* --- tijdbalk -------------------------------------------------------------
   Een echte balk met markeringen erop, blokken om en om links en rechts.
   Het dagnummer staat alleen in de markering, nergens anders, anders krijg je
   "1 / Dag 1" dubbel te lezen.                                             */

.tijdbalk{list-style:none;margin:0;padding:0;position:relative;width:100%}

/* de balk. Vervaagt aan begin en eind, zodat hij niet abrupt afgehakt oogt. */
.tijdbalk::before{
  content:"";position:absolute;
  left:50%;margin-left:-1px;top:0;bottom:0;width:2px;
  background:linear-gradient(
    to bottom,
    transparent,
    var(--grijs-40) 6%,
    var(--grijs-40) 94%,
    transparent
  );
}

.tijdbalk li{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--gat-l);
  padding-bottom:var(--gat-l);
}
.tijdbalk li:last-child{padding-bottom:0}

.tijdbalk__pil{
  /* rij expliciet, anders schuift automatische plaatsing het blok naar rij 2 */
  grid-column:2;grid-row:1;
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:78px;padding:7px 14px;
  border-radius:var(--rond-pil);
  background:var(--bordeaux);color:var(--wit);
  font-size:12px;font-weight:400;line-height:1.3;
  letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}

.tijdbalk__blok{
  background:var(--wit);
  border:1px solid var(--grijs-12);
  border-radius:var(--rond-kaart);
  padding:var(--gat-m);
  max-width:340px;
  text-align:left;
}
/* om en om: oneven links van de balk, even rechts */
.tijdbalk li:nth-child(odd)  .tijdbalk__blok{grid-column:1;grid-row:1;justify-self:end}
.tijdbalk li:nth-child(even) .tijdbalk__blok{grid-column:3;grid-row:1;justify-self:start}

.tijdbalk h3{font-size:19px;margin-bottom:6px}
.tijdbalk p{font-size:15px;line-height:1.6}

/* --- veelgestelde vragen (werkt zonder javascript) ------------------------ */
.faq{max-width:760px;margin:0 auto;width:100%}
.faq details{border-bottom:1px solid var(--grijs-20)}
.faq details:first-of-type{border-top:1px solid var(--grijs-20)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:20px 40px 20px 0;position:relative;
  font-family:var(--font-kop);font-size:18px;color:var(--bordeaux);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:29px;
  width:10px;height:10px;
  border-right:1.5px solid var(--bordeaux);border-bottom:1.5px solid var(--bordeaux);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq summary:focus-visible{outline:2px solid var(--bordeaux);outline-offset:-2px}
.faq__antwoord{padding:0 40px 22px 0;font-size:16px;line-height:1.6}

/* --- review -------------------------------------------------------------- */
.review__kop{margin-bottom:var(--gat-s)}
/* De reactie staat als blockquote in de kaart; de browser geeft die zelf een
   inspringing van 40px mee, en die moet eruit. */
.review__tekst{margin:0;font-size:16px;line-height:1.65;color:var(--grijs)}
.review__naam{font-size:16px;line-height:1.5;color:var(--grijs)}


/* ==========================================================================
   6. SECTIES
   ========================================================================== */

.sectie{padding:var(--rand-boven) var(--rand-zij)}
.sectie--ruim{padding:var(--gat-2xl) var(--rand-zij)}

/* gekleurde volvlaksecties */
.op-paper{background:var(--paper)}
.op-zand{background:var(--zand)}

/* De blauwe band. Wit haalt 6.04 op dit blauw, dus hier mag ook een hele zin
   staan en niet alleen een kop. Het opschrift staat in het lichte blauw
   (4.58), zodat de kleur van de klant hier zijn plek heeft. */
.op-blauw{background:var(--blauw);color:var(--wit)}
.op-blauw h1,.op-blauw h2,.op-blauw h3{color:var(--wit)}
.op-blauw .label,.op-blauw .nazin{color:var(--wit)}
.op-blauw .knop:focus-visible{outline-color:var(--wit)}

/* De kaart zet zijn tekstkleuren zelf, zodat hij in elke sectie klopt: grijze
   tekst, bordeaux kop. Bedenk je een nieuw blok met een eigen ondergrond, zet
   het dan hieronder erbij, anders erft de tekst erin de kleur van de sectie
   eromheen, en dat is zelden wat je bedoelt.

   Let op de volgorde hieronder. `.kaart h3` weegt zwaarder dan `.review__kop`,
   dus een kleur die je alleen op `.review__kop` zet komt er nooit doorheen. */
.kaart{color:var(--grijs)}
.kaart h1,.kaart h2,.kaart h3{color:var(--bordeaux)}
.kaart .label{color:var(--blauw)}
.kaart .plek{
  border-color:var(--bordeaux);
  background:rgba(255,255,255,.55);
  color:var(--grijs);
}
.kaart .plek code{background:var(--grijs-20);color:var(--grijs)}

/* --- hero ----------------------------------------------------------------
   De opt-in hero is egaal paper, zonder achtergrondfoto. Dat scheelt 108 kB
   op de eerste laadbeurt, wat op advertentieverkeer het meeste telt.

   De bedankpagina gebruikt nog wel een foto. Die voeg je hier toe als
   modifier, niet in de HTML: een relatief pad in een custom property wordt
   door de browser opgelost vanaf dit CSS-bestand, niet vanaf de pagina.    */
.hero--mozaiek{
  --hero-foto:url("../img/header_home.jpg");
  background-color:var(--zand);
  background-image:
    linear-gradient(0deg,
      rgb(var(--zand-rgb) / var(--hero-dekking)),
      rgb(var(--zand-rgb) / var(--hero-dekking))),
    var(--hero-foto, none);
  background-size:cover;
  background-position:center;
}

.hero{display:flex;justify-content:center;padding:76px var(--rand-zij) 90px}

/* tekst naast beeld. Ondanks de naam ook buiten de hero bruikbaar: het is de
   algemene twee-koloms indeling. --gedraaid zet het beeld links. */
.hero__grid{
  display:grid;grid-template-columns:1.08fr .92fr;
  align-items:center;gap:60px;
  width:100%;max-width:var(--breedte);
}
.hero__grid--gedraaid{direction:rtl}
.hero__grid--gedraaid > *{direction:ltr}
.hero__kolom{min-width:0}
.hero__beeld{min-width:0}
.hero__lood{font-size:19px;line-height:1.66;max-width:30em}

/* --- mockup van het werkboek ---------------------------------------------
   Hier stond een nagebouwd 3D-boekje van losse vellen, een rug en een schaduw,
   bedoeld om een platte omslag als boek te laten lezen. Dat is niet meer nodig:
   de aangeleverde mockup is al een uitgewaaierde spread met zijn eigen schaduw
   erin. Het frame eromheen gaf dubbele vellen en een rechthoekige schaduw
   achter een doorzichtige PNG. Terughalen kan met git show a5ea0f3.          */
.mockup{display:block;width:100%;height:auto}

/* --- foto in het beeldvlak van de hero ------------------------------------
   Zelfde afronding als de kaarten en als het beeld in de halfhalf-secties,
   zodat een foto overal hetzelfde oogt. De mockup krijgt die afronding juist
   niet: die png heeft zijn eigen doorzichtige rand en schaduw, en een radius
   zou daar een onzichtbare hoek afsnijden.                                  */
.foto{display:block;width:100%;height:auto;border-radius:var(--rond-kaart)}

/* --- half om half: beeld naast tekst -------------------------------------- */
.halfhalf{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:60px;
  width:100%;max-width:var(--breedte);margin:0 auto;
}
.halfhalf__beeld{min-width:0}
/* Dezelfde afronding als de kaarten, zodat het beeld bij de rest hoort.

   Geen vast kader en geen object-fit: het beeld houdt zijn eigen verhouding.
   Hier stond 4:5 met cover, en dat ging mis zodra er een echte foto kwam: de
   staande foto van Frans is 2:3 en zijn schaduw raakt de onderrand, dus een
   4:5 kader sneed zijn voeten eraf. Er staat maar één beeld per sectie, dus
   er valt niets uit te lijnen en een vast kader levert alleen maar gesneden
   randen op. */
.halfhalf__beeld img{
  display:block;width:100%;height:auto;
  border-radius:var(--rond-kaart);
}
.halfhalf__leeg{
  aspect-ratio:4/5;background:var(--grijs-12);
  border-radius:var(--rond-kaart);
  display:flex;align-items:center;justify-content:center;
}
.halfhalf__tekst{min-width:0;display:flex;flex-direction:column;gap:var(--gat-m);align-items:flex-start}

/* --- balk: de blauwe oproep tussen de secties ----------------------------
   Een kop en een knop, gecentreerd onder elkaar. Zie de opmerking bij --blauw
   bovenin: op dit blauw haalt wit 3.65, genoeg voor een grote kop en te weinig
   voor een zin. Zet er dus geen lopende tekst bij.                         */
.balk{padding:var(--gat-2xl) var(--rand-zij)}
.balk__binnen{
  display:flex;flex-direction:column;align-items:center;gap:var(--gat-l);
  width:100%;max-width:var(--breedte);margin:0 auto;
  text-align:center;
}
.balk h2{max-width:16em}
.balk .knop{flex:none}

/* --- reviewrij ------------------------------------------------------------ */
.reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
}
.review__kop{color:var(--bordeaux)}
/* De naam blijft grijs; het onderscheid komt van het gewicht, niet van nog
   een kleur. */
.review__naam{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--grijs)}

/* ==========================================================================
   7. POP-UP
   ========================================================================== */

.overlay{
  position:fixed;inset:0;z-index:60;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(60, 58, 56, .55);
}
.overlay.aan{display:flex}

.popup{
  position:relative;
  width:100%;max-width:460px;
  max-height:calc(100vh - 40px);overflow-y:auto;
  padding:40px;
  background:var(--paper);
  border-radius:var(--rond-kaart);
  animation:opkomen .2s ease-out;
}
@keyframes opkomen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.popup__sluit{
  position:absolute;top:10px;right:10px;
  width:36px;height:36px;
  border:0;background:transparent;border-radius:50%;
  color:var(--grijs);font-size:22px;line-height:1;cursor:pointer;
}
.popup__sluit:hover{background:var(--grijs-20)}
.popup__sluit:focus-visible{outline:2px solid var(--bordeaux);outline-offset:2px}

/* koppen in de pop-up in de tekstkleur, niet in bordeaux */
.popup h2{font-size:24px;margin-bottom:var(--gat-m);padding-right:30px;color:var(--grijs)}
.popup__lood{font-size:14px;line-height:1.6;color:var(--grijs);margin-bottom:var(--gat-m)}

/* Vanaf hier geen popup__ meer in de naam: deze onderdelen staan ook op de
   wachtlijstpagina, in een gewoon blok op de pagina zelf. */
.veld{margin-bottom:var(--gat-s)}
.veld label{display:block;font-size:14px;font-weight:400;margin-bottom:6px}
.veld input{
  width:100%;
  padding:12px 14px;
  font-family:var(--font-tekst);font-size:16px;
  color:var(--inkt);background:var(--wit);
  border:1px solid var(--grijs-40);
  border-radius:var(--rond-knop);
}
/* De focusrand moet 3.0 halen tegen het witte veld; blauw haalt daar 1.32. */
.veld input:focus{outline:2px solid var(--bordeaux);outline-offset:-2px;border-color:var(--bordeaux)}
.veld input:user-invalid{border-color:var(--actie)}

.klein{font-size:12px;line-height:1.6;color:var(--grijs);margin-top:var(--gat-s)}

.fout{
  display:none;
  margin-top:var(--gat-s);
  font-size:14px;line-height:1.5;
  color:var(--actie);font-weight:400;
}
.fout.aan{display:block}

.gelukt{display:none;text-align:center}
.gelukt.aan{display:block}
/* Blauw rondje met een wit vinkje, in lijn met de band. */
.gelukt__vink{
  width:48px;height:48px;margin:0 auto var(--gat-s);
  display:flex;align-items:center;justify-content:center;
  background:var(--blauw);border-radius:50%;
  color:var(--wit);font-size:22px;
}


/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width:1100px){
  :root{--rand-zij:40px;--gat-2xl:56px}
}

@media (max-width:820px){
  /* tijdbalk naar één kolom: markering links, blok rechts, balk erdoorheen.
     De 38px is het midden van de pil (min-width 78px), zodat de balk precies
     door de markeringen loopt. */
  .tijdbalk::before{left:38px;margin-left:0}
  .tijdbalk li{grid-template-columns:auto 1fr;gap:var(--gat-s);align-items:start}
  .tijdbalk__pil{grid-column:1;grid-row:1}
  .tijdbalk li:nth-child(odd)  .tijdbalk__blok,
  .tijdbalk li:nth-child(even) .tijdbalk__blok{
    grid-column:2;grid-row:1;justify-self:stretch;max-width:none;
  }
}

@media (max-width:900px){
  :root{--rand-zij:24px;--rand-boven:48px}
  .hero{padding:52px var(--rand-zij) 64px}

  /* Eén kolom. De tekst blijft boven: iemand komt uit een advertentie en moet
     de kop terugzien die hij net aanklikte, niet eerst een plaatje. */
  .hero__grid,.halfhalf{grid-template-columns:1fr;gap:42px}
  .hero__grid--gedraaid{direction:ltr}
  .hero__beeld{max-width:460px;width:100%;margin:0 auto}
  .halfhalf__beeld{max-width:420px;width:100%}
  .mockup{max-width:400px;margin:0 auto}

  .reviews{grid-template-columns:1fr}
}

@media (max-width:520px){
  :root{--rand-zij:20px}
  .vinken li{font-size:16px}
  .knop{width:100%}
  .lood,.hero__lood{font-size:17px}
  .popup{padding:28px 22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}