/* ==========================================================================
   avplanning, platformpagina's
   --------------------------------------------------------------------------
   Toon: helder, vriendelijk, precies. De doelgroep is een ondernemer die
   tussen twee klanten door iets regelt, geen ontwerper. Alles is gericht op zo
   min mogelijk wrijving: grote raakvlakken, en per scherm één duidelijke vraag.

   Poppins voor alles. Eén familie, met gewicht en spatiëring als enige
   verschil tussen een kop en een zin. Poppins wordt los bij grote formaten,
   dus koppen staan op negatieve letterspatiëring.

   Het verloop van lila naar goud is het merk. Het staat daarom op precies twee
   plekken: het woordmerk en de markering van een net binnengekomen boeking.
   Wordt het een achtergrondwaas of een knopvulling, dan betekent het niets meer.
   ========================================================================== */

:root {
  /* Grond en inkt. De inkt is pruimzwart en geen grijs: hij komt uit het
     lila-uiteinde van het verloop, zodat zwart en merk bij elkaar horen. */
  --mist:        #f6f3fa;
  --mist-diep:   #ede7f4;
  --mist-rand:   #ded3ea;
  --nacht:       #1b1430;
  --nacht-zacht: #514a66;
  --nacht-licht: #8b859c;

  /* Het merk. cbaae6 haalt op wit maar 1.6:1, dus voor tekst en lijnen is er
     een donkerder druif die wel leesbaar is. */
  --lila:        #cbaae6;
  --goud:        #ffcd28;
  --druif:       #6d4a95;
  --druif-diep:  #56397a;
  --druif-waas:  rgba(109, 74, 149, 0.08);

  /* Het merkverloop, zoals afgesproken: lila naar goud.
     Let op waar je het gebruikt. Beide uiteinden zijn lichte kleuren en halen
     op onze lichte grond maar zo'n 1.6:1. Dat is prima voor een vlak of voor
     tekst die groot genoeg is om als beeld te lezen, en onleesbaar voor een
     woord van 1,3rem. Vandaar de tweede variant: dezelfde overgang van paars
     naar goud, maar donker genoeg om te lezen. */
  --verloop:      linear-gradient(96deg, #cbaae6 0%, #e0b9a0 45%, #ffcd28 100%);
  --verloop-diep: linear-gradient(96deg, #8256b5 0%, #a9652f 52%, #b07d06 100%);

  --groen:       #2f6b4f;
  --groen-waas:  rgba(47, 107, 79, 0.1);
  --rood:        #a3342a;
  --rood-waas:   rgba(163, 52, 42, 0.08);

  --lijn:        rgba(27, 20, 48, 0.14);
  --lijn-zacht:  rgba(27, 20, 48, 0.08);

  --schrift:     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-kop: var(--schrift);

  --ronding:     14px;
  --ronding-s:   9px;

  /* Eén schaduw, laag en zacht. Niets zweeft hier. */
  --schaduw:     0 1px 2px rgba(27, 20, 48, 0.05), 0 8px 24px -12px rgba(27, 20, 48, 0.22);

  /* De oude namen wijzen naar de nieuwe, zodat de overige platformpagina's
     (gids, voorwaarden, privacy, inloggen, beheer) meelopen met het nieuwe
     merk zonder dat elk bestand langs hoeft. Nieuwe code gebruikt de namen
     hierboven; deze staan er voor wat er al was. */
  --papier:      var(--mist);
  --papier-diep: var(--mist-diep);
  --papier-rand: var(--mist-rand);
  --inkt:        var(--nacht);
  --inkt-zacht:  var(--nacht-zacht);
  --inkt-licht:  var(--nacht-licht);
  --klei:        var(--druif);
  --klei-diep:   var(--druif-diep);
  --klei-waas:   var(--druif-waas);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

/* Nauwelijks zichtbare korrel, zodat het papier geen vlak scherm is. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

/* ── Typografie ─────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--schrift-kop);
  font-weight: 600;
  /* Poppins is geometrisch en loopt bij grote formaten uit elkaar. Zonder
     negatieve spatiëring leest een kop als losse letters in plaats van als
     een woord. */
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.1rem); }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--klei); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--klei-diep); }

.leidend  { font-size: 1.0625rem; color: var(--inkt-zacht); max-width: 46ch; }
.klein    { font-size: 0.875rem; color: var(--inkt-zacht); }
.fijn     { font-size: 0.8125rem; color: var(--inkt-licht); }

/* Klein opschrift boven een kop, met een streepje ervoor.
   Bewust geen kapitalen: een woord in blokletters leest trager en zegt niets
   extra's. Het streepje doet het werk van de uitlijning. */
.opschrift {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--druif);
  margin-bottom: 1rem;
}
.opschrift::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--verloop);
}

/* ── Structuur ──────────────────────────────────────────────────────── */

