/* Handelingsvermogen.nl — het ontwerpsysteem van Tailwind CSS v4, als gewone
   CSS zonder bouwstap. De variabelen in :root hebben dezelfde namen en
   waarden als het thema van Tailwind v4 (schaduwen, afrondingen, tekstmaten,
   afstanden, schermbreedtes); de kleuren zijn die van de site zelf. Bij elk
   onderdeel staan de Tailwind-klassen die hetzelfde doen.
   Vormgeving naar webzogeregeld.nl (SPEC besluit 9): donkere vlakken (kop,
   hero, kosten, kennismaking) tussen witte secties, een klein label met stip
   boven elke kop, één schuin schreefwoord per kop, lichte kaarten met grote
   ronding, en bewegingen die rustig blijven. Poppins voor koppen, Inter voor
   tekst, Instrument Serif (schuin) voor het accentwoord, emoji als pictogram.
   Alle bewegingen staan onderaan, binnen prefers-reduced-motion. */

@font-face {
  font-family: "Inter";
  src: url("lettertypen/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("lettertypen/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("lettertypen/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("lettertypen/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Kleuren van de site (Tailwind: @theme { --color-… }) */
  --color-wit: #ffffff;
  --color-vlak: #f2f6f3;        /* kaarten op wit */
  --color-mist: #eef3ef;
  --color-inkt: #18241d;        /* koppen en tekst */
  --color-inkt-zacht: #4a5a51;  /* lopende tekst, contrast 6,5 op wit */
  --color-inkt-stil: #5c6b62;   /* bijzaken, contrast 5,0 op wit, 4,7 op vlak */
  --color-bos: #1f4d35;
  --color-nacht: #0f2a1c;       /* donkere vlakken */
  --color-fris: #34c26b;        /* knoppen en versiering; op wit te licht als tekst */
  --color-fris-hover: #2fb864;
  --color-fris-tekst: #1e8a4c;  /* groen als tekst op wit, contrast 3,9 (grote letters) */
  --color-op-fris: #0f2a1c;     /* tekst op een groene knop, contrast 6,6 */
  --color-oranje: #f5a043;      /* lampje dat nog verbindt, in stap 2 */
  --gloed: 52 194 107;          /* --color-fris als rgb, voor gloed met doorzichtigheid */

  /* Thema van Tailwind v4 */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --spacing: 0.25rem;
  --container-6xl: 72rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --tracking-tight: -0.025em;
  --tracking-wider: 0.05em;
  --leading-tight: 1.25;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* Samengestelde stijlen */
  --ring-zacht: 0 0 0 1px rgb(15 42 28 / 0.06);            /* ring-1 ring-nacht/6 */
  --kop-hoogte: 4rem;                                       /* h-16 */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kop-hoogte) + 4 * var(--spacing));
}

/* font-sans text-base/7 text-inkt bg-white antialiased */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-inkt);
  background: var(--color-wit);
  -webkit-font-smoothing: antialiased;
}

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

/* font-display text-inkt tracking-tight text-balance */
h1, h2, h3 { margin: 0; font-family: var(--font-display); color: var(--color-inkt); letter-spacing: var(--tracking-tight); text-wrap: balance; }
/* text-4xl/[1.1] font-bold md:text-6xl lg:text-7xl */
h1 { font-size: var(--text-4xl); line-height: 1.1; font-weight: 700; }
/* text-3xl font-bold md:text-5xl */
h2 { font-size: var(--text-3xl); line-height: 1.15; font-weight: 700; }
/* text-lg font-semibold */
h3 { font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: 600; letter-spacing: -0.01em; }
@media (width >= 48rem) {
  h1 { font-size: var(--text-6xl); line-height: 1.05; }
  h2 { font-size: var(--text-5xl); line-height: 1.1; }
}
@media (width >= 64rem) {
  h1 { font-size: var(--text-7xl); }
}
p { margin: 0; text-wrap: pretty; }

/* Het accentwoord: font-serif italic font-normal text-fris-tekst, iets groter
   omdat deze letter kleiner oogt dan Poppins. */
.accent {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.12em; letter-spacing: -0.01em; color: var(--color-fris-tekst);
}

a { color: var(--color-bos); }
/* focus-visible:outline-2 focus-visible:outline-offset-2 */
:focus-visible { outline: 2px solid var(--color-bos); outline-offset: 2px; }

/* Donkere vlakken: witte tekst, groene focusring en groen accent. */
.donker { background: var(--color-nacht); color: rgb(255 255 255 / 0.78); }
.donker h1, .donker h2, .donker h3 { color: var(--color-wit); }
.donker .accent { color: var(--color-fris); }
.donker :focus-visible { outline-color: var(--color-fris); }

