/* 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-groep > .vb { justify-self: end; }
.vel { --logo-hoogte: 21px; 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; }
.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: kop en label op één regel boven het vel, de fotostrook boven het woordmerk */
.vel-kop { max-width: 427px; margin-bottom: -28px; padding-right: 92px; 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__tegel .vb { display: none; }
  .werkt__slot .vb { display: inline-flex; }
  .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: in licht-inkt het enige donkere vlak tussen kop en slot, in inkt op het vlak */
.tegel--eiland { --grond: var(--ink); --tekst: var(--op-ink); --tekst-2: var(--op-ink-zacht); padding: 56px; border-radius: var(--r-20); background: var(--grond); color: var(--tekst); }
html[data-stijl="inkt"] .tegel--eiland { --grond: var(--vlak); --tekst: var(--ink); --tekst-2: var(--zacht); }
@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; }
}