.omhulsel { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.smal     { max-width: 40rem; }

.balk {
  border-bottom: 1px solid var(--lijn-zacht);
  background: rgba(246, 243, 250, 0.86);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.balk-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
}

/* Op een telefoon past de knoptekst niet naast het woordmerk en breekt hij
   over twee regels, waardoor de hele balk uit elkaar valt. Kleiner, dichter
   op elkaar, en de knop breekt nooit. */
@media (max-width: 26rem) {
  .balk-binnen { height: 60px; gap: 0.5rem; }
  .balk .rij { gap: 0.55rem; }
  .balk .knop { padding: 0.55rem 0.8rem; font-size: 0.8125rem; }
  .merk { font-size: 1.15rem; }
}

/* Het woordmerk draagt het verloop.
   De kleur staat eerst gewoon op druif, en pas als de browser tekst als masker
   aankan wordt hij doorzichtig. Andersom is een merknaam die onzichtbaar wordt
   zodra background-clip niet werkt, en dat risico nemen we niet met de naam
   van het bedrijf. */
.merk {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--druif);
  text-decoration: none;
  line-height: 1;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .merk {
    background: var(--verloop-diep);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Groot, voor de hero en voor beeld dat gedeeld wordt. Hier kan het merkverloop
   zelf wel: bij dit formaat leest de naam als vorm, niet als tekst. */
.merk-groot { font-size: clamp(2.6rem, 1.4rem + 5vw, 4.5rem); letter-spacing: -0.05em; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .merk-groot { background: var(--verloop); }
}

/* Op een donkere ondergrond klopt het merkverloop juist wel, en goed ook:
   lila haalt daar ruim 8:1 en goud ruim 11:1. Voor social en video. */
.op-nacht .merk,
.merk-op-nacht { color: var(--lila); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .op-nacht .merk,
  .merk-op-nacht { background: var(--verloop); }
}

/* ── Twee kolommen: formulier links, rust rechts ────────────────────── */

.gespleten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 68px);
}
@media (min-width: 62rem) {
  .gespleten { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.gespleten-werk {
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gespleten-werk > * { width: 100%; max-width: 30rem; margin-inline: auto; }

.gespleten-rust {
  display: none;
  background: var(--papier-diep);
  border-left: 1px solid var(--papier-rand);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 62rem) { .gespleten-rust { display: flex; } }

/* ── Formulier ──────────────────────────────────────────────────────── */

.veld { margin-bottom: 1.25rem; }

.veld > label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  letter-spacing: -0.005em;
}

.veld .uitleg {
  font-size: 0.8125rem;
  color: var(--inkt-licht);
  margin: 0.35rem 0 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--inkt);
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-s);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--klei);
  box-shadow: 0 0 0 3px var(--klei-waas);
}
input::placeholder { color: #b6bac2; }

/* Adresveld met het achtervoegsel er vast aan. */
.adresveld {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-s);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.adresveld:focus-within {
  border-color: var(--klei);
  box-shadow: 0 0 0 3px var(--klei-waas);
}
.adresveld input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.adresveld input:focus { box-shadow: none; }
.adresveld .achtervoegsel {
  display: flex;
  align-items: center;
  padding: 0 0.8rem;
  background: var(--papier-diep);
  border-left: 1px solid var(--lijn-zacht);
  color: var(--inkt-zacht);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.adres-melding { font-size: 0.8125rem; margin-top: 0.4rem; min-height: 1.2em; }
.adres-melding.vrij  { color: var(--groen); }
.adres-melding.bezet { color: var(--rood); }

/* Vinkje met een groot raakvlak. */
.vinkje {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--inkt-zacht);
  cursor: pointer;
  line-height: 1.5;
}
.vinkje input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--klei);
}

/* ── Knoppen ────────────────────────────────────────────────────────── */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--ronding-s);
  cursor: pointer;
  text-decoration: none;
  /* Een knoplabel dat over twee regels breekt maakt van een balk een puinhoop. */
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
}
.knop:active { transform: translateY(1px); }