/* Emoji als pictogram; altijd met aria-hidden, de tekst ernaast zegt het. */
.emoji { font-family: var(--font-emoji); font-style: normal; font-weight: 400; line-height: 1; }

/* mx-auto w-full max-w-6xl px-4 md:px-6 lg:px-8 */
.binnen { width: 100%; max-width: var(--container-6xl); margin-inline: auto; padding-inline: calc(4 * var(--spacing)); }
@media (width >= 48rem) { .binnen { padding-inline: calc(6 * var(--spacing)); } }
@media (width >= 64rem) { .binnen { padding-inline: calc(8 * var(--spacing)); } }

.naar-inhoud {
  position: absolute; left: 1rem; top: -100px; z-index: 20;
  padding: 0.75rem 1rem; background: var(--color-fris); color: var(--color-op-fris); border-radius: var(--radius-lg);
}
.naar-inhoud:focus { top: 0.75rem; }

/* Hoofdknop: inline-flex h-12 items-center rounded-full bg-fris px-6 font-display
   font-semibold text-op-fris shadow-lg shadow-fris/30 inset-ring inset-ring-white/30 */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(2 * var(--spacing));
  min-height: 3rem; padding: 0 calc(6 * var(--spacing));
  border: 0; border-radius: 9999px;
  background: var(--color-fris); color: var(--color-op-fris);
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 8px 20px -6px rgb(var(--gloed) / 0.55);
  transition-property: background-color, box-shadow, color, transform;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--default-transition-timing-function);
}
.knop:hover { background: var(--color-fris-hover); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 10px 26px -6px rgb(var(--gloed) / 0.7); }
/* Tweede knop: bg-transparent text-inkt ring-2 ring-inset ring-inkt hover:bg-vlak */
.knop--tweede { background: transparent; color: var(--color-inkt); box-shadow: inset 0 0 0 2px var(--color-inkt); }
.knop--tweede:hover { background: var(--color-vlak); box-shadow: inset 0 0 0 2px var(--color-inkt); }
/* Op donker: ring-white/30 text-white hover:bg-white/10 */
.donker .knop--tweede { color: var(--color-wit); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.3); }
.donker .knop--tweede:hover { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.55); }
/* flex flex-wrap gap-3 */
.knoppen { display: flex; flex-wrap: wrap; gap: calc(3 * var(--spacing)); }

/* Plaatshouder: tekst die Alex nog schrijft. Moet weg vóór de preview. */
.plaatshouder {
  display: block;
  padding: 0.625rem 0.75rem;
  border: 1.5px dashed #b9c4bc;
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(-45deg, #fff, #fff 8px, #f5f8f6 8px, #f5f8f6 16px);
  color: var(--color-inkt-stil);
  font-family: var(--font-sans);
  font-size: 0.9375rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left;
}
h1 .plaatshouder, h2 .plaatshouder, h3 .plaatshouder { font-size: 0.9375rem; }
.fotovak {
  display: grid; place-items: center; text-align: center;
  background: var(--color-wit); border: 1.5px dashed #b9c4bc; border-radius: var(--radius-2xl);
  color: var(--color-inkt-stil); font-size: var(--text-sm); padding: 0.75rem;
}

/* Klein label boven een kop, met groen stipje:
   inline-flex items-center gap-2 text-sm text-inkt-stil before:size-1.5 before:rounded-full before:bg-fris */
.bovenkop { display: inline-flex; align-items: center; gap: calc(2 * var(--spacing)); justify-self: start; font-size: var(--text-sm); line-height: 1.5; color: var(--color-inkt-stil); }
.bovenkop::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--color-fris); }
.donker .bovenkop { color: rgb(255 255 255 / 0.7); }

/* 1. Kop: sticky top-0 z-10 h-16 bg-nacht/85 backdrop-blur border-b border-white/8 */
.kop {
  position: sticky; top: 0; z-index: 10;
  background: rgb(15 42 28 / 0.85);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.kop .binnen {
  display: flex; align-items: center; gap: calc(3 * var(--spacing));
  height: var(--kop-hoogte);
}
.merk {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--color-inkt); text-decoration: none;
  font-family: var(--font-display); font-size: var(--text-sm); white-space: nowrap;
}
.merk svg { height: 1.55em; width: auto; flex: none; }
.merk span { font-weight: 600; letter-spacing: -0.01em; }
.merk span b { font-weight: 600; color: var(--color-inkt-stil); }
.kop .merk { color: var(--color-wit); }
.kop .merk span b { color: rgb(255 255 255 / 0.6); }
@media (width >= 48rem) { .kop .merk { font-size: var(--text-lg); } }
/* Onder 480 px passen naam, knop en menuknop niet naast elkaar: dan alleen
   het beeldmerk (de link heeft een aria-label, dus de naam wordt voorgelezen). */
