/* Taqqle, de pagina's behalve de homepage: gedeelde bouwstenen, juridische pagina's, gratis check, kennismaking, over ons en werving. Laadt na tokens.css en basis.css. Geen hexwaarden: alles uit tokens.css. */
/* Gedeeld door meer dan één pagina */

/* De ruimte na het blad dat over de naad hangt: op elke pagina dezelfde. De footer staat een sectie onder het blad, niet onder de naad (5.1, 5.8).
   Tot 1040 begint de volgende sectie 96 onder het object, zoals op Over ons (1.1, 5.5): anders valt daar op 390 maar 48 tussen */
main > .paginakop:last-child:not(.paginakop--vol) { margin-bottom: calc(var(--sectie) + var(--naad)); }
@media (max-width: 1040px) {
  .paginakop + .jaar, .paginakop + .sectie:not(.sectie--na-foto) { padding-top: calc(var(--sp-96) + var(--sp-48)); }
}

/* Het vel: de pdf op /gratis-check en de bedankpagina, de feiten op /kennismaking. Een blad van 427 breed, alles ink op wit. deel/vel-check.html en deel/vel-kennismaking.html */
.vel-groep { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); width: 100%; max-width: 427px; min-width: 0; }
.vel { --logo-hoogte: 15px; padding: var(--sp-24); }
.vel__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-16); margin-bottom: var(--sp-16); }
.vel__bijlage { color: var(--stil); font-size: 14px; line-height: 18px; font-weight: 500; }
.vel__voor { color: var(--zacht); font-size: 17px; line-height: 26px; }
/* Kerncijfers zoals op de eerste pagina van de echte check (opmaakvoorbeeld op de drive, fictieve cijfers) */
.vel__cijfers { margin-top: var(--sp-16); border-top: 1px solid var(--lijn); }
.vel__cijfers .regel { min-height: 40px; padding-block: 6px; font-size: 15px; line-height: 22px; }
.vel__cijfers dt { color: var(--zacht); }
.vel__cijfers dd { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.vel__fictief { margin-top: var(--sp-4); color: var(--zacht); font-size: 13px; line-height: 18px; font-weight: 500; }
.vel__cijfers + .vel__rijen, .vel__fictief + .vel__rijen { border-top: 0; }
.vel__rijen { margin-top: var(--sp-16); border-top: 1px solid var(--lijn); }
.vel__rijen li { padding-block: var(--sp-12); border-bottom: 1px solid var(--lijn); }
.vel__rijen strong { display: block; font-size: 17px; line-height: 26px; font-weight: 600; }
.vel__rijen span { display: block; margin-top: var(--sp-4); color: var(--zacht); font-size: 15px; line-height: 22px; }
.vel__noot { margin-top: var(--sp-16); color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.vel__regels { margin-top: var(--sp-16); border-top: 1px solid var(--lijn); }

/* Paginakop met een vel links onder de lead (/gratis-check, /kennismaking). Op desktop loopt het formulier over twee rijen.
   Tot 1040 staat het formulier vóór het vel: dan hangt niet het formulier maar het vel over de naad */
.paginakop--met-vel .paginakop__tekst { grid-row: 1; }
.paginakop--met-vel .paginakop__object { grid-row: 1 / span 2; }
.paginakop__vel { grid-column: 1 / span 6; grid-row: 2; min-width: 0; margin-top: var(--sp-48); }
@media (max-width: 1040px) {
  .paginakop--met-vel .paginakop__tekst, .paginakop--met-vel .paginakop__object, .paginakop__vel { grid-column: 1 / -1; grid-row: auto; }
  .paginakop--met-vel .paginakop__object { margin-bottom: 0; }
  .paginakop__vel { position: relative; z-index: 1; margin-bottom: calc(var(--naad) * -2); }
}

/* "Zo gaat het verder" onder het vel op de bedankpagina's. Een eigen sectie op wit: het vel hangt 64 over de naad, deze regels beginnen 32 eronder.
   Rechts op dezelfde 427 als het vel; dezelfde klasse .regel, dus in beide stijlen ink op wit */
.vervolg { padding-block: 96px var(--sectie); }
.vervolg__in { width: 100%; max-width: 427px; margin-left: auto; }
.vervolg__kop { margin-bottom: var(--sp-8); color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: 0; }
.vervolg__regels { border-top: 1px solid var(--lijn-sterk); }
.vervolg__regels .regel { grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content); min-height: 48px; }
.vervolg__regels a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 1040px) {
  .vervolg { padding-top: 80px; }
  .vervolg__in { margin-left: 0; }
}

/* Op de bedankpagina staat het vel rechts uitgelijnd op de rand */
.paginakop__object--naad .vel-groep { margin-left: auto; }
@media (max-width: 1040px) {
  .paginakop__object--naad .vel-groep { margin-left: 0; }
}