.knop-vol {
  background: var(--inkt);
  color: var(--papier);
  box-shadow: var(--schaduw);
}
.knop-vol:hover { background: #000; color: var(--papier); }

.knop-klei { background: var(--klei); color: #fff; box-shadow: var(--schaduw); }
.knop-klei:hover { background: var(--klei-diep); color: #fff; }

.knop-rand {
  background: transparent;
  border-color: var(--lijn);
  color: var(--inkt);
}
.knop-rand:hover { border-color: var(--inkt-licht); background: rgba(255, 255, 255, 0.6); }

.knop-breed { width: 100%; }
.knop[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Meldingen ──────────────────────────────────────────────────────── */

.melding {
  padding: 0.85rem 1rem;
  border-radius: var(--ronding-s);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.melding-fout    { background: var(--rood-waas);  border-color: rgba(163, 52, 42, 0.22);  color: #7d2820; }
.melding-goed    { background: var(--groen-waas); border-color: rgba(67, 104, 79, 0.22);  color: #2f4a37; }
.melding-let-op  { background: var(--klei-waas);  border-color: rgba(180, 85, 45, 0.22);  color: var(--klei-diep); }

/* ── Kaarten en lijsten ─────────────────────────────────────────────── */

.kaart {
  background: #fff;
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--ronding);
  padding: 1.5rem;
}

.punten { list-style: none; margin: 0; padding: 0; }
.punten li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.85rem;
  color: var(--inkt-zacht);
}
.punten li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--klei);
}
.punten strong { color: var(--inkt); font-weight: 620; }

/* ── Stappen in de wizard ───────────────────────────────────────────── */

.stappen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  list-style: none;
  padding: 0;
}
.stappen li {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--inkt-licht);
  padding-top: 0.6rem;
  border-top: 2px solid var(--lijn);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.stappen li.nu     { color: var(--klei); border-top-color: var(--klei); }
.stappen li.gedaan { color: var(--inkt-zacht); border-top-color: var(--inkt-licht); }

/* ── Prijs ──────────────────────────────────────────────────────────── */

.prijs {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.prijs .bedrag { font-size: 3rem; line-height: 1; }
.prijs .per { font-size: 0.9375rem; font-weight: 400; letter-spacing: -0.01em; color: var(--nacht-zacht); }

/* ── Beweging: één keer bij het laden, verder rust ──────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .komt-op {
    animation: komt-op 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .komt-op:nth-child(1) { animation-delay: 0.02s; }
  .komt-op:nth-child(2) { animation-delay: 0.08s; }
  .komt-op:nth-child(3) { animation-delay: 0.14s; }
  .komt-op:nth-child(4) { animation-delay: 0.2s; }
  .komt-op:nth-child(5) { animation-delay: 0.26s; }
  .komt-op:nth-child(6) { animation-delay: 0.32s; }
}
@keyframes komt-op {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Kleine hulpjes ─────────────────────────────────────────────────── */

.rij      { display: flex; gap: 0.75rem; align-items: center; }
.rij-uit  { justify-content: space-between; }
.stapel   { display: grid; gap: 0.75rem; }
.midden   { text-align: center; }
.ruimte-boven { margin-top: 2rem; }
.scheiding { border: 0; border-top: 1px solid var(--lijn-zacht); margin: 2rem 0; }

table.net { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.net th {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  font-weight: 620;
  padding: 0 0.75rem 0.6rem;
  border-bottom: 1px solid var(--lijn);
}
table.net td { padding: 0.85rem 0.75rem; border-bottom: 1px solid var(--lijn-zacht); }
table.net tr:hover td { background: rgba(255, 255, 255, 0.7); }

.label {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.01em;
}
.label-proef  { background: var(--klei-waas);  color: var(--klei-diep); }
.label-actief { background: var(--groen-waas); color: #2f4a37; }
.label-stop   { background: var(--rood-waas);  color: #7d2820; }

code.adres {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  background: var(--papier-diep);
  border: 1px solid var(--papier-rand);
  border-radius: var(--ronding-s);
  padding: 0.2rem 0.45rem;
}

/* ==========================================================================
   De landingspagina
   --------------------------------------------------------------------------
   Eén idee draagt deze pagina: dit is een agenda, dus de pagina is een dag.
   De hero toont een echte dinsdag met afspraken erin, en de uitleg eronder
   loopt langs tijdstippen. Die tijdstippen zijn geen versiering: de inhoud is
   werkelijk een volgorde, van boeking tot betaling.
   ========================================================================== */

/* ── Hero: tekst links, de agenda ernaast ───────────────────────────── */

.hero {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  /* padding-block en niet de korte schrijfwijze: .hero staat later in dit
     bestand dan .omhulsel, dus `padding: x 0` zou de zijmarge van het omhulsel
     op nul zetten en de hele hero tegen de schermrand duwen. */
  padding-block: clamp(2.5rem, 7vh, 5rem) clamp(2.5rem, 6vh, 4rem);
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

.hero h1 { margin-bottom: 0.4em; }

.hero-tekst { max-width: 34rem; }

.hero-uitleg {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--nacht-zacht);
  max-width: 38ch;
}

.hero-doen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
  margin-top: 2rem;
}

/* ── De agenda: het enige kaartje op de pagina ──────────────────────────
   Bewust het enige. Zo betekent de kaartvorm "dit is jouw scherm", in plaats
   van dat alles op de pagina in een doosje zit. */

.agenda {
  background: #fff;
  border: 1px solid var(--mist-rand);
  border-radius: var(--ronding);
  box-shadow: 0 2px 4px rgba(27, 20, 48, 0.04), 0 24px 48px -28px rgba(27, 20, 48, 0.35);
  overflow: hidden;
  max-width: 27rem;
}
@media (min-width: 60rem) { .agenda { margin-left: auto; } }

.agenda-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.agenda-kop strong { font-weight: 600; letter-spacing: -0.02em; }
.agenda-kop span { font-size: 0.8125rem; color: var(--nacht-licht); }

.agenda-rij {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0 0.9rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.agenda-rij:last-child { border-bottom: 0; }

.agenda-tijd {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nacht-licht);
  /* Cijfers even breed, anders dansen de tijden onder elkaar. */
  font-variant-numeric: tabular-nums;
  padding-top: 0.05rem;
}
.agenda-wat { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; }
.agenda-wie { font-size: 0.8125rem; color: var(--nacht-zacht); }

/* De net binnengekomen boeking. Dit is de tweede en laatste plek waar het
   verloop staat, en het markeert precies waar het product zijn werk doet. */
.agenda-nieuw { position: relative; background: rgba(203, 170, 230, 0.07); }
.agenda-nieuw::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--verloop);
}
.agenda-merk {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 100px;
  background: var(--verloop);
  color: #3a2b1a;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.1em;
}

@media (prefers-reduced-motion: no-preference) {
  .agenda-nieuw { animation: boeking-binnen 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }
}
/* Bewust zonder opacity. Een animatie die op opacity 0 begint en met
   fill-mode both blijft staan, laat de inhoud verdwijnen zodra de animatie om
   welke reden dan ook niet loopt. Dat is hier al eens misgegaan op de
   voorwaardenpagina. Deze schuift alleen, dus mislukt hij, dan staat de regel
   er gewoon. */
@keyframes boeking-binnen {
  from { transform: translateX(-10px); }
  to   { transform: none; }
}

/* ── De dag: de uitleg, langs de klok ───────────────────────────────── */

.dag { list-style: none; margin: 0; padding: 0; max-width: 46rem; }

.dag li {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0 1.25rem;
  padding: 0 0 1.75rem;
  position: relative;
}
.dag li:last-child { padding-bottom: 0; }

/* De lijn die de dag doorloopt, zodat het een tijdlijn is en geen lijstje. */
.dag li::before {
  content: "";
  position: absolute;
  left: calc(4.2rem + 0.6rem - 1px);
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: var(--lijn-zacht);
}
.dag li:last-child::before { display: none; }

.dag-tijd {
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--druif);
  letter-spacing: -0.01em;
  padding-top: 0.1rem;
}
.dag-wat { margin: 0 0 0.25rem; font-weight: 600; letter-spacing: -0.02em; }
.dag-wie { margin: 0; color: var(--nacht-zacht); max-width: 52ch; }

/* ── Wat je krijgt ──────────────────────────────────────────────────── */

/* Drie kolommen en niet meer. Bij vier wordt elke kolom zo smal dat een kop van
   vier woorden over twee regels breekt en de tekst rafelt. */
.krijg {
  display: grid;
  gap: 2rem 2.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 64rem;
}
@media (min-width: 58rem) {
  .krijg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.krijg h3 { margin-bottom: 0.3rem; }
.krijg p { color: var(--nacht-zacht); font-size: 0.9375rem; margin: 0; }

/* ── Knop in merkkleur, voor de ene belangrijkste stap ──────────────── */

/* De knop waar alles om draait.
   
   Hij was pruimzwart, net als elke andere knop op de site en net als die van
   elke andere aanbieder. Het merk zat nergens op de plek waar iemand besluit.
   
   Nu het goud uit het verloop, effen. Effen en niet het verloop zelf: die blijft
   gereserveerd voor het woordmerk en de binnengekomen boeking, precies zoals
   bovenaan dit bestand staat. Een verloop dat ook knopvulling wordt betekent
   niets meer, en in de navbar zou het bovendien naast het woordmerk staan
   concurreren met zichzelf.
   
   Pruimzwarte tekst op dit goud haalt ruim 12:1 contrast, dus hij leest ook
   voor wie slecht ziet. */
.knop-merk {
  background: var(--goud);
  color: var(--nacht);
  box-shadow: 0 1px 2px rgba(27, 20, 48, 0.18);
}
.knop-merk:hover {
  background: #f5bf00;
  color: var(--nacht);
}

/* Op de donkere balk moet hij juist niet schreeuwen: daar is de grond al
   pruimzwart en trekt het goud vanzelf de aandacht. */
.band .knop-merk,
.nacht .knop-merk { box-shadow: none; }

/* ==========================================================================
   Balk, voet en de prijscalculator
   ========================================================================== */

/* ── De balk ────────────────────────────────────────────────────────────
   Op een breed scherm staat alles op een rij. Wordt het smal, dan zakken de
   paginalinks naar een eigen rij eronder: merk en de ene belangrijkste knop
   blijven boven. Bewust geen uitklapmenu, want dat is een extra tik voor iets
   wat gewoon zichtbaar kan zijn. */

.balk-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-right: auto;
  margin-left: 2.25rem;
}
.balk-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nacht-zacht);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.balk-links a:hover { color: var(--nacht); }
.balk-links a[aria-current="page"] {
  color: var(--nacht);
  border-bottom-color: var(--druif);
}

.balk-doen { display: flex; align-items: center; gap: 0.9rem; }

@media (max-width: 52rem) {
  .balk-binnen { flex-wrap: wrap; height: auto; padding-block: 0.7rem 0; row-gap: 0.1rem; }
  .balk-links {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 1.25rem;
    padding: 0.55rem 0 0.7rem;
    overflow-x: auto;
    /* Een horizontale schuifbalk onder een navigatie is lelijk en niet nodig:
       er passen altijd genoeg links, en wie er nog een bijzet moet het zien. */
    scrollbar-width: none;
  }
  .balk-links::-webkit-scrollbar { display: none; }
  .balk-links a { white-space: nowrap; }
  .balk-doen { margin-left: auto; }
}

@media (max-width: 30rem) {
  /* Inloggen staat ook in de voet en op het aanmeldscherm. Op een telefoon
     wint de knop die mensen hier moeten indrukken. */
  .balk-inloggen { display: none; }
}

/* ── De voet ────────────────────────────────────────────────────────── */

.voet { padding-top: 2rem; padding-bottom: 2.5rem; }

.voet-raster {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: 2.25rem;
}
@media (min-width: 62rem) {
  .voet-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.voet-merk .merk { font-size: 1.25rem; }

.voet-kolom { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.voet-kolom h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nacht);
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.voet-kolom a {
  font-size: 0.9375rem;
  color: var(--nacht-zacht);
  text-decoration: none;
}
.voet-kolom a:hover { color: var(--druif); text-decoration: underline; text-underline-offset: 3px; }

.voet-onder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn-zacht);
}