@media (width < 30rem) { .kop .merk span { display: none; } }
/* Witte knop in de kop: ml-auto h-12 px-4 text-sm bg-white text-nacht (48 px, zoals
   de spec vraagt); onder 48rem alleen "Kennismaking" */
.kop .knop { flex: none; margin-left: auto; padding: 0 calc(4 * var(--spacing)); gap: 0; font-size: var(--text-sm); background: var(--color-wit); color: var(--color-nacht); box-shadow: none; }
.kop .knop:hover { background: var(--color-mist); }
@media (width < 48rem) { .kop .knop .breed { display: none; } }

/* Menuknop (telefoon en tablet): size-12 rounded-full text-white ring-1 ring-white/20 */
.menuknop {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: 9999px; background: transparent; color: var(--color-wit); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}
.menuknop:hover { background: rgb(255 255 255 / 0.08); }
.menuknop svg { width: 1.25rem; height: 1.25rem; }
.kop :focus-visible { outline-color: var(--color-fris); }

/* Menu. Onder 64rem een paneel onder de kop (popover van de browser: opent met
   de menuknop, sluit met Escape of door ernaast te tikken). Vanaf 64rem een
   rij links naast het logo. */
.menu ul { margin: 0; padding: 0; list-style: none; }
.menu a { color: var(--color-wit); text-decoration: none; font-family: var(--font-display); font-weight: 600; }
@media (width < 64rem) {
  /* fixed inset-x-0 top-16 bg-nacht p-4 border-b border-white/8 shadow-xl */
  .menu {
    position: fixed; inset: var(--kop-hoogte) 0 auto; width: auto; max-width: none; margin: 0;
    padding: calc(2 * var(--spacing)) calc(4 * var(--spacing)) calc(6 * var(--spacing));
    border: 0; border-bottom: 1px solid rgb(255 255 255 / 0.08);
    background: var(--color-nacht); color: var(--color-wit); box-shadow: var(--shadow-xl);
  }
  .menu ul { display: grid; }
  .menu li + li { border-top: 1px solid rgb(255 255 255 / 0.08); }
  /* flex min-h-14 items-center text-lg */
  .menu a { display: flex; align-items: center; gap: calc(3 * var(--spacing)); min-height: 3.5rem; font-size: var(--text-lg); }
  .menu a[aria-current="page"] { color: var(--color-fris); }
  .menu a[aria-current="page"]::after { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: currentColor; }
  .menu::backdrop { background: rgb(15 42 28 / 0.4); }
}
@media (width >= 64rem) {
  .menuknop { display: none; }
  /* Het popover-element staat hier gewoon in de rij: ml-auto, geen paneel. */
  .menu, .menu:popover-open {
    display: block; position: static; inset: auto; width: auto; margin: 0 0 0 auto; padding: 0;
    border: 0; background: none; color: inherit; overflow: visible;
  }
  .kop .knop { margin-left: calc(3 * var(--spacing)); }
  .menu ul { display: flex; gap: var(--spacing); }
  /* rounded-full px-3.5 py-2 text-sm text-white/75 hover:text-white hover:bg-white/8 */
  .menu a { display: block; padding: calc(2 * var(--spacing)) calc(3.5 * var(--spacing)); border-radius: 9999px; font-size: var(--text-sm); color: rgb(255 255 255 / 0.75); transition: color var(--default-transition-duration), background-color var(--default-transition-duration); }
  .menu a:hover { color: var(--color-wit); background: rgb(255 255 255 / 0.08); }
  .menu a[aria-current="page"] { color: var(--color-wit); background: rgb(255 255 255 / 0.1); }
}
/* Oude browsers zonder popover: geen menuknop, de links in een rij onder de kop. */
@supports not selector(:popover-open) {
  .menuknop { display: none; }
  .kop .binnen { flex-wrap: wrap; height: auto; padding-block: calc(2 * var(--spacing)); }
  .menu { position: static; order: 3; width: 100%; padding: 0; border: 0; box-shadow: none; }
  .menu ul { display: flex; flex-wrap: wrap; gap: 0 calc(4 * var(--spacing)); }
  .menu li + li { border: 0; }
  .menu a { min-height: 3rem; font-size: var(--text-base); }
}