/* Voorwaarden en verwerkersovereenkomst: de tellers (spec-paginas 5.7). Artikelen via .av-artikelen en .art, leden via .leden. De kleur is ink, niet mint */
.av-artikelen { counter-reset: art; }
.art { counter-increment: art; counter-reset: lid; }
.av-artikelen .art h2::before { content: counter(art) ". "; }
.leden { margin: 0; padding: 0; list-style: none; }
.lees .leden { padding: 0; list-style: none; }
.leden li { position: relative; counter-increment: lid; padding-left: 3em; }
.leden li::before { content: counter(art) "." counter(lid); position: absolute; left: 0; top: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Gratis check, de campagnepagina's en de bedankpagina. spec-paginas 5.1, 5.2 en 5.4, addendum, copy 1 tot en met 3. Geen hexwaarden: alles uit tokens.css */

/* Paginakop. Vel en formulier hangen allebei over de naad en eindigen op dezelfde lijn: op de campagnepagina's staat het vel daar vast,
   op /gratis-check loopt het mee met het scrollen tot het daar aankomt. De bovenste rij krimpt tot de tekst */
.paginakop--check .vel, .paginakop--bedankt .vel { box-shadow: var(--s-2); }
@media (min-width: 1041px) {
  .paginakop--check > .raster { grid-template-rows: auto 1fr; }
  .paginakop--check .paginakop__vel { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: calc(var(--naad) * -2); }
  .paginakop--check:not(.paginakop--campagne) .paginakop__vel { justify-content: flex-start; }
  .paginakop--check:not(.paginakop--campagne) .vel-groep { position: sticky; top: 96px; }
}
/* Tablet: het blad over de volle breedte, de velden binnen 560 (5.1). Vanaf 880 past het vel ernaast, anders valt daar een gat */
@media (min-width: 761px) and (max-width: 1040px) {
  .paginakop--check .paginakop__object > .blad--formulier { max-width: none; }
}
@media (min-width: 761px) and (max-width: 879px) {
  .paginakop--check .formulier { max-width: 560px; }
}
@media (min-width: 880px) and (max-width: 1040px) {
  .paginakop--check .paginakop__object { grid-column: 1 / span 7; margin-bottom: calc(var(--naad) * -2); }
  .paginakop--check .paginakop__vel { grid-column: 8 / -1; }
  .paginakop--check .vel-groep { position: sticky; top: 88px; }
}
/* De bovenregel is wat een schilder uit zijn advertentie herkent: de leesregel, niet de metamaat */
.paginakop__meta[data-bovenregel], .paginakop--campagne .paginakop__meta { color: var(--tekst); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }

/* Campagnepagina's: de kop boven het vel (zonder label: het vel staat op naam van jouw bedrijf), de fotostrook boven het woordmerk */
.vel-kop { max-width: 427px; margin-bottom: var(--sp-12); color: var(--tekst); font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: -0.02em; }
.paginakop--campagne .vel-groep { gap: var(--sp-12); }
.paginakop--campagne .vel { position: relative; padding-top: 160px; }
.vel__strook { position: absolute; left: var(--sp-24); top: var(--sp-24); width: calc(100% - var(--sp-48)); height: 120px; border-radius: var(--r-8); object-fit: cover; object-position: 50% 30%; background: var(--vlak-2); }

/* Je jaar: een eiland, hard gesplitst op de middenlijn. Links de tekst, rechts de foto tot aan de rand */
.jaar { padding-top: var(--sectie); }
.jaar__vak { display: grid; width: calc(100% - var(--sp-24)); margin-inline: auto; overflow: hidden; border-radius: var(--r-20); }
.jaar__tekst { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-16); padding: 40px 20px 32px; }
.jaar__foto { aspect-ratio: 3 / 2; border-radius: 0; }
.jaar__foto img { position: absolute; inset: 0; object-position: 50% 30%; }
html[data-branche="hovenier"] .vel__strook, html[data-branche="hovenier"] .jaar__foto img { object-position: 50% 42%; }
@media (min-width: 761px) {
  .jaar__vak { grid-template-columns: calc(50% + 12px) minmax(0, 1fr); width: min(100% - 48px, var(--eiland)); min-height: 480px; }
  .jaar__tekst { gap: var(--sp-48); padding: var(--sp-48) 32px; }
  .jaar__foto { aspect-ratio: auto; }
}
@media (min-width: 1041px) {
  .jaar__vak { min-height: 560px; }
  .jaar__tekst { padding-block: 64px; }
}

