/* Taqqle homepage: de secties, op volgorde van de pagina. Laadt na tokens.css en basis.css, alleen op de homepage. Geen hexwaarden: alles uit tokens.css. */
/* Hetzelfde stuk tekst op twee plekken: één staat altijd uit, dus nooit dubbel in de tabvolgorde of voor een schermlezer */
.op-smal { display: none; }
@media (max-width: 760px) {
  .op-breed { display: none; }
  .op-smal { display: block; }
}

/* De eigen naam van de bezoeker: nooit een verspringing. Eén regel met ellipsis op elke plek, in de advertentie twee regels */
.afzender > span:last-child { min-width: 0; }
[data-t="bedrijf"], .slot__voor { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot__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; }
@media (prefers-reduced-motion: reduce) { [data-t="bedrijf"], .slot__voor { transition-property: none; } } /* home.js meet deze plekken: de overgang van 0,01 ms uit de regel voor verminderde beweging zou de maat een tel laten achterlopen */

/* sec-0-fragmenten: de advertentie en de aanvraagpagina van de klant. Eén stuk werk, dus één stuk CSS: dezelfde HTML in de telefoon (hero) en in de stills (Zo starten we).
   Altijd wit met ink; de tokens zet tokens.css. Kleur van de klant alleen via --klant. Elk fragment heeft één leesregel op titel 18/24. */