/* Secties: py-20 md:py-28 */
.sectie { padding-block: calc(20 * var(--spacing)); }
@media (width >= 48rem) { .sectie { padding-block: calc(28 * var(--spacing)); } }
/* grid max-w-2xl gap-4 mb-10 md:mb-14 */
.sectie-kop { display: grid; gap: calc(4 * var(--spacing)); max-width: 46rem; margin-bottom: calc(10 * var(--spacing)); }
@media (width >= 48rem) { .sectie-kop { margin-bottom: calc(14 * var(--spacing)); } }
.sectie-kop > p:not(.bovenkop, .plaatshouder) { color: var(--color-inkt-zacht); font-size: var(--text-lg); }
.donker .sectie-kop > p:not(.bovenkop, .plaatshouder) { color: rgb(255 255 255 / 0.78); }
.smal { max-width: 46rem; }
.midden { text-align: center; }
.midden .sectie-kop { justify-items: center; margin-inline: auto; }
.midden .bovenkop { justify-self: center; }
.tekst { display: grid; gap: calc(4 * var(--spacing)); color: var(--color-inkt-zacht); }
.donker .tekst { color: rgb(255 255 255 / 0.78); font-size: var(--text-lg); }
.na-sectie { margin-top: calc(10 * var(--spacing)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(3 * var(--spacing)) calc(4 * var(--spacing)); }

/* Donkere band: één zachte gloed van onderen. */
.sectie--donker, .slot, .paginakop { position: relative; isolation: isolate; overflow: hidden; }
.sectie--donker::before, .slot::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: -24rem; width: 64rem; height: 40rem; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(var(--gloed) / 0.22), rgb(var(--gloed) / 0.1) 45%, rgb(var(--gloed) / 0));
}

/* Lichtgroen vlak tussen witte secties; kaarten zijn daar wit. */
.sectie--vlak { background: var(--color-vlak); }
.sectie--vlak .kaart { background: var(--color-wit); box-shadow: var(--ring-zacht), var(--shadow-xs); }

/* Kop van een vervolgpagina: donker, links uitgelijnd, gloed rechtsboven.
   py-14 md:py-20 grid gap-4 */
.paginakop { padding-block: calc(14 * var(--spacing)); }
@media (width >= 48rem) { .paginakop { padding-block: calc(20 * var(--spacing)); } }
.paginakop .binnen { display: grid; gap: calc(4 * var(--spacing)); justify-items: start; }
.paginakop h1 { max-width: 20ch; }
/* Lange woorden als "Privacyverklaring" moeten ook op 320 px passen. */
@media (width < 30rem) { .paginakop h1 { font-size: var(--text-3xl); } }
.paginakop .binnen > p:not(.bovenkop, .plaatshouder) { font-size: var(--text-lg); max-width: 40rem; }
.paginakop .plaatshouder { max-width: 40rem; width: 100%; }
.paginakop::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -16rem; right: -12rem; width: 44rem; height: 36rem;
  background: radial-gradient(closest-side, rgb(var(--gloed) / 0.22), rgb(var(--gloed) / 0.08) 55%, rgb(var(--gloed) / 0));
}

/* Slot van elke pagina: donker, kop en knop in het midden. */
.slot .sectie-kop { margin-bottom: calc(8 * var(--spacing)); }
.slot .knoppen { justify-content: center; }

/* Kalenderpagina: de kaart staat op wit, dus met een ring. */
.sectie--kalender { padding-top: calc(10 * var(--spacing)); }
.sectie--kalender .kalender { box-shadow: var(--ring-zacht), var(--shadow-xl); }

/* Prijzen op de pagina Coaching: dezelfde kaarten, met een groot bedrag.
   font-display text-4xl font-bold, lijst met groene stipjes */
.prijzen .prijs { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1.2; font-weight: 700; color: var(--color-inkt); }
.prijzen .prijs small { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; color: var(--color-inkt-stil); }
.prijzen ul { display: grid; gap: calc(2 * var(--spacing)); margin: calc(2 * var(--spacing)) 0 0; padding: 0; list-style: none; color: var(--color-inkt-zacht); }
.prijzen li { position: relative; padding-left: calc(4 * var(--spacing)); }
.prijzen li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--color-fris); }
.prijzen-noot { margin-top: calc(8 * var(--spacing)); max-width: 46rem; color: var(--color-inkt-zacht); }

/* Tekst in het kalendervak tot Cal.com geladen is, en de noot eronder. */
/* Op de telefoon staat de agenda onder elkaar en wordt het vak hoger: genoeg
   ruimte reserveren, zodat de noot eronder niet verspringt in beeld. */
@media (width < 48rem) { .sectie--kalender .kalender { min-height: 52rem; } }
/* Los boven het vak: als de tekst verdwijnt, schuift de agenda niet. */
.sectie--kalender .kalender { position: relative; }
.kalender.laadt cal-inline { visibility: hidden; }
.kalender-laden { position: absolute; inset: 0 0 auto; padding: calc(8 * var(--spacing)); text-align: center; color: var(--color-inkt-stil); }
.kalender-noot { margin-top: calc(5 * var(--spacing)); text-align: center; font-size: var(--text-sm); color: var(--color-inkt-stil); }