/* Zo werkt de check: de lijn en de band van de homepage. Tot 1180 draait de lijn tot een rail met per stap een eigen tegel */
.werkt__stappen { margin-top: var(--kop-ruimte); }
.werkt__stappen > li { position: relative; min-width: 0; }
.werkt .tekst { margin-top: var(--sp-8); }
.werkt__tegel { position: relative; overflow: hidden; background: var(--vlak); }
.werkt__blad { position: absolute; left: var(--sp-16); top: 56px; bottom: -24px; }
.werkt__velden { margin-top: var(--sp-8); }
.werkt__velden div + div { margin-top: 6px; }
.werkt__velden dt { color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.werkt__velden dd { display: flex; align-items: center; min-height: 36px; margin-top: 2px; padding-inline: 10px; border-radius: var(--r-8); box-shadow: inset 0 0 0 1px var(--lijn-sterk); font-size: 14px; line-height: 18px; white-space: nowrap; }
.werkt__bijlage { margin: var(--sp-8) 0 var(--sp-12); color: var(--stil); font-size: 14px; line-height: 18px; font-weight: 500; }
.werkt__na { margin-top: var(--sp-32); color: var(--tekst); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 1180px) {
  .werkt__stappen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); }
  .werkt__stappen > li { grid-column: span 3; display: flex; flex-direction: column; }
  .werkt__stappen > .werkt__wij { grid-column: span 6; }
  .werkt__lijn { flex: none; margin-bottom: 35px; }
  .werkt__lijn .tijd__deel { left: 0; right: 0; }
  .werkt .tekst { padding-bottom: var(--sp-32); }
  .werkt__tegel { flex: none; height: 240px; margin: auto calc(var(--goot) * -1) 0 0; }
  li:first-child > .werkt__tegel { border-radius: var(--r-20) 0 0 var(--r-20); }
  .werkt__slot > .werkt__tegel { margin-right: 0; border-radius: 0 var(--r-20) var(--r-20) 0; }
  .werkt__blad { right: calc(var(--sp-16) + var(--goot)); }
  .werkt__slot .werkt__blad { right: var(--sp-16); }
}
@media (min-width: 1180px) and (max-width: 1439px) {
  .werkt h3 { min-height: calc(var(--lh-kaart) * 2); }
}
@media (max-width: 1439px) {
  .werkt__blad .blad__titel { font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
}
@media (max-width: 1179px) {
  .werkt__stappen > li { padding: 0 0 var(--sp-48) 35px; }
  .werkt__stappen > .werkt__slot { padding-bottom: 0; }
  .werkt__lijn { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; height: auto; }
  .werkt__lijn::before, .werkt__lijn .tijd__deel { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .werkt__lijn .tijd__pil { left: 7px; padding-inline: 7px; transform: translateX(-50%); }
  .werkt__lijn .tijd__punt { left: 1px; right: auto; top: auto; bottom: 0; }
  .werkt__tegel { height: 220px; margin-top: var(--sp-24); border-radius: var(--r-20); }
  .werkt__blad { right: var(--sp-16); max-width: 560px; }
}
@media (max-width: 760px) {
  .werkt__tegel { height: 204px; }
  li:first-child > .werkt__tegel { height: 164px; }
  .werkt__velden div + div { display: none; }
  .werkt__blad { left: var(--sp-12); right: var(--sp-12); top: 48px; padding: var(--sp-16); }
  .werkt__wij .regel { display: block; }
  .werkt__stappen .werkt__wij .regel > dd { text-align: left; }
}
@media (max-width: 374px) {
  .werkt__tegel { height: 236px; }
  .werkt__wij .regel:last-child dd { display: none; }
}

/* Vragen op de campagnepagina's: de sectie van de homepage. De kop staat op de inktlijn van de lijst en loopt mee als de antwoorden opengaan */
.vragen__kop { margin-block: -0.18em var(--kop-ruimte); }
@media (min-width: 1041px) {
  .vragen__kop { position: sticky; top: 96px; align-self: start; margin-bottom: 0; }
}

/* Bedankpagina: vel en regels op de middenlijn, onder het menu en vrij van de chatknop */
.vervolg--midden dt { white-space: nowrap; }
@media (min-width: 1041px) {
  .paginakop--bedankt .vel-groep { margin-left: 0; }
  .vervolg--midden .vervolg__in { margin-left: calc(50% + var(--goot) / 2); }
}

/* Privacy, voorwaarden, verwerkersovereenkomst, bedrijfsgegevens en de 404. Leeskolom en inhoudsopgave staan in basis.css, de tellers hierboven; hier alleen wat een document van een kantoor maakt */

/* Ankers: html heeft al scroll-padding-top 96; scroll-margin erbovenop zette elke kop op 192 */
.lees [id] { scroll-margin-top: 0; }

/* De nummerkolom: nummers op de hoofdlijn, koppen en leden op één tweede lijn. "4." en "4.5" staan recht onder elkaar */
.lees { --nummer: calc(var(--fs-tekst) * 3); }
.lees strong { font-weight: 600; }
.heel { white-space: nowrap; }   /* getal en eenheid, artikel en nummer, naam en rechtsvorm blijven op één regel */
.leden li { padding-left: var(--nummer); }
.leden li + li { margin-top: var(--sp-12); }
.av-artikelen .art h2 { position: relative; padding-left: var(--nummer); }
.av-artikelen .art h2::before { position: absolute; left: 0; top: 0; font-variant-numeric: tabular-nums; }
.art--bijlage .leden li::before { content: counter(lid) "."; }
.av-slot { margin-top: var(--sp-64); }

/* Inhoudsopgave: de eerste regel staat op de basislijn van de tekst ernaast; afgebroken titels hangen onder de titel, niet onder het nummer */
.inhoud__kop { padding-top: 6px; }
.inhoud a { font-variant-numeric: tabular-nums; }
.inhoud a[aria-current] { letter-spacing: -0.008em; }   /* 600 is 1,4 procent breder: zo breekt een actieve rij nooit anders af en blijft de lijst stil */
.leesvlak--artikelen .inhoud a, .leesvlak--artikelen .inhoud--mobiel a { padding-left: 1.15em; text-indent: -1.15em; }

/* De cookietabel: dezelfde taal als de offerteregels */
.lees .cookietabel { max-width: none; margin-top: var(--sp-24); }
.cookietabel thead th { border-bottom-color: var(--lijn-sterk); color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.cookietabel tbody th { white-space: nowrap; }
.lees .cookietabel tr:last-child th { border-bottom: 0; }
.cookietabel td[data-kop="Hoe lang"] { white-space: nowrap; }

/* Bedrijfsgegevens */
.paginakop--gegevens .paginakop__na { margin-top: var(--sp-16); text-wrap: balance; }
.paginakop--gegevens .regel { padding-block: 0; }
.paginakop--gegevens dd a { display: inline-flex; align-items: center; min-height: 44px; }

/* Op een laag laptopscherm passen alle vijftien rijen zo nog in beeld */
@media (min-width: 1041px) and (max-height: 760px) {
  .inhoud a { min-height: 32px; padding-block: 5px; }
}
@media (max-width: 1040px) {
  .inhoud--mobiel, .lees .cookietabel { max-width: 36em; }
}
@media screen and (max-width: 760px) {
  /* Alleen lange samenstellingen afbreken, op een smalle kolom; Opdrachtgever en Rotterdam blijven heel */
  .av-slot { margin-top: var(--sp-48); }
  .lees { --nummer: 44px; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 7 7; -webkit-hyphenate-limit-before: 7; -webkit-hyphenate-limit-after: 7; }
  .lees h2, .cookietabel { -webkit-hyphens: manual; hyphens: manual; }
}
/* Waar vijf kolommen niet passen (ook de smalle leeskolom tot 1199) wordt de tabel offerteregels: per rij de naam, daaronder label en waarde. De rollen in de html houden hem een tabel voor schermlezers */
@media screen and (max-width: 760px), screen and (min-width: 1041px) and (max-width: 1199px) {
  .cookietabel, .cookietabel tbody, .cookietabel tr, .cookietabel tbody th { display: block; }
  .cookietabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lees .cookietabel th, .lees .cookietabel td { padding: 0; border-bottom: 0; }
  .cookietabel tr { padding-block: var(--sp-12) var(--sp-4); border-top: 1px solid var(--lijn-sterk); }
  .cookietabel tbody th { padding-bottom: var(--sp-4); font-size: 15px; line-height: 22px; }
  .lees .cookietabel td { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content); align-items: center; column-gap: var(--sp-16); min-height: 44px; padding-block: var(--sp-4); border-top: 1px solid var(--lijn); font-weight: 500; text-align: right; }
  .cookietabel td::before { content: attr(data-kop); color: var(--zacht); font-size: 14px; line-height: 18px; text-align: left; }
  .cookietabel td[data-kop="Hoe lang"] { white-space: normal; }
}
@media (max-width: 359px) {
  .paginakop--gegevens .regel { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-8); }
  .paginakop--gegevens .regel > :last-child:not(.status) { text-align: left; }
}

@media print {
  @page { @bottom-right { content: counter(page) " / " counter(pages); color: var(--zacht); font-family: var(--font); font-size: 9pt; } }
  .versieregel .link { display: none; }
  .versieregel > span { min-height: 0; }
  .leesvlak { margin-top: 12pt; }
  .lees { --nummer: 34pt; }
  .av-slot { margin-top: 18pt; }
  .av-artikelen + .art--bijlage { break-before: page; }
  .lees .cookietabel { margin-top: 8pt; font-size: 10pt; line-height: 1.35; }
  main > .paginakop--gegevens:last-child:not(.paginakop--vol) { margin-bottom: 0; }
  .paginakop--gegevens .paginakop__object { margin: 12pt 0 0; }
  .paginakop--gegevens .blad { padding: 0; box-shadow: none; }
  body:has(.paginakop--gegevens) .voet { display: none; }   /* het adres staat al op het blad */
}

/* Kennismaking, Over ons en Werving. spec-paginas 5.3 tot en met 5.6, copy 4 tot en met 7. Geen hexwaarden: alles uit tokens.css */

/* Op groot scherm loopt het korte deel van een sectie mee met de lange kolom ernaast */
@media (min-width: 1041px) {
  .meeloper { position: sticky; top: 96px; align-self: start; }
  .paginakop--km > .raster { grid-template-rows: auto 1fr; }   /* de lengte van het formulier gaat naar de tweede rij: het vel blijft 48 onder de lead */
  .paginakop--km .paginakop__vel { margin-bottom: calc(var(--naad) * -2); }   /* het vel loopt mee en eindigt op dezelfde lijn als het formulier */
  .paginakop--km .vel-groep { position: sticky; top: 96px; }
}
@media (min-width: 761px) and (max-width: 1040px) {
  .paginakop--km .paginakop__object > .blad--formulier { max-width: none; }   /* tablet: het blad over de volle breedte, de velden binnen 560, net als op de gratis check */
  .paginakop--km .formulier { max-width: 560px; }
}
.paginakop--km .vel { box-shadow: var(--s-2); }
.vel__regels .regel, .loop__blad .regel { grid-template-columns: auto minmax(0, 1fr); }   /* op 320 breekt de waarde af, niet het label */
.paginakop--km .knop { padding-block: var(--sp-8); white-space: normal; text-align: center; text-wrap: balance; }   /* breekt af bij 320 met grote tekstruimte, in plaats van uit de pil te lopen */

/* De kolom op de middenlijn */
.kolom__na { margin-top: var(--sp-32); color: var(--zacht); font-size: 15px; line-height: 22px; }
.kolom__na a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kolom__na a:hover { text-decoration-thickness: 2px; }
@media (max-width: 1040px) {
  .kolom { margin-top: var(--sp-24); }
}

/* Grootboek: haarlijnrijen, 32 boven en onder, geen lijn onder de laatste */
.boek { margin-top: var(--sp-48); border-top: 1px solid var(--lijn-sterk); }
.boek__rij { padding-block: var(--sp-32); }
.boek__rij + .boek__rij { border-top: 1px solid var(--lijn); }
.boek__rij:last-child { padding-bottom: 0; }
.boek--kanalen { margin-top: var(--kop-ruimte); }
.boek--kanalen .tekst { margin-top: var(--sp-8); }
.boek__rij--fragment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--goot); align-items: start; }
.boek__fragment { display: grid; justify-items: end; row-gap: var(--sp-8); min-width: 0; }
.boek__fragment .blad { width: 100%; padding: 0; overflow: hidden; }
@media (max-width: 760px) {
  .boek__rij--fragment { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-24); }
  .boek__fragment { justify-items: start; }
}