.ad, .pg { 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__kop .afzender__onder { letter-spacing: 0; }
.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, .pg__knop { border-radius: var(--r-8); background: var(--klant); color: var(--wit); font-size: 14px; line-height: 18px; font-weight: 600; text-align: center; transition: background-color var(--duur-in) var(--ease); }
.ad__knop { padding: 7px 10px; }
.pg__foto { flex: none; height: 72px; overflow: hidden; background: var(--vlak-2); }
.pg__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg__in { padding: 12px 16px 16px; }
.pg__merk { color: var(--klant); font-size: 15px; line-height: 20px; font-weight: 600; transition: color var(--duur-in) var(--ease); }
.pg__kop { margin-top: 4px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
/* Velden: label boven een waardevak. Geen offerteregels: dit is een formulier */
.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; }

/* sec-1-hero: alles van deze sectie staat onder #hero.
   Het eindbeeld is de standaard: data-stap="4" in de HTML en de eerste regels hieronder. Zonder JavaScript staat alles er.
   De begintoestand zet js/home.js (hero). data-wacht houdt die vast tot het script draait, alleen als er JavaScript is en beweging mag.
   Maten van de telefoon staan in variabelen; --tel-uit is hoever hij links buiten het podium steekt (negatief: erbinnen).
   Drie opbouwen: vanaf 1280 tekst links en podium rechts, tot 1279 één kolom met de telefoon binnen het kader, tot 760 de telefoonvolgorde. */
#hero { --tel-b: 276px; --tel-h: 556px; --tel-kader: 9px; --tel-hoek: 46px; --tel-uit: clamp(24px, calc(13.75vw - 152px), 46px); --tel-onder: 26px; --melding-b: 348px; padding-block: 40px 128px; }
#hero .hero__kop, #hero .hero__keuze, #hero .hero__demo { grid-column: 1 / -1; min-width: 0; }

/* tekst */
#hero .lead { margin-top: 24px; }
#hero .knoppen { margin-top: 32px; }
#hero .hero__regel { margin-top: 12px; color: var(--tekst-2); font-size: 15px; line-height: 22px; }
/* de belofte is het bijschrift bij de stappenrij, op elke breedte */
#hero .stappen + .hero__belofte { max-width: 36em; margin-top: 16px; color: var(--tekst-2); font-size: 15px; line-height: 22px; text-wrap: pretty; }

/* keuze: de legenda zweeft links en de chips lopen als tekst door, zodat ze op de telefoon vanzelf in twee regels vallen. Zonder JavaScript geen chiprij */
html:not(.js) #hero .hero__keuze { display: none; }
#hero .hero__keuze { font-size: 0; }
#hero .hero__keuze legend { float: left; margin-right: 12px; color: var(--tekst-2); font-size: 15px; line-height: 44px; }
#hero .hero__keuze .chip { margin-right: 8px; vertical-align: top; }

/* podium */
#hero .podium { position: relative; height: clamp(600px, calc(100vh - 304px), 640px); }
#hero .podium__foto { position: absolute; inset: 0; }
#hero .podium__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--podium-rand); pointer-events: none; }
#hero .podium__foto picture { display: block; height: 100%; }
#hero .podium__foto img { object-position: var(--pos-desktop); }
#hero .podium__spook { position: absolute; inset: 0; }
#hero .vb { left: calc(var(--tel-b) - var(--tel-uit) + 16px); }   /* rechts naast de telefoon, op elke schermhoogte zichtbaar */

/* telefoon: hoeken 46 buiten en 37 binnen, de enige uitzondering op de hoekschaal */
#hero .tel { position: absolute; left: calc(var(--tel-uit) * -1); bottom: var(--tel-onder); z-index: 2; width: var(--tel-b); height: var(--tel-h); padding: var(--tel-kader); border-radius: var(--tel-hoek); background: var(--zwart); box-shadow: inset 0 0 0 1px var(--ink-2), 0 0 0 1px var(--tel-ring), var(--s-3); }
#hero .tel::before { content: ""; position: absolute; left: 50%; top: calc(var(--tel-kader) + 10px); z-index: 2; width: 74px; height: 22px; margin-left: -37px; border-radius: var(--pil); background: var(--zwart); }
#hero .tel__scherm { position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: calc(var(--tel-hoek) - var(--tel-kader)); background: var(--wit); color: var(--ink); font-size: 14px; line-height: 20px; }
#hero .scherm { position: absolute; inset: 0; background: var(--wit); transition: transform var(--duur-lang) var(--ease), opacity var(--duur-lang) var(--ease); }

/* standen: eerst het eindbeeld, dan de eerdere stappen */
#hero .scherm--ad, #hero .scherm--pg { transform: translateX(-24%); opacity: 0; }
#hero [data-stap="1"] .scherm--ad, #hero [data-stap="2"] .scherm--pg { transform: none; opacity: 1; }
#hero [data-stap="1"] .scherm--pg, #hero [data-stap="1"] .scherm--mail, #hero [data-stap="2"] .scherm--mail { transform: translateX(100%); opacity: 1; }
#hero [data-stap]:not([data-stap="4"]) .melding { transform: translateY(-16px); opacity: 0; }

/* scherm 1: advertentie */
#hero .scherm--ad { padding-top: 40px; }
#hero .ad__knop, #hero .pg__knop { position: relative; overflow: hidden; }

/* scherm 2: aanvraagpagina. De foto neemt de ruimte die de tekst overlaat, minimaal 72 hoog. Knop eerst stil, de velden vullen zich */
#hero .pg__foto { flex: 1 1 72px; height: auto; min-height: 72px; }
#hero .pg__in { flex: none; }
#hero .pg__knop { transition: background-color var(--duur-in) var(--ease), opacity var(--duur) var(--ease); }
#hero .pg__velden dd { color: var(--ink); transition: color var(--duur) var(--ease); }
#hero [data-veld="0"] .pg__velden div dd, #hero [data-veld="1"] .pg__velden div:nth-child(n+2) dd, #hero [data-veld="2"] .pg__velden div:nth-child(n+3) dd { color: transparent; }
#hero [data-veld="0"] .pg__knop, #hero [data-veld="1"] .pg__knop, #hero [data-veld="2"] .pg__knop { opacity: 0.45; }
#hero .tik { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--wit); opacity: 0; pointer-events: none; }

/* scherm 3: bevestiging */
#hero .post__kop { position: relative; padding: 48px 16px 12px; border-bottom: 1px solid var(--lijn); }
#hero .post__nu { position: absolute; right: 16px; bottom: 12px; color: var(--stil); font-size: 14px; line-height: 18px; }
#hero .post__in { padding: 16px; }
#hero .post__vink { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--mint-700); color: var(--wit); }
#hero .post__titel { margin-top: 12px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
#hero .post__tekst { margin-top: 8px; color: var(--zacht); }
#hero .post__naam { margin-top: 8px; font-weight: 600; }
#hero .post__velden { margin-top: 12px; border-top: 1px solid var(--lijn); }
#hero .post__velden .regel { grid-template-columns: minmax(0, 1fr); padding-block: 6px; }
#hero .post__velden .regel > :last-child { font-size: 14px; line-height: 18px; text-align: left; }

/* melding */
#hero .melding { position: absolute; right: 24px; top: 56px; z-index: 3; width: var(--melding-b); transition: transform var(--duur-lang) var(--veer), opacity var(--duur-in) var(--ease); }

/* stappenrij: vier segmenten met het label eronder, rechts in dezelfde rij het ronde vlak. Pauze en opnieuw zijn dezelfde knop */
#hero .stappen { display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 12px; align-items: start; margin-top: 16px; }
html.js #hero .stappen { min-height: 56px; }   /* ronde knop 12 + 44; labels op twee regels passen er ook in. De belofte staat er 16 onder */
#hero .tijd { gap: 12px; }
#hero .tijd > li { position: relative; }
#hero .tijd > li > i { position: absolute; inset: 0; border-radius: inherit; background: var(--tijd-vol); transform-origin: 0 50%; }
#hero .tijd button { position: absolute; left: 0; right: 0; top: 100%; display: flex; min-height: 44px; padding-top: 12px; border-radius: var(--r-8); color: var(--tekst-2); font-size: 14px; line-height: 18px; font-weight: 500; text-align: left; transition: color var(--duur-kort) var(--ease); }
html:not(.js) #hero .tijd button, html:not(.js) #hero .stappen__naam { display: none; }
#hero .tijd button:hover, #hero .tijd button[aria-current] { color: var(--tekst); }
#hero .stappen__naam { display: none; }
#hero .stappen__knop { position: relative; grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--chip-rand); color: var(--tekst); transition: box-shadow var(--duur-kort) var(--ease); }
#hero .stappen__knop:hover { box-shadow: inset 0 0 0 1px var(--tekst); }
#hero .stappen__knop::before { content: ""; width: 12px; height: 14px; border-inline: 4px solid currentColor; }
#hero .stappen__knop svg { display: none; width: 20px; height: 20px; }
#hero [data-knop="speel"] .stappen__knop::before { margin-left: 2px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#hero [data-knop="opnieuw"] .stappen__knop::before { display: none; }
#hero [data-knop="opnieuw"] .stappen__knop svg { display: block; }

/* zonder ronde knop lopen de segmenten door tot de rand van het podium */
html:not(.js) #hero .stappen { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  #hero .stappen { grid-template-columns: minmax(0, 1fr); }
}

/* vóór de eerste verf: bij JavaScript en beweging begint het podium op stap 1 */
@media (prefers-reduced-motion: no-preference) {
  html.js #podium[data-wacht] .scherm--ad { transform: none; opacity: 1; }
  html.js #podium[data-wacht] .scherm--pg, html.js #podium[data-wacht] .scherm--mail { transform: translateX(100%); opacity: 1; }
  html.js #podium[data-wacht] .melding { opacity: 0; }
  html.js #podium[data-wacht] .tijd > li > i { transform: scaleX(0); }
}

