/* ============================================================
   Coachgevraagd — paginalaag
   Alleen layout en paginaspecifieke opmaak. Componenten staan in
   components.css, waarden in tokens.css. Ook hier: geen kleur buiten laag 2.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--surface); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* GEEN font-variant-numeric op body. Schibsted Grotesk geeft in de tnum-set ook
   komma en punt cijferbreedte: gemeten 4,24px -> 10,16px. Elke komma en punt in
   lopende tekst kreeg daardoor ~6px extra lucht, wat leest als een spatie voor
   het leesteken. Tabulaire cijfers horen alleen waar cijfers in kolommen
   uitlijnen; dat staat op .c-tier__prijs en .c-tier__voet in components.css. */
.wrap { width: min(72rem, 100% - var(--space-6)); margin-inline: auto; }
a { color: var(--color-primary); }

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--color-cta); color: var(--color-cta-text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
}
.overslaan:focus { left: var(--space-4); top: var(--space-4); }

/* ─────────── kop ─────────── */
.kop { border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 10; }
.kop__rij { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) 0; }
.merk { display: flex; align-items: center; gap: var(--space-2); min-height: 44px;
  font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--text-strong); text-decoration: none; }
/* Het merkteken in de markup krijgt zijn kleur hier, niet als hex in de SVG.
   components.css regel 6 verklaart dat er geen hexwaarde in componentcode staat;
   dat gold niet voor de inline SVG, precies waar het merkteken zit.
   De middelste balk is de actiekleur: van drie aanvragen is er een van jou. */
.merk__plaat { fill: var(--color-primary); }
.merk__regel { fill: var(--color-primary-mist); opacity: .45; }
.merk__regel--jij { fill: var(--color-cta); opacity: 1; }
/* Vinkjes in de hero. Stond eerder als style="color:var(--color-cta)" op elk
   van de drie SVG's; een inline style is niet te overschrijven en niet te meten. */
.punten svg { color: var(--color-cta); }
.kop__nav { display: flex; align-items: center; gap: var(--space-5); }
/* :not(.c-knop) is essentieel — zonder die uitzondering wint deze regel van
   .c-knop--primair (hogere specificiteit én later in de laadvolgorde) en
   rendert de knop in de nav grijs op klei: 1,30:1. */
.kop__nav a:not(.c-knop) { font-size: var(--fs-sm); color: var(--text-muted);
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.kop__nav a:not(.c-knop):hover { color: var(--text-strong); }
.kop__nav a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
/* .kop__nav a:not(.c-knop) hierboven is (0,2,1) en versloeg de oude selector
   .kop__nav .verbergklein (0,2,0): de nav klapte op mobiel nooit in. Deze is
   (0,3,1) en wint onmiskenbaar, ongeacht laadvolgorde. */
@media (max-width: 720px) {
  .kop__nav a.verbergklein:not(.c-knop) { display: none; }
}

/* ─────────── hero ─────────── */
.hero { padding: var(--space-8) 0 var(--space-7);
  background: linear-gradient(180deg, var(--surface-tint), var(--surface) 78%);
  border-bottom: 1px solid var(--border); }
.hero__rij { display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--space-7); align-items: center; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); }
h1 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1.02;
  color: var(--text-strong); margin: 0 0 var(--space-4); max-width: 17ch; font-weight: 400; }
.lead { font-size: var(--fs-md); color: var(--text-body); max-width: 44ch; margin: 0 0 var(--space-5); }
.punten { list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: grid; gap: var(--space-2); max-width: 52ch; }
.punten li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  align-items: start; font-size: var(--fs-base); }
.punten svg { margin-top: .38em; flex: none; }
.acties { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.mini { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-4) 0 0; max-width: 46ch; }

/* ─────────── mediaslot: foto of video, met merkbehandeling ─────────── */
.media { position: relative; overflow: hidden; border-radius: var(--card-radius);
  border: 1px solid var(--border); aspect-ratio: 3 / 2; background: var(--surface-tint); }
.media--breed { aspect-ratio: 21 / 9; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%,
    color-mix(in srgb, var(--accent-ink) 62%, transparent) 100%); }
.media__label { position: absolute; left: var(--space-3); bottom: var(--space-3);
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-cta-text);
  background: color-mix(in srgb, var(--accent-ink) 78%, transparent);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
/* Beeld vult het slot; de verhouding staat op .media, dus het beeld kan nooit
   de layout verschuiven terwijl het laadt. */
.media__beeld { width: 100%; height: 100%; object-fit: cover; display: block; }
.melding__teken { margin-top: .15rem; flex: none; }

/* ─────────── nicheraster: het aanbod-grid ─────────── */
.inleiding { max-width: 60ch; margin: 0 0 var(--space-6); }
.nicheraster { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.niche { display: grid; gap: var(--space-3); }
.niche picture { display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--card-radius); border: 1px solid var(--border);
  background: var(--surface-tint); }
.niche__beeld { width: 100%; height: 100%; object-fit: cover; display: block; }
.niche__naam { font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--text-strong); margin: 0; font-weight: 400; }
/* De prijs staat in de actiekleur omdat hij het beslispunt is, niet omdat hij
   opvalt: dit is het getal waarop de koper zijn niche kiest. */