/* Tom en Willem op Over ons: foto, wat ieder doet en hoe je hem bereikt */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--goot); margin-top: var(--sp-32); }
.team__lid { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; }
.team__foto { flex: none; aspect-ratio: 1 / 1; border-radius: 0; }
.team__foto img { filter: saturate(0.86); }
.team__tekst { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--sp-24) 20px var(--sp-12); }
.team__tekst .tekst { margin-top: var(--sp-8); }
.team__contact { margin-top: auto; padding-top: var(--sp-16); }
.team__contact .regel { color: inherit; text-decoration: none; }
.team__contact .regel > :last-child { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .team { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .team__foto { aspect-ratio: 4 / 3; }
  .team__foto img { object-position: 50% 18%; }
}

/* De foto op Over ons: minstens 4:3, altijd van de bovenkant van de h1 tot 64 over de naad */
.duo { display: flex; flex-direction: column; align-self: stretch; }
.duo .foto { flex: 1 0 auto; aspect-ratio: 4 / 3; box-shadow: 0 0 0 1px var(--podium-rand); }
.duo img { position: absolute; inset: 0; object-position: 42% 50%; filter: saturate(0.86); }
.sectie--na-foto { padding-top: 160px; }
@media (max-width: 1040px) {
  .duo .foto { aspect-ratio: 3 / 2; }
  .sectie--na-foto { padding-top: calc(var(--sectie) + 48px); }   /* de foto hangt 48 over de naad */
}
@media (max-width: 760px) {
  .duo { margin-inline: calc(var(--rand) * -1); }
  .duo .foto { aspect-ratio: 4 / 3; border-radius: 0; }
  .duo figcaption { left: var(--rand); }
}

/* Het eiland: op het vlak */
.tegel--eiland { --grond: var(--vlak); --tekst: var(--ink); --tekst-2: var(--zacht); padding: 56px; border-radius: var(--r-20); background: var(--grond); color: var(--tekst); }
@media (max-width: 1040px) {
  .tegel--eiland { padding: 40px; }
  .tegel--eiland .tekst { margin-top: var(--sp-24); }
}
@media (max-width: 760px) {
  .tegel--eiland { padding: var(--sp-24); }
}

/* De telefoon uit de hero: stil, zonder podium. Het label staat rechts boven het voorbeeld */
.telefoon { display: grid; justify-items: center; }
.telefoon > .vb { position: absolute; right: calc(50% - 138px); bottom: 100%; margin-bottom: var(--sp-8); }
.tel { --hoek: 46px; --kader: 9px; position: relative; width: 276px; height: 556px; padding: var(--kader); border-radius: var(--hoek); background: var(--zwart); box-shadow: inset 0 0 0 1px var(--ink-2), 0 0 0 1px var(--tel-ring), var(--s-3); }
.tel::before { content: ""; position: absolute; left: 50%; top: calc(var(--kader) + 10px); width: 74px; height: 22px; margin-left: -37px; border-radius: var(--pil); background: var(--zwart); }
.tel__scherm { height: 100%; overflow: hidden; border-radius: calc(var(--hoek) - var(--kader)); }
.tel .ad { height: 100%; padding-top: 40px; }
@media (max-width: 1040px) {
  .telefoon { justify-items: start; }
  .telefoon > .vb { position: static; margin: 0 0 var(--sp-8); }
  .tel { --hoek: 42px; --kader: 8px; width: 256px; height: 516px; }
}
@media (max-width: 760px) {
  .telefoon { justify-items: center; }
  .tel { --hoek: 38px; --kader: 7px; width: 240px; height: 484px; }
}

/* De advertentie en de vacaturepagina van de klant: wit met ink, de kleur van de klant alleen via --klant. De foto vult de telefoon, zoals in de hero */
.ad { display: flex; flex-direction: column; background: var(--wit); color: var(--ink); font-size: 14px; line-height: 20px; }
.ad__kop { padding: 12px 12px 8px; }
.ad__kop .afzender { align-items: flex-start; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.ad__tekst { padding: 0 12px 10px; }
.ad__foto { display: block; flex: 1 1 auto; width: 100%; min-height: 0; aspect-ratio: 1 / 1; object-fit: cover; background: var(--vlak-2); }
.ad__voet { display: grid; gap: 8px; padding: 10px 12px 12px; background: var(--vlak); }
.ad__link { font-size: 14px; line-height: 18px; font-weight: 600; }
.ad__knop { display: block; padding: 7px 10px; border-radius: var(--r-8); background: var(--klant); color: var(--wit); font-size: 14px; line-height: 18px; font-weight: 600; text-align: center; }
.vac .t-titel, .vac ul { margin-top: var(--sp-4); }
.vac li { padding-block: 3px; border-bottom: 1px solid var(--lijn); font-size: 14px; line-height: 18px; }
.vac .ad__knop { margin-top: var(--sp-8); }

/* Na een gesprek: de lijn met labels, daaronder drie tegels waar het werk uit loopt. Onder 1180 past een blad niet meer in de smalle kolom: dan draait de lijn tot een rail */
.loop__kop { max-width: 880px; }
.loop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); margin-top: var(--kop-ruimte); }
.loop > li { position: relative; grid-column: span 3; display: flex; flex-direction: column; min-width: 0; }
.loop > .loop__wij { grid-column: span 6; }
.loop__lijn { flex: none; margin-bottom: 35px; }
.loop h3 { min-height: calc(var(--lh-kaart) * 2); }
.loop .tekst { margin-top: var(--sp-8); padding-bottom: var(--sp-32); }
.loop__live { position: absolute; right: 20px; top: 5px; padding-inline: 8px; background: var(--grond); color: var(--tekst); font-size: 14px; line-height: 18px; font-weight: 500; }
.loop__tegel { position: relative; flex: none; height: 240px; margin-top: auto; overflow: hidden; border-radius: var(--r-20); background: var(--vlak); }
.loop__blad, .loop__stills { position: absolute; left: 16px; right: 16px; top: 56px; }
.loop__blad { bottom: -24px; padding: 16px; }
.loop__blad .t-titel { margin-top: var(--sp-8); }
.loop__blad dl { margin-top: var(--sp-8); border-top: 1px solid var(--lijn); }
.loop__afzender { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); white-space: nowrap; }
.loop__stills { right: 12px; display: flex; gap: var(--goot); }   /* op 1440 en breder precies 300 per still; smaller krimpen ze mee, zodat er geen woord aan de rand wordt afgesneden */
.loop__stills > * { flex: none; width: calc(50% - var(--goot) / 2); padding: var(--sp-12) var(--sp-16); }
.loop__stills > .ad { padding: 0; overflow: hidden; }
@media (min-width: 1180px) and (max-width: 1279px), (max-width: 359px) {
  .loop__blad { padding-inline: var(--sp-12); }
}
@media (min-width: 1180px) and (max-width: 1279px) {
  .loop__tegel { height: 260px; }   /* de advertentietekst loopt hier over drie regels; de knop blijft heel */
}
@media (max-width: 1179px) {
  .loop { display: block; }
  .loop > li { display: block; padding: 0 0 var(--sp-48) 35px; }
  .loop > li:last-child { padding-bottom: var(--sp-64); }
  .loop__lijn { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; height: auto; margin: 0; }
  .loop__lijn::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .loop .tijd__pil { left: 7px; padding-inline: 7px; transform: translateX(-50%); }
  .loop .tijd__punt { left: 1px; right: auto; top: auto; bottom: 0; }
  .loop__live { left: 35px; right: auto; top: auto; bottom: -3px; padding: 0; }
  .loop h3 { min-height: 0; }
  .loop .tekst { padding-bottom: 0; }
  .loop__tegel { margin-top: var(--sp-24); }
  .loop__stills { right: var(--sp-16); }
}
@media (max-width: 760px) {
  .loop__stills > * { width: 100%; }
  .loop__stills > .ad { display: none; }
}