/* desktop: tekst links, podium rechts. De kapitaal van de kop staat gelijk met de bovenkant van het podium, de chiprij staat daarboven */
@media (min-width: 1280px) {
  #hero .hero__kop { grid-column: 1 / span 6; grid-row: 2; }
  #hero h1 { margin-top: calc(var(--fs-display) * -0.16); }
  #hero .lead { max-width: min(30em, calc(100% - var(--tel-uit) - 24px)); }
  #hero .hero__keuze { grid-column: 7 / span 6; grid-row: 1; margin-bottom: 16px; }
  #hero .hero__demo { grid-column: 7 / span 6; grid-row: 2; }
}
/* onder 1440 is het podium smaller: melding en chips geven mee, de telefoon steekt minder uit zodat hij de kop niet raakt */
@media (min-width: 1280px) and (max-width: 1439px) {
  #hero { --melding-b: clamp(280px, calc(100% - 300px), 348px); }
  #hero .hero__keuze legend { margin-right: 10px; }
  #hero .hero__keuze .chip { margin-right: 6px; }
  #hero .hero__keuze .chip span { padding: 0 12px; font-size: 15px; }
  #hero .hero__keuze .chip:nth-of-type(n+4) { margin-right: 0; }
}

/* tot 1279: één kolom, telefoon linksonder binnen het kader, melding rechtsboven. De tegels van de voordelen hangen over de onderrand */
@media (max-width: 1279px) {
  #hero { --tel-b: 256px; --tel-h: 516px; --tel-kader: 8px; --tel-hoek: 42px; --tel-uit: -24px; --tel-onder: 24px; --melding-b: 318px; }
  #hero .hero__keuze { margin-block: 48px 16px; }
  #hero .podium { height: 560px; }
  #hero .podium__foto img { object-position: var(--pos-desktop); }
}

/* telefoon: kop, lead, knop, link, regel, dan het beeld met stappenrij en belofte, dan de chips. Podium rand tot rand, telefoon rechts, onderwerp van de foto in de vrije strook links, melding eroverheen.
   home.js zet de chips ook in de DOM na het podium; de order-regels houden die volgorde vast tot het script draait, anders springt het podium bij laden omhoog */
@media (max-width: 760px) {
  #hero { --tel-b: clamp(192px, calc(192px + (100vw - 320px) * 0.2857), 240px); --tel-h: calc(var(--tel-b) * 2.02); --tel-kader: 7px; --tel-hoek: 38px; --tel-onder: clamp(12px, calc(12px + (100vw - 320px) * 0.1714), 24px); --melding-b: clamp(280px, calc(100vw - 72px), 348px); padding-block: 24px 96px; }
  #hero .hero__kop { order: 1; }
  #hero .hero__demo { order: 2; margin-top: 32px; }
  #hero .hero__keuze { order: 3; margin-block: 16px 0; }
  #hero .lead { margin-top: 16px; }
  #hero .knoppen { flex-direction: column; align-items: flex-start; margin-top: 24px; }
  #hero .knoppen .knop { width: 100%; }
  #hero .hero__regel { margin-top: 8px; }
  #hero .hero__keuze .chip { margin-bottom: 8px; }
  #hero .podium { height: max(125vw, calc(var(--tel-h) + 24px)); margin-inline: calc(var(--rand) * -1); overflow: hidden; }
  #hero .podium__foto { border-radius: 0; }
  #hero .podium__foto img { object-position: var(--pos-mobiel); }
  #hero .vb { left: 16px; }
  #hero .tel { left: auto; right: 20px; }
  /* de naam 14/18, zodat hij in de meeste branches op één regel past; de langste namen krijgen twee regels, zoals in de advertentie, en worden nooit afgekapt */
  #hero .tel .afzender { gap: 6px; font-size: 14px; line-height: 18px; letter-spacing: -0.01em; }
  #hero .tel .afzender__onder { letter-spacing: 0; }
  #hero .tel .afzender__letter { width: 24px; height: 24px; }
  #hero .post__kop .afzender [data-t="bedrijf"] { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #hero .scherm--ad { padding-top: 34px; }
  #hero .ad__kop { padding: 6px 10px; }
  #hero .ad__tekst { flex: none; display: -webkit-box; margin-bottom: 8px; padding: 0 10px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }   /* zoals een advertentie in een feed: de tekst loopt af, de foto vangt het verschil op */
  #hero .ad__voet { gap: 6px; padding: 8px 10px 10px; }
  #hero .pg__foto { flex-basis: 48px; min-height: 48px; }
  #hero .pg__in { padding: 8px 10px 10px; }
  #hero .pg__merk { font-size: 14px; line-height: 18px; letter-spacing: -0.01em; }
  #hero .pg__kop { margin-top: 2px; }
  #hero .pg__velden { margin-top: 4px; }
  #hero .pg__velden > div + div { margin-top: 4px; }
  #hero .pg__velden dd { padding-inline: 8px; }
  #hero .pg__knop { margin-top: 8px; padding-block: 9px; }
  #hero .post__kop { padding: 38px 10px 8px; }
  #hero .post__nu { right: 10px; bottom: 8px; }
  #hero .post__in { padding: 10px; }
  #hero .melding { left: 20px; right: auto; top: auto; bottom: 24px; }
  #hero .melding__slot { display: none; }
  #hero [data-stap]:not([data-stap="4"]) .melding { transform: translateY(16px); }
  /* stappenrij: segmenten als knoppen met een klikvlak van 44, daaronder alleen de actieve stap en rechts het ronde vlak. Een lege balk is hier het enige zichtbare deel van de knop, dus dezelfde rand als de chips */
  #hero .stappen { grid-template-columns: minmax(0, 1fr) auto; }
  html.js #hero .stappen { min-height: 0; }
  #hero .tijd { grid-column: 1 / -1; }
  #hero .tijd--segmenten > li { box-shadow: inset 0 0 0 1px var(--chip-rand); }
  #hero .tijd button { top: -18px; height: 44px; padding: 0; }
  #hero .tijd button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.js #hero .stappen__naam { display: flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--tekst); font-size: 14px; line-height: 18px; font-weight: 500; }
  #hero .stappen__knop { grid-column: 2; grid-row: 2; margin-top: 8px; }
}
@media (min-width: 480px) and (max-width: 760px) {
  #hero { --tel-b: 256px; --tel-h: 516px; --tel-kader: 8px; --tel-hoek: 42px; }
  #hero .podium { height: 600px; }
}
@media (max-width: 374px) {
  #hero .post__nu { display: none; }
}
@media (max-width: 359px) {
  #hero .hero__keuze legend { margin-right: 8px; font-size: 14px; }
  #hero .hero__keuze .chip span { padding: 0 10px; font-size: 14px; }
  #hero .pg__foto { display: none; }   /* anders valt de knop buiten de telefoon */
  #hero .pg__in { padding-top: 36px; }
  #hero .pg__kop { font-size: 15px; line-height: 20px; }
  #hero .post__in { padding-block: 8px; }
  #hero .post__titel { margin-top: 8px; }
}