/* ── De prijscalculator ─────────────────────────────────────────────── */

.calc {
  display: grid;
  gap: 2rem;
  align-items: start;
  padding: 1.75rem;
  border: 1px solid var(--mist-rand);
  border-radius: var(--ronding);
  background: #fff;
}
@media (min-width: 54rem) {
  .calc { grid-template-columns: 1fr 1fr; gap: 3rem; padding: 2.25rem; }
}

.calc-vraag label { display: block; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 1rem; }

.calc-getal {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.calc-getal output {
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc-getal span { color: var(--nacht-zacht); font-size: 0.9375rem; }

input[type="range"] {
  width: 100%;
  accent-color: var(--druif);
  height: 1.75rem;
}

.calc-uitkomst { border-left: 3px solid transparent; border-image: var(--verloop) 1; padding-left: 1.25rem; }

.calc-bedrag {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.calc-bedrag output { font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-bedrag span { font-size: 0.9375rem; font-weight: 400; color: var(--nacht-zacht); letter-spacing: -0.01em; }

.calc-regels { margin-top: 1.25rem; display: grid; gap: 0.4rem; }
/* Zonder deze regel wint `display: flex` van het hidden-attribuut: een
   auteursregel verslaat de stijl die de browser zelf meebrengt, en dan staat
   er een lege regel op het scherm. */
.calc-regel[hidden] { display: none; }

.calc-regel {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
  color: var(--nacht-zacht);
}
.calc-regel strong { color: var(--nacht); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── De vergelijking ────────────────────────────────────────────────── */

.vergelijk { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.vergelijk-kaart {
  padding: 1.5rem;
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--ronding);
  background: #fff;
}
.vergelijk-kaart.is-ons { border-color: transparent; box-shadow: 0 0 0 2px var(--druif); }
.vergelijk-kaart h3 { margin-bottom: 0.75rem; }
.vergelijk-bedrag {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.vergelijk-kaart .fijn { margin-top: 0.6rem; }

/* ── Functies en vragen ─────────────────────────────────────────────── */

.functie-groep { padding-bottom: 2.75rem; }
.functie-groep > h2 { margin-bottom: 0.4rem; }
.functie-groep > .leidend { margin-bottom: 1.75rem; }

.functie-lijst {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 64rem;
}
@media (min-width: 58rem) {
  .functie-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.functie-lijst h3 { margin-bottom: 0.25rem; }
.functie-lijst p { margin: 0; font-size: 0.9375rem; color: var(--nacht-zacht); }

/* Een vraag en antwoord. Bewust open, niet uitklapbaar: wie op een
   vragenpagina komt wil scannen, en dichtgeklapte antwoorden worden door
   zoekmachines slechter opgepikt. */
/* Alleen deze regel is hier nog nodig. De rest van wat hier stond (padding,
   rand, breedte, en de opmaak van h3 en p) werd verderop in dit bestand
   opnieuw gezet voor de uitklapvragen op /vragen en deed hier dus niets meer.
   Juist die dode padding: 1.5rem 0 wekte de indruk dat de vragen op de
   startpagina lucht hadden, terwijl ze in werkelijkheid tegen elkaar plakten.
   Die staan nu in .startvraag, met een eigen naam. */
.vraag:last-child { border-bottom: 0; }

/* Twee kolommen alleen als ze ook echt passen. Op een telefoon breekt
   "Bevestigingen en herinneringen per e-mail" anders over vijf regels. */
.punten-twee { columns: 1; }
@media (min-width: 44rem) {
  .punten-twee { columns: 2; column-gap: 2.5rem; }
  .punten-twee li { break-inside: avoid; }
}

/* ── De branchevakken met foto ──────────────────────────────────────────
   Vier ingangen naar de gids. De foto draagt de herkenning, het label doet
   het werk. Bewust geen tekst over de foto heen: dat leest slecht zodra een
   foto een lichte plek heeft, en dan is het niet meer te repareren. */

.vakken {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
@media (min-width: 56rem) {
  .vakken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vak {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--ronding);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--lijn-zacht);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.vak:hover { box-shadow: var(--schaduw); border-color: var(--mist-rand); }
.vak:focus-visible { outline: 2px solid var(--druif); outline-offset: 2px; }

.vak picture { display: block; }
.vak img {
  display: block;
  width: 100%;
  height: auto;
  /* De verhouding staat vast, zodat de pagina niet verspringt terwijl de foto
     nog laadt. De breedte en hoogte staan ook op de img zelf. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vak-naam {
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 0.9rem 1rem 0.2rem;
}
.vak-doen {
  font-size: 0.8125rem;
  color: var(--druif);
  padding: 0 1rem 1rem;
}
.vak:hover .vak-doen { text-decoration: underline; text-underline-offset: 3px; }

/* ── De hero met foto ───────────────────────────────────────────────────
   De foto laat zien voor wie het is, het agendakaartje wat hij krijgt. Het
   kaartje ligt over de foto heen zodat het één beeld wordt. Op een smal scherm
   stapelt het: daar is geen ruimte voor overlap en zou het kaartje de foto
   afdekken. */

.hero-beeld { position: relative; }

.hero-beeld > picture { display: block; }
.hero-beeld > picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ronding);
}

@media (min-width: 60rem) {
  /* Het kaartje pakt een hoek, niet het hele vlak. Legde het over de volle
     breedte, dan was de foto eronder nauwelijks nog te zien en had hij net zo
     goed weg kunnen blijven. */
  .hero-beeld .agenda {
    position: absolute;
    right: -3.5rem;
    bottom: -3rem;
    width: 19rem;
    max-width: none;
    margin: 0;
  }
  /* Staander dan een liggende foto, zodat de kolom gevuld is en het kaartje
     alleen de onderhoek pakt. De bovenkant van de foto blijft vrij, en daar
     zit het onderwerp. */
  .hero-beeld > picture img { aspect-ratio: 5 / 4; }
  /* Ruimte onder de hero, anders steekt het kaartje in de tekst eronder. */
  .hero { padding-bottom: clamp(4.5rem, 10vh, 7rem); }
}

@media (max-width: 59.99rem) {
  .hero-beeld .agenda { margin-top: -3rem; margin-inline: auto; position: relative; }
}

/* ── De teller ──────────────────────────────────────────────────────────
   Plus en min in plaats van een schuifregelaar: een aantal medewerkers is een
   geheel getal en meestal een klein getal, en dan is aantikken sneller en
   nauwkeuriger dan schuiven. Het veld blijft een number, zodat je het ook
   gewoon kunt intypen. */

.teller {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.75rem;
  border-radius: var(--ronding);
  background: #fff;
  border: 1px solid var(--mist-rand);
}
.teller > label { font-weight: 600; letter-spacing: -0.015em; margin-bottom: 1rem; }

.teller-knoppen { display: flex; align-items: center; gap: 0.75rem; }

.teller-knoppen button {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--lijn);
  background: #fff;
  color: var(--nacht);
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.teller-knoppen button:hover:not(:disabled) { border-color: var(--druif); background: var(--druif-waas); }
.teller-knoppen button:disabled { opacity: 0.35; cursor: not-allowed; }
.teller-knoppen button:focus-visible { outline: 2px solid var(--druif); outline-offset: 2px; }

.teller-knoppen input {
  width: 5.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding: 0.5rem;
}
/* De eigen pijltjes van de browser zijn klein en overbodig naast onze knoppen. */
.teller-knoppen input::-webkit-outer-spin-button,
.teller-knoppen input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.teller-knoppen input { appearance: textfield; -moz-appearance: textfield; }

/* ── De pakketkolommen ──────────────────────────────────────────────── */

.pakketten {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}

.pakket {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: var(--ronding);
  border: 1px solid var(--lijn-zacht);
  background: #fff;
}
/* Onze kolom staat vooraan en draagt het merk, zodat je in één oogopslag ziet
   welke van de drie de onze is. */
.pakket.is-ons { border-color: transparent; box-shadow: 0 0 0 2px var(--druif), var(--schaduw); }

.pakket-kop { margin-bottom: 1.25rem; }
.pakket-kop h2 { font-size: 1.375rem; margin: 0 0 0.2rem; }
.pakket-kop p { margin: 0; font-size: 0.875rem; color: var(--nacht-zacht); }

.pakket-prijs { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.pakket-euro { font-size: 1.5rem; font-weight: 600; }
.pakket-prijs output {
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pakket-per { font-size: 0.9375rem; color: var(--nacht-zacht); }

.pakket-btw {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--nacht-licht);
  min-height: 1.2em;
}

.pakket-lijst { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; }
.pakket-lijst li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.9375rem;
  color: var(--nacht-zacht);
}
.pakket-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.6rem;
  height: 0.35rem;
  border-left: 2px solid var(--druif);
  border-bottom: 2px solid var(--druif);
  transform: rotate(-45deg);
}

.pakket-opmerking {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--nacht-zacht);
  padding-top: 1.25rem;
  border-top: 1px solid var(--lijn-zacht);
}

.pakket .knop { margin-top: auto; }

/* ── Banden ─────────────────────────────────────────────────────────────
   Een sectie met een eigen achtergrond, zodat een lange pagina ritme krijgt
   en je ziet waar het ene onderwerp ophoudt. Zonder dat leest alles als één
   lap tekst, hoe goed de tekst ook is. */

.band { background: var(--mist-diep); }
.band + .band { border-top: 1px solid var(--mist-rand); }

/* ── Productschermen ────────────────────────────────────────────────────
   Echte schermafdrukken uit het product. Ze staan in een lijstje met een
   bijschrift eronder: het beeld toont wat het is, het bijschrift zegt waarom
   het ertoe doet. Tekst over een schermafdruk heen leest slecht en schaalt
   niet mee. */

.schermen {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
@media (min-width: 60rem) {
  .schermen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.scherm { margin: 0; }

.scherm picture { display: block; }
.scherm img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ronding);
  border: 1px solid var(--mist-rand);
  /* Een schaduw die de afdruk van het papier tilt, zodat duidelijk is dat je
     naar een scherm kijkt en niet naar een plaatje in de tekst. */
  box-shadow: 0 2px 6px rgba(27, 20, 48, 0.06), 0 18px 40px -24px rgba(27, 20, 48, 0.4);
  background: #fff;
}

.scherm figcaption {
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  color: var(--nacht-zacht);
  max-width: 44ch;
}
.scherm figcaption strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--nacht);
  margin-bottom: 0.25rem;
}

/* ── De bon ─────────────────────────────────────────────────────────────
   Een uitgewerkt voorbeeld leest als een kassabon: regels, een streep, een
   totaal. Die vorm kent iedereen, en juist daarom hoef je hem niet uit te
   leggen. */

.bon-naast {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 56rem) {
  .bon-naast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

.bon {
  padding: 1.75rem;
  border-radius: var(--ronding);
  background: #fff;
  border: 1px solid var(--mist-rand);
}

.bon-regel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.7rem 0;
  font-size: 0.9375rem;
  color: var(--nacht-zacht);
}
.bon-regel strong {
  color: var(--nacht);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bon-tussen { border-top: 1px solid var(--lijn-zacht); margin-top: 0.35rem; }

.bon-totaal {
  border-top: 2px solid var(--nacht);
  margin-top: 0.35rem;
  padding-top: 1rem;
  font-size: 1.0625rem;
  color: var(--nacht);
  font-weight: 600;
}
.bon-totaal strong { font-size: 1.75rem; letter-spacing: -0.03em; }

/* Waar je niet voor betaalt. Een streep door de bolletjes zou te veel zijn;
   het woord "geen" doet het werk al. */
.nietvoor { list-style: none; margin: 0; padding: 0; }
.nietvoor li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.9375rem;
  color: var(--nacht-zacht);
}
.nietvoor li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--verloop);
}
.nietvoor strong { display: block; color: var(--nacht); font-weight: 600; letter-spacing: -0.015em; }

/* ── Genummerde stappen ─────────────────────────────────────────────────
   Genummerd omdat het werkelijk een volgorde is. Bij een lijstje dat geen
   volgorde heeft zijn nummers misleidend. */

.stappen-groot {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  counter-reset: stap;
}
@media (min-width: 56rem) {
  .stappen-groot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}

.stappen-groot li { display: flex; gap: 1.1rem; align-items: flex-start; }

.stap-nummer {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verloop);
  color: #2b1f0a;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
}