/* Privacy en voorwaarden: rustige koppen, gewone lijsten. */
.juridisch h2 { margin-top: calc(6 * var(--spacing)); font-size: var(--text-xl); line-height: var(--leading-tight); }
.juridisch ul { display: grid; gap: calc(2 * var(--spacing)); margin: 0; padding-left: 1.25rem; }
.juridisch strong { color: var(--color-inkt); }

/* 2. Hero: donker, alles in het midden. De raket staat onder de knoppen met
   een gloed erachter; op brede schermen duiken links en rechts meldingen op.
   relative isolate overflow-hidden text-center pt-10 md:pt-20 */
.hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-top: calc(10 * var(--spacing)); }
@media (width >= 48rem) { .hero { padding-top: calc(20 * var(--spacing)); } }
.hero::before {
  /* Gloed achter de raket */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: -14rem; width: 56rem; height: 40rem; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(var(--gloed) / 0.32), rgb(var(--gloed) / 0.16) 35%, rgb(var(--gloed) / 0.06) 65%, rgb(var(--gloed) / 0));
}
.hero::after {
  /* Heel zachte lichtval van boven, zodat het vlak niet plat is */
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 0 auto;
  height: 28rem; background: radial-gradient(60% 100% at 50% 0%, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0));
}
.hero .binnen { position: relative; display: grid; justify-items: center; gap: calc(5 * var(--spacing)); }
/* Op de telefoon iets compacter, zodat de knoppen ook op 320×568 in beeld staan:
   max-md:pt-7 max-md:gap-4 max-md:text-lg/7 */
@media (width < 48rem) {
  .hero { padding-top: calc(7 * var(--spacing)); }
  .hero .binnen { gap: calc(4 * var(--spacing)); }
  .hero .ondertitel { line-height: 1.75rem; }
}
.hero h1 { max-width: 15ch; }
@media (width >= 48rem) { .hero h1 { max-width: 18ch; } }
/* Label met kloppend stipje: inline-flex gap-2.5 rounded-full bg-white/8 px-4 py-1.5
   text-sm text-white ring-1 ring-white/12 */
.label {
  display: inline-flex; align-items: center; gap: calc(2.5 * var(--spacing));
  padding: calc(1.5 * var(--spacing)) calc(4 * var(--spacing)) calc(1.5 * var(--spacing)) calc(3.5 * var(--spacing));
  border-radius: 9999px; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: var(--color-wit); font-size: var(--text-sm); line-height: 1.5; font-weight: 500;
}
.stip { position: relative; width: 0.5rem; height: 0.5rem; flex: none; border-radius: 9999px; background: var(--color-fris); }
.stip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-fris); opacity: 0; }
/* text-lg/8 text-white/78 md:text-xl/8 max-w-2xl */
.ondertitel { font-size: var(--text-lg); line-height: 2rem; max-width: 40rem; }
@media (width >= 48rem) { .ondertitel { font-size: var(--text-xl); } }
.hero .knoppen { justify-content: center; margin-top: calc(2 * var(--spacing)); }
/* De raket: w-64 lg:w-80, de onderkant valt op de rand van de hero */
.hero-raket { width: 16rem; margin-top: calc(4 * var(--spacing)); margin-bottom: -1.5rem; }
.hero-raket img { width: 100%; height: auto; aspect-ratio: 480 / 507; }
@media (width >= 64rem) { .hero-raket { width: 20rem; } }
/* Meldingen: wit kaartje met emoji, alleen vanaf 75rem (er moet ruimte naast de titel zijn).
   absolute flex items-center gap-3 rounded-2xl bg-white p-3 pr-4 text-sm shadow-xl */
.melding { display: none; }
@media (width >= 75rem) {
  .melding {
    position: absolute; display: flex; align-items: center; gap: calc(3 * var(--spacing));
    padding: calc(3 * var(--spacing)) calc(4 * var(--spacing)) calc(3 * var(--spacing)) calc(3 * var(--spacing));
    border-radius: var(--radius-2xl); background: var(--color-wit); color: var(--color-inkt);
    box-shadow: var(--ring-zacht), var(--shadow-xl); text-align: left; line-height: 1.35;
  }
  .melding .emoji { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: var(--color-vlak); font-size: 1.125rem; }
  .melding strong { display: block; font-size: var(--text-sm); font-weight: 600; }
  .melding small { display: block; font-size: var(--text-xs); color: var(--color-inkt-stil); }
  /* Naast de ondertitel en de raket, niet naast de titel: die is breder. */
  .melding--links { left: calc(2 * var(--spacing)); top: 20rem; }
  .melding--rechts { right: calc(2 * var(--spacing)); top: 31rem; }
}