/* sec-2-voordelen: alles van deze sectie staat onder #voordelen. Drie ongelijke tegels (2:1:1): drie feiten, geen drie kaarten */
#voordelen { --grond: var(--voordelen-grond); --tegel-rand: clamp(24px, calc(5vw - 40px), 32px); display: flow-root; padding-bottom: var(--sp-64); }
#voordelen .tegels { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--goot); margin-top: calc(var(--sp-64) * -1); }

/* De tegel: object boven, tekst onder. De ankers staan in alle drie op dezelfde lijn */
#voordelen .tegel { position: relative; display: grid; grid-template-rows: 1fr auto; row-gap: var(--sp-24); min-width: 0; min-height: 456px; padding: var(--tegel-rand); border-radius: var(--r-20); background: var(--grond); color: var(--tekst); }
#voordelen .tegel--tijd { grid-column: span 6; --grond: var(--tegel-1); }
#voordelen .tegel--jou { grid-column: span 3; --grond: var(--tegel-2); overflow: hidden; } /* de schaduw van de melding valt op de tegel, niet op de buren */
#voordelen .tegel--vrij { grid-column: span 3; grid-template-rows: 1fr auto 1fr; --grond: var(--tegel-3); --tekst: var(--tegel-3-tekst); --tekst-2: var(--tegel-3-tekst-2); } /* de uitspraak in het optische midden: de lege ruimte is bewust verdeeld */
#voordelen .tegel--vrij .tegel__tekst { grid-row: 2; }
#voordelen .tegel__tekst h3 + .tekst { min-height: calc(var(--lh-tekst) * 2); margin-top: var(--sp-12); }
#voordelen .tegel--tijd .tekst { max-width: 28em; }

/* Tegel 1: de grote 5 en de vijf vakjes. Object en tekst zijn één groep, de lucht zit bovenin */
#voordelen .tegel--tijd .tegel__object { align-self: end; }
#voordelen .tegel__feit { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-16); }
#voordelen .tegel__feit .t-feit { margin-left: -2px; }
#voordelen .tegel--tijd .regel { min-height: 0; margin-bottom: var(--sp-16); padding: 0 0 var(--sp-12); }
/* Alleen transform en opacity: js/home.js zet de begintoestand, zonder JavaScript staan alle vijf vol */
#voordelen .tijd.is-wacht > span { position: relative; overflow: hidden; background: var(--tijd-leeg); color: var(--ink); }
#voordelen .tijd.is-wacht > span::before { content: ""; position: absolute; inset: 0; background: var(--tijd-vol); transform: scaleX(0); transform-origin: left center; transition: transform 90ms linear calc(var(--i) * 90ms); }
#voordelen .tijd.is-wacht > span::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; color: var(--wit); opacity: 0; transition: opacity 90ms linear calc(var(--i) * 90ms); }
#voordelen .tijd.is-loopt > span::before { transform: none; }
#voordelen .tijd.is-loopt > span::after { opacity: 1; }

/* Stijl inkt: dezelfde mint als de stappenrij in de hero, één groen voor dezelfde bouwsteen in één beeld. Ink op mint is 10,5:1 */
#voordelen .tegel--tijd { --tijd-vol: var(--mint); }
#voordelen .tijd--vakjes > .is-vol, #voordelen .tijd.is-wacht > span::after { color: var(--ink); }

/* Tegel 2: de melding uit de hero, 250 breed op y 56, zonder tekst. Onder 1440 is de tegel smaller dan 250 binnen: het vel steekt dan gelijk aan beide kanten uit, zodat de titel op twee regels blijft */
#voordelen .tegel--jou .tegel__object { min-width: 0; padding-top: calc(56px - var(--tegel-rand)); }
#voordelen .melding { width: 250px; max-width: none; margin-inline: calc((100% - 250px) / 2); }
#voordelen .melding__regels { margin-top: var(--sp-8); border-top: 1px solid var(--haarlijn); }
#voordelen .melding__regels .regel { grid-template-columns: auto minmax(0, 1fr); } /* de naam krijgt de ruimte die overblijft, en loopt daarna af met een ellipsis */
#voordelen .melding .regel { min-height: 0; padding-block: 8px 0; }