/* Hoe het werkt en Prijzen (7 november 2026). Bloklijst: relaunch/2-build-and-prepare/site/ontwerp-nov/bloklijst-hoe-het-werkt-en-prijs.md.
   Dezelfde bouwstenen als de homepage: bladen, offerteregels, pillen, de lijn en de fragmenten van de klant. Geen hexwaarden: alles uit tokens.css */

/* Hetzelfde stuk tekst op twee plekken (de prijstabel): één staat altijd uit */
.op-smal { display: none; }
@media (max-width: 760px) {
  .op-breed { display: none; }
  .op-smal { display: block; }
}

/* De eigen naam van de bezoeker: één regel met ellipsis, nooit een verspringing. In een zin loopt hij gewoon mee */
.afzender > span:last-child { min-width: 0; }
[data-t="bedrijf"] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vel__voor [data-t="bedrijf"], .maandblad__voor [data-t="bedrijf"] { display: inline; }
.ad__kop .afzender [data-t="bedrijf"] { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* De aanvraagpagina van de klant, zoals op de homepage. De advertentie (.ad) staat hierboven */
.pg { display: flex; flex-direction: column; background: var(--wit); color: var(--ink); font-size: 14px; line-height: 20px; }
.pg__in { padding: 12px 16px 16px; }
.pg__merk { color: var(--klant); font-size: 15px; line-height: 20px; font-weight: 600; }
.pg__kop { margin-top: 4px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.pg__velden { margin-top: 8px; }
.pg__velden > div + div { margin-top: 6px; }
.pg__velden dt { color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.pg__velden dd { display: flex; align-items: center; min-height: 36px; margin-top: 2px; padding-inline: 10px; border-radius: var(--r-8); box-shadow: inset 0 0 0 1px var(--lijn-sterk); color: var(--ink); font-size: 14px; line-height: 18px; }
.pg__knop { display: block; margin-top: 12px; padding: 11px; border-radius: var(--r-8); background: var(--klant); color: var(--wit); font-size: 14px; line-height: 18px; font-weight: 600; text-align: center; }
.klant-rijschool { --klant: var(--klant-rijschool); }

/* Wie is aan zet: dezelfde pil als op de lijn van de homepage */
.wie { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: var(--pil); background: var(--ink); color: var(--wit); font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.wie--wij { background: var(--mint); color: var(--ink); }

/* Een vlak met een fragment erin, zoals de band op de homepage. Label rechtsboven, het blad loopt onderaan uit het vlak */
.tegel-vlak { position: relative; min-width: 0; padding: 56px var(--sp-24) 0; overflow: hidden; border-radius: var(--r-20); background: var(--vlak); }
.tegel-vlak > .blad:last-child, .tegel-vlak > :last-child > .blad:last-child { margin-bottom: -16px; padding-bottom: 32px; }
.regel__onder { display: block; margin-top: 2px; color: var(--stil); font-size: 14px; line-height: 18px; font-weight: 400; }

/* Regels met een zin erachter: Opzeggen en pauzeren, het ritme van de rapportage */
.zinregels > div { padding-block: var(--sp-16); border-bottom: 1px solid var(--lijn); }
.zinregels > div:last-child { border-bottom: 0; }
.zinregels dt { color: var(--tekst); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.zinregels dd { max-width: 36em; margin-top: var(--sp-4); color: var(--tekst-2); font-size: 15px; line-height: 22px; }

/* Vragen met het contactblok eronder */
.vragen__contact { width: min(100%, 440px); margin-top: var(--sp-48); padding: var(--sp-24); border-radius: var(--r-12); background: var(--vlak); }
.vragen__contact h3 { margin-bottom: var(--sp-8); font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.vragen__contact .regel { color: inherit; text-decoration: none; }
@media (max-width: 760px) {
  .vragen__contact { width: 100%; margin-top: var(--sp-32); }
}

/* ---------- Hoe het werkt ---------- */

/* De kop: rechts het blad met je naam en je route. Het hangt over de naad, zoals het vel op de gratis check. Naam en veld staan bovenaan:
   zo blijven ze samen boven het schermtoetsenbord */
.route-groep { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); width: 100%; max-width: 456px; margin-left: auto; }
.route { padding: var(--sp-24); box-shadow: var(--s-2); }
.route__wie .afzender { font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.naamveld { margin-top: var(--sp-16); }
.naamveld__staat { color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.naamveld__staat a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.route__titel { margin-top: var(--sp-24); padding-top: var(--sp-16); border-top: 1px solid var(--lijn); }
.route__stappen { margin-top: var(--sp-8); }
.route__stap { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-12); min-height: 44px; border-bottom: 1px solid var(--lijn); }
.route__stap:last-child { border-bottom: 0; }
.route__stap > .wie { justify-self: start; }
.route__stap > :nth-child(2) { font-size: 15px; line-height: 22px; font-weight: 500; }
.route__stap > :nth-child(3) { color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; text-align: right; }
@media (max-width: 1040px) {
  .route-groep { margin-left: 0; }
}
@media (max-width: 359px) {
  .route { padding: var(--sp-16); }
  .route__stap { grid-template-columns: 48px minmax(0, 1fr); padding-block: var(--sp-8); }
  .route__stap > :nth-child(3) { grid-column: 2; text-align: left; }
}

/* De tijdlijn: links de kop die meeloopt, rechts één lijn met vijf stappen en Live. Op elke breedte verticaal.
   De pil blijft binnen zijn eigen stap onder de balk staan, puur met css: zo zie je altijd wie aan zet is */
.tijdlijn__kop { grid-column: 1 / span 4; }
.tijdlijn__kop .tekst { margin-top: var(--sp-16); }
.rail { grid-column: 6 / -1; min-width: 0; }
.rail__stap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: var(--goot); align-items: start; padding: 0 0 var(--sp-96) 56px; }
.rail__lijn { position: absolute; left: 0; top: 0; bottom: 0; display: flex; justify-content: center; width: 28px; }
.rail__lijn::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--lijn-sterk); }
.rail__pil { position: sticky; z-index: 1; top: calc(var(--balk) + 16px); align-self: flex-start; height: 28px; padding-inline: 12px; box-shadow: 0 0 0 6px var(--grond); }
.rail__dagen { position: absolute; left: 10px; top: 44px; bottom: 32px; flex-direction: column; width: 8px; }
.rail__dagen > * { flex: 1 1 0; width: 8px; height: auto; border-radius: var(--r-2); }
.rail__tekst { min-width: 0; padding-top: 1px; }
.rail__tekst .tekst { margin-top: var(--sp-8); }
.rail__termijn { margin-top: var(--sp-12); color: var(--tekst); font-size: 15px; line-height: 22px; font-weight: 600; }
.rail__noot { max-width: 36em; margin-top: var(--sp-16); color: var(--tekst-2); font-size: 15px; line-height: 22px; }
.rail__tegel { margin-top: 4px; }
.rail__tegel .blad { padding: var(--sp-16) 20px; }
.rail__tegel .blad__titel { font-size: 22px; line-height: 28px; }
.rail__tegel .vel__kop { margin-bottom: var(--sp-12); }
.rail__tegel dl { margin-top: var(--sp-8); border-top: 1px solid var(--lijn); }
.rail__tegel .logoblok + .t-titel { margin-top: var(--sp-12); }
.rail__tegel .regel, .melding__regels .regel { grid-template-columns: auto minmax(0, 1fr); }   /* de waarde breekt af, niet het label */
.rail__tegel .vel__rijen { margin-top: var(--sp-12); }
.rail__tegel .vel__rijen li { padding-block: 10px; }
.rail__tegel .vel__rijen strong { font-size: 15px; line-height: 22px; }
.rail__tegel--breed { grid-column: 1 / -1; margin-top: var(--sp-32); }
.rail__stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--goot); align-items: start; }
.rail__stills > .blad { padding: 0; overflow: hidden; }
.rail__stills > .blad:last-child { margin-bottom: 0; }
.rail__tegel--breed { padding-bottom: 0; }
.rail__tegel--breed .rail__stills { margin-bottom: -16px; }
.rail__eind { position: relative; display: flex; align-items: center; min-height: 28px; padding-left: 56px; color: var(--tekst); font-size: 15px; line-height: 22px; font-weight: 600; }
.rail__eind::before { content: ""; position: absolute; left: 13px; top: 0; height: 8px; width: 2px; background: var(--lijn-sterk); }
.rail__eind .tijd__punt { left: 8px; right: auto; top: 8px; }

/* Het akkoordblad: de keuze bovenaan, daar ben jij aan zet */
.akkoord__wacht, .akkoord__keuze { display: flex; gap: 8px; margin-top: 8px; }
.akkoord__pil { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: var(--pil); box-shadow: inset 0 0 0 1px var(--veld-rand); font-size: 14px; line-height: 18px; font-weight: 600; }
.akkoord__pil--vol { background: var(--ink); box-shadow: none; color: var(--wit); }
.akkoord .t-titel { margin-top: var(--sp-8); }

@media (min-width: 1041px) {
  .tijdlijn__kop { position: sticky; top: 96px; align-self: start; }
}
@media (min-width: 1041px) and (max-width: 1279px) {
  .rail { grid-column: 5 / -1; }
  .rail__stap { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
}
@media (max-width: 1040px) {
  .tijdlijn__kop, .rail { grid-column: 1 / -1; }
  .tijdlijn__kop { margin-bottom: var(--kop-ruimte); }
  .rail__stap { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sp-64); }
  .rail__tegel { width: 100%; max-width: 480px; margin-top: var(--sp-24); }
  .rail__tegel--breed { max-width: 640px; }
}
@media (max-width: 760px) {
  .rail__stap, .rail__eind { padding-left: 44px; }
  .rail__pil { top: calc(var(--balk) + 12px); }
  .rail__stills { grid-template-columns: minmax(0, 1fr); }
  .rail__stills > .ad { display: none; }   /* één still op de telefoon: de aanvraagpagina */
  .tegel-vlak { padding: 48px var(--sp-16) 0; }
}

/* Bij elke aanvraag: de melding en de statussen op een vlak */
.melding-tegel { display: grid; justify-items: start; gap: var(--sp-16); }
.melding-tegel .melding { width: 100%; max-width: 400px; }
.melding .regel { min-height: 36px; }
.melding__regels { margin-top: var(--sp-8); border-top: 1px solid var(--lijn); }
.statusblad { width: 100%; max-width: 400px; }
.statusrij { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-12); }
.uitleg__tekst + .tekst { margin-top: var(--sp-16); }
.uitleg h2 + .tekst, .maand h2 + .tekst { margin-top: var(--sp-24); }
@media (max-width: 1040px) {
  .uitleg figure, .maand figure { margin-top: var(--sp-48); }
}