.stappen-groot h3 { margin: 0.35rem 0 0.4rem; }
.stappen-groot p { font-size: 0.9375rem; color: var(--nacht-zacht); margin-bottom: 0.5rem; }
.stappen-groot p.fijn { margin-bottom: 0; }

/* ==========================================================================
   De functiepagina
   ==========================================================================
   Deze pagina was 22 functies lang en elke functie zag er hetzelfde uit: een
   vette regel met drie regels grijs eronder. 678 woorden zonder één beeld,
   zonder één lijst, in vier secties die visueel niet van elkaar verschilden.
   "Je eigen boekingspagina" stond er even zwaar op als "Wachtlijst", dus je oog
   had nergens om te landen en gleed van boven naar beneden.

   De oplossing is rangorde, geen versiering. Elke sectie leidt met de ene
   functie waar het om draait, met het werkelijke scherm ernaast, en zet de rest
   eronder als een korte lijst. Het beeld wisselt van kant per sectie, zodat je
   ziet dat er een nieuwe sectie begint zonder dat er een lijn voor nodig is.
   ========================================================================== */

/* ── De hoofdfunctie van een sectie ──────────────────────────────────── */
.fn-hoofd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 1.75rem;
}
.fn-hoofd-tekst h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.fn-hoofd-tekst p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inkt-licht);
  margin: 0;
  max-width: 44ch;
}