/* Onder 1280 past "Maandelijks" niet meer in een kwart: tegel 1 over de volle breedte, tegel 2 en 3 op de helft */
@media (max-width: 1279px) {
  #voordelen { --tegel-rand: var(--sp-32); }
  #voordelen .tegel--tijd { grid-column: 1 / -1; min-height: 320px; }
  #voordelen .tegel--jou, #voordelen .tegel--vrij { grid-column: span 6; }
  #voordelen .melding { width: min(100%, 318px); margin-inline: 0; }
}
@media (max-width: 760px) {
  #voordelen { --tegel-rand: var(--sp-24); padding-bottom: var(--sp-48); }
  #voordelen .tegels { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); margin-top: calc(var(--sp-48) * -1); }
  #voordelen .tegel { padding-block: 20px; row-gap: 20px; }
  #voordelen .tegel--tijd, #voordelen .tegel--jou, #voordelen .tegel--vrij { grid-column: 1 / -1; min-height: 0; }
  #voordelen .tegel--jou .tegel__object { padding-top: calc(48px - 20px); }
  #voordelen .melding { width: 100%; }
  #voordelen .tegel--vrij { grid-template-rows: auto; row-gap: 0; }
  #voordelen .tegel--vrij .tegel__tekst { grid-row: auto; }
  #voordelen .tegel__tekst h3 + .tekst { min-height: 0; }
}
@media (max-width: 359px) {
  #voordelen .melding { padding-inline: 12px; }   /* de titel blijft op twee regels */
}

/* sec-3-werkwijze: alles van deze sectie staat onder #werkwijze. Een tweeluik: warmte links, precisie rechts. Foto en grootboek eindigen op dezelfde lijn */
#werkwijze { padding-block: var(--sp-96) var(--sectie); }
#werkwijze .tweeluik { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--goot); }
#werkwijze .tweeluik__kop { grid-column: 7 / -1; grid-row: 1; margin-top: -9px; } /* de kapitaalhoogte van de h2 staat op de bovenkant van de foto */
#werkwijze .tweeluik__kop .lead { max-width: 28em; margin-top: var(--sp-24); }
#werkwijze .tweeluik__foto { grid-column: 1 / span 6; grid-row: 1 / span 2; justify-self: start; height: 100%; max-width: 100%; min-height: 0; aspect-ratio: 2 / 3; }
#werkwijze .grootboek { grid-column: 7 / -1; grid-row: 2; margin-top: var(--kop-ruimte); }

/* Het voorbeeld: de foto is het decor, daarop de zoekadvertentie van de bezoeker en het veld voor zijn eigen naam.
   Zonder JavaScript staat de advertentie er met de voorbeeldnaam en is het veld er niet */
#werkwijze .adv { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-24); padding: 64px var(--sp-24) var(--sp-24); }
#werkwijze .adv__beeld { position: absolute; inset: 0; }
#werkwijze .adv__beeld > img { position: absolute; inset: 0; object-position: 50% 50%; }
#werkwijze .adv__zoek, #werkwijze .adv__blad { position: relative; z-index: 1; padding: var(--sp-16); box-shadow: var(--s-2); }
#werkwijze .adv__vraag { padding: 7px var(--sp-16); border: 1px solid var(--lijn-sterk); border-radius: var(--pil); color: var(--ink); font-size: 15px; line-height: 22px; }
#werkwijze .adv__gesponsord { margin-top: var(--sp-16); color: var(--ink); font-size: 14px; line-height: 18px; font-weight: 600; }
#werkwijze .adv__zoek .afzender { display: flex; margin-top: var(--sp-8); }
#werkwijze .adv__kop { margin-top: var(--sp-12); color: var(--klant); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
#werkwijze .adv__tekst { margin-top: var(--sp-4); color: var(--zacht); font-size: 15px; line-height: 22px; }
#werkwijze .adv__staat { color: var(--ink); font-size: 14px; line-height: 18px; font-weight: 500; }
#werkwijze .adv__staat a { display: inline-block; margin-block: -4px; padding-block: 4px; text-underline-offset: 3px; }

#werkwijze .rij { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--goot); align-items: start; padding-block: 20px; border-top: 1px solid var(--haarlijn); }
#werkwijze .rij:first-child { border-top-color: var(--lijn-sterk); }
#werkwijze .rij:last-child { padding-bottom: 0; }
#werkwijze .rij__tekst .tekst { margin-top: var(--sp-8); }
/* Label rechts, 8 boven zijn blad. Rij 1 heeft geen label, maar houdt dezelfde kop vrij: zo beginnen de drie bladen even ver onder hun h3 */
#werkwijze .rij__fragment { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 24px auto; justify-items: end; row-gap: var(--sp-8); min-width: 0; }
#werkwijze .rij__fragment > .blad { grid-row: 2; }
#werkwijze .rij__fragment .blad { width: 100%; padding-block: 16px 8px; }
#werkwijze .rij__fragment .regel { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--sp-8); }   /* label en waarde op één lijn; de waarde schuift alleen naar de volgende regel als het echt niet past, zoals bij 200 procent tekst */
#werkwijze .fragment__kop { color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
#werkwijze .kerncijfer { color: var(--mint-700); }
#werkwijze .fragment__meta { padding-bottom: 8px; color: var(--stil); font-size: 14px; line-height: 18px; font-weight: 500; }