/* Elke maand een overzicht: een vlakke band, links het ritme, rechts het overzicht als document */
.maand { --grond: var(--vlak); }
.maand .zinregels { margin-top: var(--sp-32); border-top: 1px solid var(--lijn-sterk); }
.maandgroep { display: grid; gap: var(--sp-8); width: 100%; max-width: 480px; margin-left: auto; }
.maandgroep > .vb { justify-self: end; }
.maandblad { padding: var(--sp-24); box-shadow: var(--s-2); }
.maandblad__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-16); margin-bottom: var(--sp-16); }
.maandblad__voor { color: var(--zacht); font-size: 17px; line-height: 26px; }
.maandblad__cijfers { margin-top: var(--sp-16); border-top: 1px solid var(--lijn); }
.maandblad__cijfers .regel { min-height: 64px; }
.maandblad__cijfers .regel > .t-cijfer { font-size: 32px; line-height: 36px; font-weight: 600; }
.maandblad__noten { display: grid; gap: var(--sp-12); margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--lijn); }
.maandblad__noten dt { font-size: 15px; line-height: 22px; font-weight: 600; }
.maandblad__noten dd { color: var(--zacht); font-size: 15px; line-height: 22px; }
@media (max-width: 1040px) {
  .maandgroep { margin-left: 0; }
}