/* Het scherm zelf. Een rand en een zachte schaduw, zodat het als een venster
   leest en niet als een plaatje dat op de pagina is geplakt. */
.fn-beeld {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--lijn);
  box-shadow: 0 12px 32px rgba(27, 20, 48, 0.1);
  background: #fff;
}
.fn-beeld img { display: block; width: 100%; height: auto; }

/* Om de sectie wisselt het beeld van kant. Dat geeft ritme zonder dat er een
   scheidingslijn voor nodig is. */
.fn-hoofd.gedraaid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.fn-hoofd.gedraaid .fn-hoofd-tekst { order: 2; }
.fn-hoofd.gedraaid .fn-beeld { order: 1; }

/* ── De rest van de sectie ───────────────────────────────────────────── */
.fn-verder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.25rem clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn);
}
.fn-verder > div {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--mist-rand);
}
.fn-verder h4 {
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 0.2rem;
}
.fn-verder p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--inkt-licht);
  margin: 0;
}

/* ── De sectie over eigenaarschap ────────────────────────────────────── */
/* Bewust anders: dit gaat niet over een functie die je kunt aanzetten maar
   over van wie je gegevens zijn. Smaller, zonder beeld, op een eigen vlak. */
.fn-vertrouwen {
  background: var(--mist-diep);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.fn-vertrouwen h2 { margin-top: 0; }
/* Vier punten in een rooster van drie laat er eentje alleen achter, en dat
   leest als een vergeten regel. Hier dus twee kolommen: vier past dan precies. */
.fn-vertrouwen .fn-verder {
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.fn-vertrouwen .fn-verder { border-top-color: var(--mist-rand); }
.fn-vertrouwen .fn-verder > div { border-bottom-color: rgba(27, 20, 48, 0.08); }

@media (max-width: 52rem) {
  /* Let op de tweede selector: .fn-hoofd.gedraaid telt twee klassen en wint
     anders van .fn-hoofd alleen, ook binnen deze mediaquery. Dan blijft de
     omgekeerde sectie op een telefoon in twee kolommen staan terwijl de rest
     al onder elkaar is. */
  .fn-hoofd,
  .fn-hoofd.gedraaid { grid-template-columns: minmax(0, 1fr); }
  /* Op een smal scherm staat het beeld altijd onder de tekst: eerst weten
     waar je naar kijkt, dan het plaatje. */
  .fn-hoofd.gedraaid .fn-hoofd-tekst { order: 0; }
  .fn-hoofd.gedraaid .fn-beeld { order: 0; }
}

/* ==========================================================================
   De vragenpagina
   ==========================================================================
   Achttien vragen, alle antwoorden open, in één smalle kolom links terwijl de
   rechterhelft van het scherm leeg bleef. Dat werd 3859 pixels tekst in één
   ruk, en niemand komt op een vragenpagina om alles te lezen: je komt met één
   vraag.

   De antwoorden zijn nu ingeklapt met <details>. Dat is gewoon html, dus het
   werkt zonder javascript, met het toetsenbord, en zoeken in de pagina klapt
   het juiste antwoord vanzelf open. Achttien vragen passen zo op één scherm en
   je ziet in één oogopslag of jouw vraag erbij staat.
   ========================================================================== */

.vr-indeling {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 2.5rem;
  align-items: start;
}

/* De wijzer loopt mee, zodat je bij "Gegevens" nog weet dat er ook een deel
   over geld is. */
.vr-wijzer { position: sticky; top: 5.5rem; }
.vr-wijzer-kop {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin: 0 0 0.75rem;
}
.vr-wijzer nav { display: flex; flex-direction: column; }
.vr-wijzer nav a {
  padding: 0.45rem 0 0.45rem 0.85rem;
  border-left: 2px solid var(--lijn);
  font-size: 0.9375rem;
  color: var(--inkt);
  text-decoration: none;
}
.vr-wijzer nav a:hover {
  border-left-color: var(--goud);
  color: var(--klei-diep);
}
.vr-wijzer-hulp {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--inkt-licht);
}

/* ── De vragen op de startpagina ─────────────────────────────────────────
   Bewust een eigen naam en niet .vraag. Die klasse wordt verderop in dit
   bestand opnieuw gedefinieerd voor de uitklapvragen op /vragen, met
   padding: 0, en omdat die later staat won hij ook hier. Gevolg: op de
   startpagina plakte het antwoord van de ene vraag tegen de kop van de
   volgende en las het hele blok als een dichte muur tekst.

   Twee kolommen zodra ze passen. Vier vragen onder elkaar in een kolom van
   46rem lieten op een breed scherm een derde van de breedte leeg, terwijl
   iemand hier juist wil scannen en niet lezen. */
.startvragen {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .startvragen {
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
  }
}

.startvraag {
  padding: 1.4rem 0;
  border-top: 1px solid var(--lijn-zacht);
}

.startvraag h3 {
  margin: 0 0 0.45rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.startvraag p {
  margin: 0;
  color: var(--inkt-zacht);
  /* Een antwoord van vier regels leest prettiger dan een van twee hele brede. */
  max-width: 34rem;
}

/* ── Een vraag ───────────────────────────────────────────────────────── */
.vraag {
  padding: 0;
  border-bottom: 1px solid var(--lijn-zacht);
  max-width: 46rem;
}
.vraag summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
}
/* Het standaardpijltje van de browser weg, zodat er een eigen teken kan staan
   dat op elk systeem hetzelfde is. */
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::marker { content: ""; }

.vraag summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.35rem;
  border-right: 2px solid var(--inkt-licht);
  border-bottom: 2px solid var(--inkt-licht);
  transform: rotate(45deg);
  transition: transform 160ms cubic-bezier(0.2, 0, 0.2, 1);
}
.vraag[open] summary::after { transform: rotate(-135deg); }
.vraag summary:hover { color: var(--klei-diep); }
.vraag summary:focus-visible {
  outline: 2px solid var(--goud);
  outline-offset: 3px;
  border-radius: 4px;
}

.vraag-antwoord { padding: 0 0 1.25rem; max-width: 60ch; }
.vraag-antwoord p { color: var(--nacht-zacht); margin: 0 0 0.7rem; }
.vraag-antwoord p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .vraag summary::after { transition: none; }
}

@media (max-width: 52rem) {
  .vr-indeling { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  /* Op een telefoon is een meelopende kolom in de weg: hij gaat boven de
     vragen staan en blijft daar. */
  .vr-wijzer { position: static; }
  .vr-wijzer nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
  .vr-wijzer nav a {
    border-left: 0;
    border: 1px solid var(--lijn);
    border-radius: 99px;
    padding: 0.35rem 0.85rem;
    font-size: 0.875rem;
  }
  .vr-wijzer-hulp { display: none; }
}