/* Op 1280 tot 1400 wordt de rechterkolom hoger dan de foto breed mag zijn: iets minder lucht rechts, dan blijft de foto even hoog als de kolom */
@media (min-width: 1280px) and (max-width: 1400px) {
  #werkwijze .grootboek { margin-top: var(--sp-48); }
  #werkwijze .rij { padding-block: var(--sp-16); }
}
@media (max-width: 1279px) {
  #werkwijze .tweeluik { display: block; }
  #werkwijze .tweeluik__kop { margin-top: 0; }
  #werkwijze .tweeluik__foto { width: 100%; height: auto; max-width: none; margin-top: var(--sp-48); aspect-ratio: auto; gap: var(--sp-96); }
  #werkwijze .adv__beeld > img { object-position: 50% 62%; }
  #werkwijze .grootboek { margin-top: var(--sp-48); }
}
@media (max-width: 760px) {
  #werkwijze { padding-top: var(--sp-48); }
  #werkwijze .tweeluik__foto { width: calc(100% + var(--rand) * 2); margin: 40px calc(var(--rand) * -1) 0; padding: 56px var(--sp-16) var(--sp-16); gap: var(--sp-32); }
  #werkwijze .adv__beeld { border-radius: 0; }
  #werkwijze .adv__beeld .vb { left: var(--sp-16); top: var(--sp-16); }
  #werkwijze .grootboek { margin-top: 40px; }
  #werkwijze .rij { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-16); }
  #werkwijze .rij:last-child { padding-bottom: 0; }
  #werkwijze .rij__fragment { grid-template-rows: none; }
  #werkwijze .rij__fragment > .blad { grid-row: auto; }
}

/* sec-4-overzicht: alles van deze sectie staat onder #overzicht
   Het eiland is een object: 24 van de schermrand, boven 1440 blijft het op het raster, binnen staat alles op de hoofdlijnen.
   Eén raster in het blad: foto, cijfers, lijst. De lijst begint vanaf 1041 op elke breedte op de middenlijn. */
#overzicht { padding-bottom: var(--sectie); }
#overzicht .ov { position: relative; width: min(100% - 48px, var(--eiland)); margin-inline: auto; padding: clamp(64px, calc(var(--sectie) * .6), 96px) 32px 0; overflow: hidden; border-radius: var(--r-20); }
#overzicht .vb { top: 24px; right: 24px; }
#overzicht .ov__kop { align-items: end; align-items: last baseline; }
#overzicht figure { margin-top: min(96px, var(--kop-ruimte)); }

/* De cijfers houden hun 298; onder 1280 krimpt de foto, niet de lijst */
#overzicht .ov__blad { display: grid; grid-template-columns: minmax(0, 1fr) max(298px, calc((100% + var(--goot)) / 4)) calc((100% - var(--goot)) / 2); padding: 0; overflow: hidden; border-radius: var(--r-20) var(--r-20) 0 0; }
#overzicht .foto { grid-row: 1 / span 2; border-radius: 0; }
#overzicht .foto img { position: absolute; inset: 0; object-position: var(--pos-paneel); }
#overzicht .ov__afzender, #overzicht .ov__bladkop { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--haarlijn); }
#overzicht .ov__afzender { padding-left: 24px; }
#overzicht .ov__bladkop { padding-right: 24px; font-weight: 600; }
#overzicht .t-meta { color: var(--stil); font-weight: 500; }

/* Kerncijfers: de offerteregel op 72 hoog met het cijfer op cijfermaat. Per kanaal sluit onderaan op de snede aan */
#overzicht .ov__cijfers { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 4px 24px 24px; }
#overzicht .ov__kern .regel { min-height: 72px; }
#overzicht .ov__kern dd { font-size: var(--fs-cijfer); line-height: var(--lh-cijfer); font-weight: 600; letter-spacing: -.03em; }
#overzicht .ov__kern .ov__accent { color: var(--mint-700); }
#overzicht .ov__kern .t-meta { display: block; }
#overzicht .ov__kanalen p { margin-bottom: 4px; color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
#overzicht .ov__kanalen .regel { column-gap: 8px; }

/* De snede: wit blad op een witte pagina, dus de rand krijgt een eigen lijn */
#overzicht .ov__cijfers, #overzicht .ov__lijst { border-bottom: 1px solid var(--lijn-sterk); }

/* De lijst. Wat onder de snede valt staat uit de stroom, recht onder de laatste zichtbare rij, en valt weg door de rand.
   Zo valt de snede altijd tussen twee rijen, ook als een regel breekt */
#overzicht .ov__lijst { position: relative; padding-right: 24px; }
#overzicht .ov__onder { position: absolute; left: 0; right: 0; top: 100%; }
#overzicht .ov__groep { display: flex; align-items: center; justify-content: space-between; min-height: 32px; border-bottom: 1px solid var(--haarlijn); color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
#overzicht .ov__rij { display: grid; grid-template-columns: minmax(0, 1fr) 84px 136px; grid-template-areas: "werk via st" "naam via st"; column-gap: 12px; align-content: center; align-items: center; min-height: 64px; border-bottom: 1px solid var(--haarlijn); }
#overzicht .ov__werk { grid-area: werk; font-weight: 600; }
#overzicht .ov__naam { grid-area: naam; }
#overzicht .ov__via { grid-area: via; white-space: nowrap; }
#overzicht .ov__st { grid-area: st; display: flex; }
#overzicht .ov__rij--eind { border: 0; }

/* Naast de cijfers past de lijst hier niet op drie kolommen: "via" schuift onder de status, de rij blijft 64 hoog */
@media (min-width: 1041px) and (max-width: 1279px) {
  #overzicht .ov__rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "werk st" "naam via"; }
  #overzicht .ov__st { justify-content: flex-end; }
  #overzicht .ov__via { text-align: right; }
}