/* ---------- Prijzen ---------- */

/* De kop: rechts het rekenblad. Alleen kosten, nooit aanvragen, klikken of een advies over de hoogte */
.rekenblad { width: 100%; max-width: 480px; margin-left: auto; padding: var(--sp-24); box-shadow: var(--s-2); }
.rekenblad__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-4) var(--sp-16); }
.rekenblad__voor { overflow: hidden; max-width: 100%; color: var(--zacht); font-size: 15px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; }
.rekenblad__budget { --ring: var(--vlak); margin-top: var(--sp-16); padding: var(--sp-16); border-radius: var(--r-12); background: var(--vlak); }
.rekenblad__rij { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-16); }
.rekenblad__label { font-size: 15px; line-height: 22px; font-weight: 600; }
.rekenblad__bedrag { font-size: var(--fs-kaart); line-height: var(--lh-kaart); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rekenblad__hulp { margin-top: var(--sp-8); color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.rekenblad__totalen { margin-top: var(--sp-8); }
.rekenblad__totalen .regel { min-height: 72px; }
.rekenblad__totalen .regel > dt { color: var(--ink); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.rekenblad__totalen .regel > .t-cijfer { font-size: var(--fs-cijfer); line-height: var(--lh-cijfer); font-weight: 600; white-space: nowrap; }
.rekenblad__noot { margin-top: var(--sp-8); color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.rekenblad__knoppen { margin-top: var(--sp-24); }
@media (max-width: 1040px) {
  .rekenblad { margin-left: 0; }
}
@media (max-width: 760px) {
  .rekenblad { padding: var(--sp-16) var(--sp-16) var(--sp-24); }
  .rekenblad__knoppen .knop { width: 100%; }
}

/* De schuif: een gewone browserschuif, dus toetsenbord en schermlezer werken vanzelf. Min en plus van 44 voor wie niet wil slepen */
.schuif { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; column-gap: var(--sp-12); margin-top: var(--sp-12); }
.schuif__knop { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--wit); box-shadow: inset 0 0 0 1px var(--veld-rand); color: var(--ink); font-size: 22px; line-height: 1; font-weight: 500; cursor: pointer; }
.schuif__knop:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ink); }
.schuif__knop:disabled { color: var(--stil); cursor: default; }
.schuif__knop:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.schuif input { --vol: 0%; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.schuif input:focus { outline: none; }
.schuif input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--vol), var(--lijn-sterk) var(--vol)); }
.schuif input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--ring); -webkit-appearance: none; appearance: none; }
.schuif input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ring), 0 0 0 6px var(--ink); }
.schuif input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--lijn-sterk); }
.schuif input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
.schuif input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--ring); }
.schuif input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--ring), 0 0 0 6px var(--ink); }

/* De vergelijking: het tarievenblad van de homepage, nu op zijn eigen pagina. Eén echte tabel; elke rij is het paginaraster met 24 binnenruimte.
   Daarom display: grid op tr; de rollen in de HTML houden de tabel een tabel. Wat in elk pakket zit, staat eronder */
.vergelijk { --grond: var(--vlak); --cel: 24px; padding-block: var(--sectie); }
.vergelijk .prijs__kop { align-items: end; align-items: last baseline; row-gap: 16px; }
.vergelijk .prijs__blad { margin: var(--kop-ruimte) calc(var(--cel) * -1) 0; padding: 0; }
.vergelijk .prijs__merk { display: flex; align-items: center; height: 72px; padding-inline: var(--cel); border-bottom: 1px solid var(--lijn); }
.vergelijk table, .vergelijk thead, .vergelijk tbody { display: block; width: 100%; font-variant-numeric: tabular-nums; }
.vergelijk tr, .vergelijk .prijs__voet, .vergelijk .prijs__maat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); }
.vergelijk tr { position: relative; align-items: baseline; padding-inline: var(--cel); }
.vergelijk tr > * { grid-column: span 3; padding-block: 16px; color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 400; text-align: left; }
.vergelijk tbody tr::after { content: ""; position: absolute; left: var(--cel); right: var(--cel); bottom: 0; height: 1px; background: var(--lijn); }
.vergelijk tbody tr:last-child::after { display: none; }
.vergelijk thead th { padding-block: 24px 8px; font-size: var(--fs-kaart); line-height: var(--lh-kaart); font-weight: 600; letter-spacing: -0.02em; }
.vergelijk tbody th { font-weight: 500; }
.vergelijk td[colspan] { grid-column: span 9; }
.vergelijk .maand .bedrag { white-space: nowrap; }
.vergelijk .gericht td { text-wrap: balance; }
.vergelijk .noot { display: none; color: var(--zacht); }
.vergelijk .rij__noot { display: block; margin-top: 2px; color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 400; }
.vergelijk .niet { color: var(--stil); }
.vergelijk .samen { display: none; }
.vergelijk .vink { display: inline-block; width: 18px; height: 18px; margin: 0 8px 0 -2px; color: var(--mint-700); vertical-align: -3px; }
.vergelijk .budget > td[colspan] { grid-column: span 6; }   /* het budget staat over Basis en Plus heen */
.vergelijk .prijs__voet { align-items: center; min-height: 88px; padding: 15px var(--cel) 16px; border-top: 1px solid var(--lijn-sterk); }
.vergelijk .prijs__voet .knop { grid-column: 4 / span 6; justify-self: start; }
.vergelijk .prijs__voet .link { grid-column: 10 / -1; justify-self: start; }
.vergelijk .prijs__maat { display: none; }