/* Lichte kaart: grid gap-3 rounded-3xl bg-vlak p-6 md:p-7 */
.kaart,
.stappen > li {
  display: grid; gap: calc(3 * var(--spacing)); align-content: start;
  padding: calc(6 * var(--spacing)); background: var(--color-vlak); border-radius: var(--radius-3xl);
}
@media (width >= 48rem) { .kaart, .stappen > li { padding: calc(7 * var(--spacing)); } }
/* Emoji in een wit vakje: grid size-12 place-items-center rounded-2xl bg-white shadow-xs ring-1 ring-nacht/6 */
.kaart > .emoji,
.uitkomsten .emoji {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: calc(2 * var(--spacing));
  border-radius: var(--radius-2xl); background: var(--color-wit); box-shadow: var(--ring-zacht), var(--shadow-xs);
  font-size: 1.5rem;
}

/* 3. Herkenning: grid gap-4 md:grid-cols-3 md:gap-5 */
.kaarten { display: grid; gap: calc(4 * var(--spacing)); }
@media (width >= 48rem) { .kaarten { grid-template-columns: repeat(3, 1fr); gap: calc(5 * var(--spacing)); } }
.kaart p { color: var(--color-inkt-zacht); }

/* 5. Wat coaching je brengt: open raster zoals "Inbegrepen", zonder kaart.
   grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 */
.uitkomsten { display: grid; gap: calc(10 * var(--spacing)) calc(8 * var(--spacing)); padding: 0; margin: 0; list-style: none; }
@media (width >= 40rem) { .uitkomsten { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 64rem) { .uitkomsten { grid-template-columns: repeat(4, 1fr); } }
.uitkomsten li { display: grid; align-content: start; gap: calc(2 * var(--spacing)); color: var(--color-inkt-zacht); }
.uitkomsten .emoji { margin-bottom: calc(1 * var(--spacing)); border-radius: 9999px; background: var(--color-vlak); box-shadow: none; }

/* 6. Zo werkt het: kaarten met een rond nummer en een klein schermpje onderaan. */
.stappen { display: grid; gap: calc(4 * var(--spacing)); padding: 0; margin: 0; list-style: none; }
@media (width >= 48rem) { .stappen { grid-template-columns: repeat(3, 1fr); gap: calc(5 * var(--spacing)); } }
.stappen > li { grid-template-rows: auto auto 1fr auto; }
.stappen > li > p { color: var(--color-inkt-zacht); }
.stap-top { display: flex; align-items: center; justify-content: space-between; gap: calc(3 * var(--spacing)); margin-bottom: calc(2 * var(--spacing)); }
.stap-top .emoji { font-size: 1.5rem; }
/* grid size-9 place-items-center rounded-full bg-nacht font-display text-sm font-semibold text-white */
.stap-nr { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: var(--color-nacht); color: var(--color-wit); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }

/* Schermpje: mt-4 rounded-2xl bg-white p-4 text-sm shadow-sm ring-1 ring-nacht/6 */
.scherm {
  display: grid; gap: calc(3 * var(--spacing)); margin-top: calc(4 * var(--spacing));
  padding: calc(4 * var(--spacing)); border-radius: var(--radius-2xl); background: var(--color-wit);
  box-shadow: var(--ring-zacht), var(--shadow-sm); font-size: var(--text-sm); line-height: 1.4;
}
.scherm p { margin: 0; }
.scherm-kop { font-size: var(--text-xs); color: var(--color-inkt-stil); }
.scherm-voet { display: flex; align-items: center; gap: calc(2 * var(--spacing)); font-size: var(--text-xs); font-weight: 500; color: var(--color-fris-tekst); }
.vinkje { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; border-radius: 9999px; background: var(--color-fris); color: var(--color-op-fris); }
.vinkje svg { width: 0.75rem; height: 0.75rem; stroke-dasharray: 24; stroke-dashoffset: 0; }
/* Stap 1: drie tijden, één is gekozen */
.tijden { display: flex; gap: calc(1.5 * var(--spacing)); }
.tijden span { flex: 1; padding: calc(2 * var(--spacing)) 0; border-radius: var(--radius-lg); background: var(--color-vlak); text-align: center; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.tijden .gekozen { background: var(--color-nacht); color: var(--color-wit); }
/* Stap 2: twee beeldtegels */
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2 * var(--spacing)); }
.tegel { display: grid; justify-items: center; gap: calc(1.5 * var(--spacing)); padding: calc(3 * var(--spacing)) 0 calc(2 * var(--spacing)); border-radius: var(--radius-xl); background: var(--color-nacht); color: rgb(255 255 255 / 0.8); font-size: var(--text-xs); }
.gezicht { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--color-bos); color: var(--color-wit); font-family: var(--font-display); font-weight: 600; }
.tegel + .tegel .gezicht { background: var(--color-fris); color: var(--color-op-fris); }
.lampje { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--color-fris); }
.status { display: grid; }
.status > * { grid-area: 1 / 1; }
.status .eerst { opacity: 0; }
/* Stap 3: doelen die worden afgevinkt */
.scherm--doelen ul { display: grid; gap: calc(2.5 * var(--spacing)); padding: 0; margin: 0; list-style: none; }
.scherm--doelen li { display: flex; align-items: center; gap: calc(2.5 * var(--spacing)); }