/* Geen tabular-nums: dit is proza ("18 credits per aanvraag"), en de tnum-set
   verbreedt daar de cijfers met 4,7px zonder dat er iets uitlijnt. Zie de regel
   bovenaan .c-tier__prijs in components.css. */
.niche__prijs { font-size: var(--fs-sm); color: var(--accent); margin: 0;
  border-top: 2px solid var(--border); padding-top: var(--space-2); }

/* ─────────── dekking: het register van gemeenten ─────────── */
.gemeenten { list-style: none; margin: var(--space-5) 0 var(--space-5); padding: 0;
  columns: 3; column-gap: var(--space-5); font-size: var(--fs-sm); }
.gemeenten li { break-inside: avoid; padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border); color: var(--text-body); }

/* ─────────── banden ─────────── */
.band { padding: var(--space-8) 0 0; }
.band--vlak { background: var(--surface-tint); margin-top: var(--space-8);
  padding: var(--space-8) 0; border-block: 1px solid var(--border); }
.band--vlak + .band { padding-top: var(--space-8); }
.bandkop { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-5); }
.bandtitel { font-family: var(--font-display); font-size: var(--fs-xl);
  color: var(--text-strong); margin: 0 0 var(--space-4); font-weight: 400; max-width: 22ch; }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.stappen { list-style: none; margin: 0; padding: 0; }

/* ─────────── prijzen ─────────── */
/* .prijsrij is een <ul>. Zonder deze reset rendert hij met bolletjes en 40px
   padding-inline-start, en staat de rij scheef ten opzichte van .prijsvoet. */
.prijsrij { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.prijsvoet { font-size: var(--fs-sm); color: var(--text-muted);
  margin: var(--space-5) 0 0; max-width: 56ch; }
.modelrij { list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: grid; gap: var(--space-2); max-width: 58ch; }
.modelrij li { padding-left: var(--space-4); position: relative; font-size: var(--fs-base); }
.modelrij li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }

/* ─────────── bezwaren ─────────── */
.bezwaar { border-top: 1px solid var(--border); padding: var(--space-5) 0; }
.bezwaar:last-child { border-bottom: 1px solid var(--border); }
.bezwaar h3 { font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--text-strong); margin: 0 0 var(--space-2); font-weight: 400; }
.bezwaar p { margin: 0; color: var(--text-body); max-width: 62ch; }

/* ─────────── slotactie ─────────── */
.slot { margin-top: var(--space-8); padding: var(--space-7) var(--space-6);
  background: var(--color-primary); border-radius: var(--card-radius); text-align: center; }
.slot h2 { font-family: var(--font-display); font-size: var(--fs-xl);
  color: var(--text-on-primary); margin: 0 0 var(--space-3); font-weight: 400; }
.slot p { color: var(--text-on-primary); opacity: .86; margin: 0 auto var(--space-5);
  max-width: 46ch; font-size: var(--fs-base); }

/* ─────────── tekstpagina (privacy, voorwaarden) ─────────── */
.tekstpagina { padding: var(--space-8) 0; max-width: 68ch; }
.tekstpagina h1 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 400;
  color: var(--text-strong); margin: 0 0 var(--space-4); }
.tekstpagina h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 400;
  color: var(--text-strong); margin: var(--space-7) 0 var(--space-3); }
.tekstpagina h3 { font-size: var(--fs-md); font-weight: 600;
  color: var(--text-strong); margin: var(--space-5) 0 var(--space-2); }
.tekstpagina p { margin: 0 0 var(--space-4); max-width: 66ch; }
.tekstpagina .modelrij { margin-bottom: var(--space-5); }

/* ─────────── voet ─────────── */
.voet { border-top: 1px solid var(--border); margin-top: var(--space-8);
  padding: var(--space-6) 0 var(--space-8); font-size: var(--fs-sm); color: var(--text-muted); }
.voet__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5); }
.voet h2 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-strong); margin: 0 0 var(--space-2); }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; }
.voet li { display: flex; align-items: center; min-height: 44px; }
.voet a { color: var(--text-muted); display: inline-flex; align-items: center;
  min-height: 44px; }
.voet a:hover { color: var(--text-strong); }
.voet__slot { margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--border); font-size: var(--fs-xs); }

/* ─────────── entree: animeert alleen POSITIE ───────────
   Een animatie mag nooit de zichtbaarheid van inhoud bepalen. Loopt hij vast
   of draait hij niet, dan staat de inhoud er gewoon — 14px lager, meer niet. */
@keyframes binnen { from { transform: translateY(14px); } to { transform: none; } }
.reveal { animation: binnen .6s var(--ease-out) both; }
.reveal[data-vertraag="1"] { animation-delay: .08s; }
.reveal[data-vertraag="2"] { animation-delay: .16s; }
.reveal[data-vertraag="3"] { animation-delay: .24s; }
.reveal[data-vertraag="4"] { animation-delay: .32s; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }
@media (max-width: 900px) {
  .hero__rij, .raster-2 { grid-template-columns: 1fr; }
  .raster-3, .prijsrij { grid-template-columns: 1fr; }
  .nicheraster { grid-template-columns: repeat(2, 1fr); }
  .gemeenten { columns: 2; }
  .hero { padding: var(--space-6) 0 var(--space-6); }
}
@media (max-width: 460px) {
  .gemeenten { columns: 1; }
}