/* In elk pakket: offerteregels in twee kolommen op het vlak */
.inbegrepen { margin-top: var(--sp-64); }
.inbegrepen__kop { margin-bottom: var(--sp-16); }
.inbegrepen__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--goot); border-top: 2px solid var(--ink); }
.inbegrepen__lijst .regel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; min-height: 0; padding-block: 14px; border-bottom: 1px solid var(--lijn-sterk); }
.inbegrepen__lijst .regel > :first-child { padding-top: 2px; }
.inbegrepen__lijst .regel > :last-child:not(.status) { text-align: left; }

@media (max-width: 1040px) {
  .vergelijk { --cel: 12px; }
  .vergelijk .prijs__blad { margin-inline: 0; }
  .vergelijk .noot { font-size: 14px; line-height: 18px; }
}
@media (max-width: 760px) {
  .vergelijk { --cel: 20px; }
  .vergelijk .prijs__merk { height: 64px; border-bottom: 0; }
  .vergelijk thead tr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .vergelijk thead th { grid-column: auto; padding: 0; font-size: 15px; line-height: 22px; letter-spacing: 0; }
  .vergelijk thead th:first-child, .vergelijk thead th:last-child { position: absolute; }
  .vergelijk tbody { display: flex; flex-direction: column; }
  .vergelijk tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; padding: 12px var(--cel); }
  .vergelijk tbody tr::before { content: ""; order: 2; flex: 0 0 100%; height: 4px; }
  .vergelijk tbody tr > * { flex: 0 0 50%; order: 3; padding: 0 16px 0 0; }
  .vergelijk tbody tr > th { flex: 0 1 auto; order: 1; margin-right: 8px; padding: 0; color: var(--zacht); }
  .vergelijk tbody tr > .noot { display: block; flex: 0 1 auto; order: 1; padding: 0; }
  .vergelijk .rij__noot, .vergelijk .kolom-maat { display: none; }
  .vergelijk tbody tr > .noot:empty { display: none; }
  .vergelijk tbody tr > td[colspan] { flex: 0 0 100%; padding: 0; }
  .vergelijk td[data-pakket]::before { content: attr(data-pakket) ": "; }
  .vergelijk td[data-pakket]::before, .vergelijk .op-smal b { color: var(--stil); font-weight: 500; }
  .vergelijk .maand { order: -2; padding-block: 0 16px; }
  .vergelijk .maand::before, .vergelijk .maand::after { display: none; }
  .vergelijk .maand > th { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vergelijk .maand > td { order: 1; }
  .vergelijk .maand .op-smal { color: var(--zacht); font-size: 14px; line-height: 18px; }
  .vergelijk .maand > .noot { order: 2; flex: 0 0 100%; margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--lijn); }
  .vergelijk .budget { order: -1; padding-block: 16px; }
  .vergelijk .budget::before, .vergelijk .budget::after { display: none; }
  .vergelijk .budget > th { flex: 0 0 100%; margin-right: 0; }
  .vergelijk .budget > td[colspan] { margin-top: var(--sp-4); }
  .vergelijk .budget > .noot { order: 4; flex: 0 0 100%; margin-top: var(--sp-4); }
  .vergelijk .gericht > td { flex: 0 0 100%; padding-right: 0; }
  .vergelijk .gericht > td + td { margin-top: var(--sp-4); }
  .vergelijk .samen { display: flex; }
  .vergelijk .los { display: none; }
  .vergelijk .prijs__voet { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-12); padding: 20px var(--cel); }
  .vergelijk .prijs__maat { display: block; margin-top: var(--sp-16); padding: var(--sp-24) var(--cel); border-radius: var(--r-20); background: var(--wit); box-shadow: var(--s-1); }
  .vergelijk .prijs__maat h3 { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: -0.02em; }
  .vergelijk .maat__zin { margin-top: var(--sp-4); color: var(--zacht); }
  .vergelijk .maat__prijs { margin-top: var(--sp-12); font-weight: 600; }
  .inbegrepen { margin-top: var(--sp-48); }
  .inbegrepen__lijst { grid-template-columns: minmax(0, 1fr); }
}

/* Welk pakket past: twee campagnes van één rijschool, naast elkaar */
.campagnes { display: grid; gap: var(--sp-8); min-width: 0; }
.campagnes__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--goot); align-items: start; }
.campagne__label { margin-bottom: var(--sp-8); color: var(--tekst); font-size: 15px; line-height: 22px; font-weight: 600; }
.campagne .ad { overflow: hidden; padding: 0; }
.campagnes__uitkomst { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--lijn-sterk); color: var(--tekst-2); font-size: 15px; line-height: 22px; }
.campagnes__uitkomst b { color: var(--tekst); font-weight: 600; }
.welk__tekst + .tekst { margin-top: var(--sp-16); }
.welk h2 + .tekst { margin-top: var(--sp-24); }
@media (max-width: 1040px) {
  .campagnes { margin-top: var(--sp-48); }
}
@media (max-width: 480px) {
  .campagnes__rij { grid-template-columns: minmax(0, 1fr); }
}

/* Het budget en opzeggen: tekst en één blad, geen tweede actie */
.budget__tekst { margin-top: var(--sp-16); }
.afspraken { padding: var(--sp-8) var(--sp-24) 0; }
.afspraken__link { padding-block: var(--sp-8) var(--sp-16); border-top: 1px solid var(--lijn); }
@media (max-width: 1040px) {
  .budget__kolom, .afspraken-groep { margin-top: var(--sp-24); }
}