/* 7. Over Alex */
.over { display: grid; gap: calc(8 * var(--spacing)); align-items: start; }
.over-foto { display: block; width: 100%; max-width: 280px; }
/* rounded-3xl shadow-xl ring-1 ring-nacht/6 */
.over-foto img { width: 100%; height: auto; aspect-ratio: 560 / 839; border-radius: var(--radius-3xl); object-fit: cover; background: #1c1a17; box-shadow: var(--ring-zacht), var(--shadow-xl); }
@media (width >= 48rem) {
  .over { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(14 * var(--spacing)); align-items: center; }
  .over-foto { max-width: none; }
}

/* 9. Vragen: kop links, vragen rechts met lijnen ertussen.
   grid gap-10 lg:grid-cols-[2fr_3fr] lg:gap-16 */
.vragen-raster { display: grid; gap: calc(2 * var(--spacing)); }
@media (width >= 64rem) { .vragen-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: calc(16 * var(--spacing)); align-items: start; } }
.vragen { border-top: 1px solid rgb(15 42 28 / 0.1); }
.vragen details { border-bottom: 1px solid rgb(15 42 28 / 0.1); }
.vragen summary {
  display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--spacing));
  min-height: 3.75rem; padding: calc(4 * var(--spacing)) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; line-height: 1.5; color: var(--color-inkt);
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-inkt-stil); }
.vragen details[open] summary svg { transform: rotate(45deg); }
.vragen .antwoord { padding: 0 calc(10 * var(--spacing)) calc(5 * var(--spacing)) 0; color: var(--color-inkt-zacht); }

/* 10. Plan je kennismaking: donker, de kalender in een witte kaart.
   min-h-160 rounded-3xl bg-white shadow-xl */
.kalender {
  min-height: 40rem; margin-top: calc(2 * var(--spacing));
  background: var(--color-wit); border-radius: var(--radius-3xl); box-shadow: var(--shadow-xl);
}

/* 11. Voet: border-t border-nacht/6 py-10 text-sm text-inkt-zacht */
.voet { padding-block: calc(10 * var(--spacing)); color: var(--color-inkt-zacht); font-size: var(--text-sm); }
.voet .binnen { display: grid; gap: calc(6 * var(--spacing)); }
@media (width >= 48rem) { .voet .binnen { grid-template-columns: 1fr auto; align-items: start; } }
.voet-gegevens { display: grid; gap: calc(2 * var(--spacing)); }
.voet-adres { display: grid; gap: var(--spacing); line-height: 1.5; }
.voet-adres a { color: inherit; }
.voet-links { display: flex; flex-wrap: wrap; gap: calc(2 * var(--spacing)) calc(5 * var(--spacing)); padding: 0; margin: 0; list-style: none; }
.voet-links a { color: var(--color-inkt-zacht); }
.voet-links a:hover { color: var(--color-inkt); }