/* Tablet: de foto naast de cijfers, de lijst eronder over de volle breedte */
@media (max-width: 1040px) {
  #overzicht .ov { padding-inline: 24px; }
  #overzicht .ov__kop { row-gap: 16px; }
  #overzicht .ov__blad { grid-template-columns: 200px minmax(0, 1fr); }
  #overzicht .foto { grid-row: 1 / span 3; }
  #overzicht .ov__bladkop { padding-left: 24px; }
  #overzicht .ov__cijfers { border: 0; }
  #overzicht .ov__lijst { grid-column: 1 / -1; padding-left: 24px; }
}

/* Telefoon: geen verkleind bureaublad, alles onder elkaar in leesvolgorde. De foto toont het onderwerp, niet de bovenkant */
@media (max-width: 760px) {
  #overzicht .ov { width: calc(100% - 24px); padding: 64px 20px 0; }
  #overzicht .vb { top: 16px; right: 16px; }
  #overzicht h2 br { display: none; }
  #overzicht figure { margin-top: 40px; }
  #overzicht .ov__blad { grid-template-columns: minmax(0, 1fr); }
  #overzicht .foto { grid-row: auto; height: 200px; }
  #overzicht .foto img { object-position: var(--ov-mobiel, 50% 62%); }
  #overzicht .ov__afzender { min-height: 0; padding: 16px 16px 0; border: 0; }
  #overzicht .ov__bladkop { display: block; min-height: 0; padding: 8px 16px 16px; }
  #overzicht .ov__bladkop .t-meta { display: block; }
  #overzicht .ov__cijfers { padding: 0 16px 4px; border-bottom: 0; }
  #overzicht .ov__kern .regel { min-height: 60px; }
  #overzicht .ov__kanalen { display: none; }   /* de kerncijfers zeggen genoeg; scheelt 128 px */
  #overzicht .ov__lijst { padding-inline: 16px; }
  #overzicht .ov__rij { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "werk werk" "naam naam" "st via"; column-gap: 8px; padding-block: 8px; }
  #overzicht .ov__st, #overzicht .ov__via { margin-top: 8px; }
  #overzicht .ov__onder-m { position: absolute; left: 16px; right: 16px; top: 100%; }
  #overzicht .ov__rij--eind { border-bottom: 1px solid var(--haarlijn); }
  #overzicht .ov__rij--eind-m { border: 0; }
}
html[data-branche="hovenier"] #overzicht { --ov-mobiel: 50% 42%; }
html[data-branche="rijschool"] #overzicht { --ov-mobiel: 50% 14%; }
html[data-branche="schoonmaak"] #overzicht { --ov-mobiel: 50% 38%; }

/* sec-5-starten: alles van deze sectie staat onder #hoe. Silhouet: een lijn en een band.
   De lijn: drie delen van ongelijke lengte met de goot ertussen; onder Wij zijn de vijf werkdagen de lijn zelf.
   De band: één vlak over de drie kolommen. Elke stap houdt zijn eigen stuk HTML, zodat onder 1180 dezelfde HTML de rail met losse tegels wordt.
   Daarom loopt elk stuk band door over de goot; de hoeken zitten alleen aan de buitenkant. */
#hoe { padding-bottom: var(--sectie); }
#hoe ol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); margin-top: var(--kop-ruimte); }
#hoe li { position: relative; grid-column: span 3; display: flex; flex-direction: column; min-width: 0; }
#hoe .hoe__wij { grid-column: span 6; }

/* De lijn: 28 hoog met de pillen erop; de kolommen beginnen 48 onder de lijn */
#hoe .hoe__lijn { flex: none; margin-bottom: 35px; }
#hoe .hoe__wij .tijd--lijn::before { display: none; }
#hoe .hoe__dagen { position: absolute; left: 0; right: 0; top: 10px; }
#hoe .hoe__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; }
#hoe .hoe__termijn { position: absolute; left: 0; top: 27px; color: var(--ink); }

/* Tekst: vaste hoogte voor de kop, zodat zinnen en band in alle drie op één lijn staan */
#hoe h3 { min-height: calc(var(--lh-kaart) * 2); }
#hoe .tekst { margin-top: 8px; padding-bottom: 32px; }

/* Onder de lijn één link naar de hele werkwijze op /hoe-het-werkt */
#hoe .hoe__meer { margin-top: var(--sp-16); }
#hoe .hoe__meer .link { font-weight: 600; }

/* Onder 1180 past een blad niet meer in de smalle kolom. Daar, en op tablet en telefoon, draait de lijn een kwartslag tot een rail, 7 binnen de kolom,
   en wordt de band per stap een eigen tegel */
@media (max-width: 1179px) {
  #hoe ol { display: block; }
  #hoe li, #hoe .hoe__wij { display: block; padding: 0 0 48px 35px; }
  #hoe .hoe__slot { padding-bottom: 64px; }
  #hoe .hoe__lijn { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; height: auto; margin: 0; }
  #hoe .tijd--lijn::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  #hoe .tijd__pil { left: 7px; padding-inline: 7px; transform: translateX(-50%); }
  #hoe .hoe__dagen { left: 3px; right: auto; top: 36px; bottom: 8px; flex-direction: column; width: 8px; }
  #hoe .hoe__dagen > * { width: 8px; height: auto; }
  #hoe .tijd__punt { left: 1px; right: auto; top: auto; bottom: 0; }
  #hoe .hoe__live { left: 35px; right: auto; top: auto; bottom: -3px; padding: 0; }
  #hoe .hoe__termijn { position: static; margin-top: 12px; }
  #hoe h3 { min-height: 0; }
  #hoe .tekst { padding-bottom: 0; }
  #hoe .hoe__meer { margin-top: 0; }
}