/* ---------------------------------------------------------------------------
   Bewegingen (SPEC besluit 9). Alleen als het systeem geen "beweging beperken"
   vraagt. Zonder deze regels staat alles stil en in de eindstand in beeld.
   Alleen transform en opacity (en een kleur), zodat er niets verspringt.
   - Hero: CSS alleen, werkt ook zonder JavaScript.
   - .onthul en .scherm: pas als beweging.js de klasse "beweegt" op <html> zet;
     het script zet "in-beeld" zodra een blok in beeld komt.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes omhoog { from { opacity: 0; transform: translateY(0.35em); } }
  @keyframes opduiken { from { opacity: 0; transform: translateY(0.75rem) scale(0.96); } }
  @keyframes opstijgen { from { opacity: 0; transform: translateY(3rem); } }
  @keyframes zweven { 50% { transform: translateY(-0.6rem) rotate(-1.5deg); } }
  @keyframes zweven-klein { 50% { transform: translateY(-0.35rem); } }
  @keyframes kloppen { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
  @keyframes verschijnen { from { opacity: 0; transform: translateY(0.25rem); } }
  @keyframes verdwijnen { from { opacity: 1; } to { opacity: 0; } }
  @keyframes kiezen { from { background: var(--color-vlak); color: var(--color-inkt); } }
  @keyframes oranje-naar-groen { from { background: var(--color-oranje); } }
  @keyframes afvinken { from { background: var(--color-vlak); color: transparent; } }
  @keyframes vink-tekenen { from { stroke-dashoffset: 24; } }

  /* Hero: label, titel woord voor woord, tekst, knoppen, raket */
  .hero .label { animation: omhoog 0.6s var(--ease-out-expo) both; }
  .hero .woord { display: inline-block; animation: omhoog 0.6s var(--ease-out-expo) both; }
  .hero .woord:nth-child(1) { animation-delay: 0.08s; }
  .hero .woord:nth-child(2) { animation-delay: 0.14s; }
  .hero .woord:nth-child(3) { animation-delay: 0.2s; }
  .hero .woord:nth-child(4) { animation-delay: 0.26s; }
  .hero .ondertitel { animation: omhoog 0.6s 0.36s var(--ease-out-expo) both; }
  .hero .knoppen { animation: omhoog 0.6s 0.44s var(--ease-out-expo) both; }
  .hero-raket { animation: opstijgen 1s 0.4s var(--ease-out-expo) both; }
  .hero-raket picture { display: block; animation: zweven 6s 1.4s ease-in-out infinite; }
  .stip::after { animation: kloppen 1.8s ease-out infinite; }
  .melding--links { animation: opduiken 0.6s 1.1s var(--ease-out-expo) both, zweven-klein 7s 1.7s ease-in-out infinite; }
  .melding--rechts { animation: opduiken 0.6s 1.8s var(--ease-out-expo) both, zweven-klein 8s 2.4s ease-in-out infinite; }

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

  /* Blokken schuiven in beeld; kaarten in één rij na elkaar (--i komt uit het script) */
  .beweegt .onthul {
    opacity: 0; transform: translateY(1rem);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .beweegt .onthul.in-beeld { opacity: 1; transform: none; }

  /* Schermpjes in de stappen: spelen af zodra ze in beeld zijn */
  .beweegt .tijden .gekozen { animation: kiezen 0.35s 0.9s ease-out both; }
  .beweegt .ingepland { animation: verschijnen 0.4s 1.4s var(--ease-out-expo) both; }
  .beweegt .tegel { animation: verschijnen 0.5s var(--ease-out-expo) both; }
  .beweegt .tegel:nth-child(1) { animation-delay: 0.4s; }
  .beweegt .tegel:nth-child(2) { animation-delay: 0.9s; }
  .beweegt .lampje { animation: oranje-naar-groen 0.3s 1.6s both; }
  .beweegt .status .eerst { animation: verdwijnen 0.25s 1.6s both; }
  .beweegt .status .dan { animation: verschijnen 0.3s 1.7s var(--ease-out-expo) both; }
  .beweegt .scherm--doelen .vinkje { animation: afvinken 0.3s ease-out both; }
  .beweegt .scherm--doelen .vinkje svg { animation: vink-tekenen 0.35s ease-out both; }
  .beweegt .scherm--doelen li:nth-child(1) .vinkje,
  .beweegt .scherm--doelen li:nth-child(1) .vinkje svg { animation-delay: 0.6s; }
  .beweegt .scherm--doelen li:nth-child(2) .vinkje,
  .beweegt .scherm--doelen li:nth-child(2) .vinkje svg { animation-delay: 1.2s; }
  .beweegt .scherm--doelen li:nth-child(3) .vinkje,
  .beweegt .scherm--doelen li:nth-child(3) .vinkje svg { animation-delay: 1.8s; }
  /* Tot dan staan ze stil op de beginstand. Na de regels hierboven, want
     "animation: …" zet de afspeelstand anders weer aan. */
  .beweegt .scherm:not(.in-beeld) * { animation-play-state: paused; }

  /* Vragen klappen vloeiend open (Chrome, Edge; elders direct open) en het + wordt een × */
  .vragen summary svg { transition: transform 0.25s var(--ease-out-expo); }
  @supports (interpolate-size: allow-keywords) {
    .vragen { interpolate-size: allow-keywords; }
    .vragen details::details-content { height: 0; overflow: clip; transition: height 0.3s var(--ease-out-expo), content-visibility 0.3s allow-discrete; }
    .vragen details[open]::details-content { height: auto; }
  }
}

@media print {
  .onthul { opacity: 1 !important; transform: none !important; }
}