/* sec-6-prijs: alles van deze sectie staat onder #prijs. Kort: het startbedrag, wat erbij komt en de weg naar /prijzen. De tabel staat op /prijzen (paginas.css, .vergelijk) */
#prijs { --grond: var(--vlak); padding-block: clamp(80px, calc(9.2308vw + 9.85px), 128px); }
#prijs .prijs__kop { align-items: first baseline; row-gap: var(--sp-24); }   /* de kop staat op de eerste regel van de tekst ernaast */
#prijs .prijs__rechts { display: grid; justify-items: start; gap: var(--sp-24); }
#prijs .prijs__rechts .lead { color: var(--tekst); }

/* sec-7-vragen: alles van deze sectie staat onder #vragen.
   De stilste sectie: alleen typografie, ruimte en lijnen. De HTML-volgorde is kop, vragen, contactblad: zo leest een telefoon en een schermlezer het, op desktop zet het raster het blad links */
#vragen { padding-block: var(--sectie); }
#vragen .vragen__raster > * { grid-column: 1 / -1; }
#vragen h2 { margin-bottom: var(--kop-ruimte); }
#vragen .vragen__contact { width: min(100%, 440px); margin-top: var(--sp-48); padding: var(--sp-24); border-radius: var(--r-12); background: var(--vlak); }
#vragen .vragen__contact h3 { margin-bottom: var(--sp-8); font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }

@media (min-width: 1041px) {
  #vragen .vragen__raster { grid-template-rows: auto 1fr; }
  /* De kapitaalhoogte van de kop staat op de inktlijn van de lijst */
  #vragen .vragen__raster > h2 { grid-column: 1 / span 5; grid-row: 1; margin-block: -0.18em 0; }
  #vragen .vragen__raster > .vragen { grid-column: 7 / -1; grid-row: 1 / span 2; }
  #vragen .vragen__raster > .vragen__contact { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
}
@media (max-width: 760px) {
  #vragen .vragen__contact { width: 100%; margin-top: var(--sp-32); }
}

/* sec-8-slot: alles van deze sectie staat onder #slot.
   Het volle vlak met de kop op hero-maat en één object: de eerste pagina van de pdf, die achter de footer verdwijnt.
   Geen eigen stapelvolgorde op de sectie: het vel (z-index 1) moet onder .voet (z-index 2) door kunnen.
   Rij onder de kop is flex met justify-content: flex-end: zonder het vel schuift de tekst vanzelf naar de middenlijn. */
#slot { --vel-breed: min(538px, calc((100% - 264px) / 12 * 5 + 96px)); --vel-rest: 180px; padding-top: clamp(80px, calc(7.6923vw + 21.54px), 120px); padding-bottom: 0; }
#slot .slot__onder { display: flex; justify-content: flex-end; align-items: flex-start; gap: var(--goot); }
#slot .slot__tekst { flex: 0 0 calc(50% - 12px); padding-block: 56px 96px; }
#slot .lead { max-width: min(100%, 538px); }
#slot .knoppen { margin-top: var(--sp-32); }

/* Hoe ver het vel achter de footer doorloopt staat vast (--vel-rest), niet hoeveel er zichtbaar is: zo snijdt de footer nooit door een regel, ook niet als tekst afbreekt of groter staat */
#slot .slot__vel { position: relative; z-index: 1; flex: 0 0 var(--vel-breed); margin: var(--sp-24) calc(50% - 12px - var(--vel-breed)) calc(var(--vel-rest) * -1) 0; }
#slot .vb { display: flex; width: max-content; margin: 0 0 var(--sp-8) auto; }   /* rechts, 8 boven zijn fragment, net als overal */
#slot .slot__blad { padding: 40px 40px calc(var(--vel-rest) + 24px); }
#slot .slot__blad-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-bottom: var(--sp-24); }
#slot .slot__bijlage { color: var(--stil); font-size: 14px; line-height: 18px; font-weight: 500; }
#slot .slot__voor { margin-top: 4px; color: var(--zacht); font-size: 17px; line-height: 26px; }
#slot .slot__punten { margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--lijn); font-size: 17px; line-height: 26px; }
#slot .slot__punten li + li { margin-top: var(--sp-24); }

@media (max-width: 1279px) {
  #slot .slot__blad { padding-inline: 32px; }
}
@media (max-width: 1040px) {
  #slot { --vel-breed: min(100%, 520px); --vel-rest: 140px; }
  #slot .t-display { font-size: 56px; line-height: 58px; }
  #slot .slot__onder { flex-direction: column; gap: 0; }
  #slot .slot__tekst { flex: none; width: 100%; padding-block: 40px 64px; }
  #slot .slot__vel { flex: none; width: var(--vel-breed); margin: 0 0 calc(var(--vel-rest) * -1); }
  #slot .slot__blad { padding: 24px 24px calc(var(--vel-rest) + 16px); }
  #slot .slot__blad-kop { margin-bottom: var(--sp-16); }
  #slot .slot__punten { margin-top: var(--sp-16); padding-top: var(--sp-16); }
  #slot .slot__punten li + li { margin-top: var(--sp-16); }
}
@media (max-width: 760px) {
  #slot { --vel-breed: 100%; --vel-rest: 100px; }
  #slot .t-display { font-size: var(--fs-display); line-height: var(--lh-display); }
  #slot .slot__tekst { padding-block: var(--sp-24) var(--sp-48); }
  #slot .knop { width: 100%; }
  #slot .knoppen { flex-direction: column; align-items: flex-start; gap: var(--sp-8); margin-top: var(--sp-24); }
  #slot .slot__blad { padding-inline: 20px; padding-top: 20px; }
  #slot .blad__titel { font-size: 24px; line-height: 30px; }
  #slot .slot__voor { margin-top: 0; }
  #slot .slot__punten { margin-top: var(--sp-12); padding-top: var(--sp-12); }
  #slot .slot__punten li + li { margin-top: var(--sp-8); }
}