/* Taqqle homepage (11 november 2026, richting A "Inkt, met mensen"): de secties, op volgorde van de pagina.
   Laadt na tokens.css en basis.css, alleen op de homepage. Geen hexwaarden: alles uit tokens.css.
   Type, knoppen, de foto, de melding, de vragen en het slot komen uit basis.css; hier staat de plaatsing en wat alleen de homepage heeft.
   De blokken wisselen af: de tweedeling uit basis.css gewoon (.delen: tekst links, inhoud rechts) en omgekeerd (.delen--om), met blokken over de volle breedte ertussen; tot en met 1040 onder elkaar.
   Geen script: de pagina heeft geen eigen JavaScript meer (home.js is weg). */

#mensen .lead, #prijs .lead { margin-top: var(--sp-16); }

/* De vinkjeslijst (.vinken) staat in basis.css */

/* sec-1-hero: tekst links, foto rechts, eronder drie feiten op één lijn. Alles van deze sectie staat onder #hero */
#hero { padding-top: 72px; }
#hero .hero__raster { align-items: center; row-gap: var(--sp-48); }
#hero h1 { line-height: 1.06; }
#hero .hero__naam { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: .045em; text-underline-offset: .1em; }
#hero .lead { margin-top: var(--sp-24); }
#hero .knoppen { margin-top: var(--sp-32); }
/* Vergrote tekst (G10): de knop mag afbreken in plaats van het scherm uit te lopen. Het slot regelt dat zelf (basis.css) */
#hero .knop, #hoe .knop { max-width: 100%; padding-block: var(--sp-12); white-space: normal; text-align: center; }
#hero .hero__foto { aspect-ratio: 5 / 4; }
#hero .hero__foto img { object-position: 44% 40%; }   /* het gezicht en de laptop blijven in beeld, ook in de bredere uitsnede op tablet */
#hero .hero__feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--haarlijn); color: var(--tekst-2); font-size: 17px; line-height: 26px; }
#hero .hero__feiten li { padding-block: var(--sp-24); }
#hero .hero__feiten li + li { padding-left: var(--sp-32); border-left: 1px solid var(--haarlijn); }
#hero .hero__feiten b { color: var(--tekst); font-weight: 600; }
#hero .hero__kort { display: none; }
@media (max-width: 1040px) {
  #hero { padding-top: 40px; }
  #hero .hero__foto { aspect-ratio: 16 / 9; }
  #hero .hero__feiten { margin-top: var(--sp-48); }
}
@media (max-width: 760px) {
  #hero { padding-top: var(--sp-32); }
  #hero .hero__raster { row-gap: 40px; }
  #hero .hero__foto { aspect-ratio: 4 / 3; }
  #hero .hero__feiten { grid-template-columns: minmax(0, 1fr); }
  #hero .hero__feiten li { padding-block: 18px; }
  #hero .hero__feiten li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--haarlijn); }
  /* De drie feiten als één regel boven de foto; de lijst onder de foto vervalt (15 november 2026, review p3) */
  #hero .hero__kort { display: block; margin-top: var(--sp-24); color: var(--tekst-2); font-size: 16px; line-height: 24px; text-wrap: pretty; }
  #hero .hero__kort b { color: var(--tekst); font-weight: 600; }
  #hero .hero__feiten { display: none; }
}

/* sec-2-werk: de kop boven, drie lijsten naast elkaar over de volle breedte (elk vier kolommen). De lijst van de ondernemer staat op inkt */
#werk { padding-block: var(--sectie); }
#werk .werk__lijsten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--goot); margin-top: var(--kop-ruimte); }
#werk .werk__lijst { padding: 28px; border-radius: var(--r-20); background: var(--vlak); }
#werk .werk__lijst--jij { background: var(--ink); color: var(--op-ink); }
#werk .werk__lijst--jij .vinken li::before { border-color: var(--mint); }
#werk h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.012em; }
#werk .vinken { margin-top: var(--sp-16); }
#werk .werk__meer { margin-top: var(--sp-32); }
@media (max-width: 1040px) {
  /* tablet: twee lijsten naast elkaar, die van de ondernemer eronder over de volle breedte */
  #werk .werk__lijsten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
  #werk .werk__lijst--jij { grid-column: 1 / -1; }
  #werk .werk__lijst--jij .vinken { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); }
}
@media (max-width: 760px) {
  #werk .werk__lijsten { grid-template-columns: minmax(0, 1fr); }
  #werk .werk__lijst { padding: var(--sp-24); }
  #werk .werk__lijst--jij { grid-column: auto; }
  #werk .werk__lijst--jij .vinken { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* sec-3-aanvraag: op inkt (ontwerp 13 november 2026). Links de kop, de vier stappen onder elkaar en de knoppen; rechts de telefoon met de
   schermopname van /kijk-mee over de volle hoogte. Speelt de video, dan is de stap die je ziet wit met een mint lijn die volloopt, de rest
   gedempt (60% wit: 6,4:1 op inkt, dus nog leesbaar). Geen verloop: vier balken in mint, blauw en violet vond Willem "een discobal" (11 november) */
#aanvraag { padding-block: clamp(80px, calc(9.2308vw + 9.85px), 128px); }
#aanvraag .aanvraag__raster { row-gap: 0; align-items: start; }
#aanvraag .aanvraag__kop { max-width: 14em; }
#aanvraag .aanvraag__stappen { margin-top: var(--sp-48); counter-reset: stap; }
#aanvraag .aanvraag__stappen li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; padding-block: 20px; border-top: 1px solid var(--haarlijn); font-size: 21px; line-height: 29px; counter-increment: stap; transition: color var(--duur-kort) ease; }
#aanvraag .aanvraag__stappen li:last-child { border-bottom: 1px solid var(--haarlijn); }
#aanvraag .aanvraag__stappen li::before { content: counter(stap); color: var(--tekst-2); font-size: 15px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* De lijn die volloopt zolang een stap in beeld is: effen mint, over de onderrand van de rij */
#aanvraag .aanvraag__stappen li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mint); transform: scaleX(var(--voortgang, 0)); transform-origin: left; opacity: 0; }
#aanvraag .aanvraag__stappen[data-speelt] li { color: rgba(244, 245, 246, 0.6); }
#aanvraag .aanvraag__stappen[data-speelt] li[data-actief] { color: var(--op-ink); }
#aanvraag .aanvraag__stappen[data-speelt] li[data-actief]::after { opacity: 1; }
#aanvraag .aanvraag__tekst { margin-top: var(--sp-48); }
#aanvraag .aanvraag__tekst .lead { max-width: 30em; }
#aanvraag .aanvraag__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--sp-24); margin-top: var(--sp-32); }
#aanvraag .aanvraag__knoppen .knop { max-width: 100%; padding-block: var(--sp-12); white-space: normal; text-align: center; }
/* De telefoon: dezelfde als in het eerste scherm van /kijk-mee */
#aanvraag .aanvraag__route { display: flex; flex-direction: column; align-items: center; margin: 0; }
#aanvraag .aanvraag__route .telefoon--video { width: 100%; max-width: 320px; }
#aanvraag .telefoon { padding: 10px; border: 1.5px solid var(--tel-ring); border-radius: 44px; background: var(--zwart); box-shadow: var(--s-3); }
#aanvraag .telefoon--video { position: relative; flex: 0 1 320px; min-width: 0; }
#aanvraag .telefoon__video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 34px; background: var(--vlak); object-fit: cover; }
#aanvraag .route__knop { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--wit); box-shadow: 0 0 0 2px var(--wit), var(--s-2); cursor: pointer; }
#aanvraag .route__knop[hidden] { display: none; }
#aanvraag .route__knop:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
#aanvraag .route__knop[data-staat="speelt"] .route__speel, #aanvraag .route__knop[data-staat="pauze"] .route__pauze { display: none; }

@media (min-width: 1041px) {
  #aanvraag .aanvraag__kop, #aanvraag .aanvraag__stappen, #aanvraag .aanvraag__tekst { grid-column: 1 / span 6; }
  #aanvraag .aanvraag__kop { grid-row: 1; }
  #aanvraag .aanvraag__stappen { grid-row: 2; }
  #aanvraag .aanvraag__tekst { grid-row: 3; }
  #aanvraag .aanvraag__route { grid-column: 8 / -1; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 1040px) {
  #aanvraag .aanvraag__raster > * { grid-column: 1 / -1; }
  #aanvraag .aanvraag__route { margin-top: var(--sp-48); }
  #aanvraag .telefoon--video { flex-basis: 280px; }
}
@media (max-width: 760px) {
  #aanvraag .aanvraag__stappen li { grid-template-columns: 32px minmax(0, 1fr); padding-block: 16px; font-size: 19px; line-height: 27px; }
  #aanvraag .aanvraag__route { margin-top: var(--sp-32); }
  #aanvraag .aanvraag__stappen { margin-top: var(--sp-32); }
  #aanvraag .aanvraag__tekst { margin-top: var(--sp-32); }
  #aanvraag .telefoon--video { flex-basis: 250px; }
}

@media (min-width: 1041px) {
}
@media (max-width: 1040px) {
}

/* sec-4-mensen (12 november 2026): direct contact. Eén foto van een videogesprek groot links (.delen--om), de kop, de zin en de link rechts.
   Tot en met 1040 onder elkaar, met de foto boven de tekst. De portretten staan alleen nog op Over ons (over-ons.css) */
#mensen { padding-block: var(--sectie); }
#mensen .mensen__foto { aspect-ratio: 3 / 2; }
#mensen .lead { max-width: 24em; }
#mensen .link { margin-top: var(--sp-24); }
@media (max-width: 1040px) {
  #mensen .mensen__foto { order: -1; margin: 0 0 var(--sp-32); }
}
@media (max-width: 760px) {
  #mensen .mensen__foto { border-radius: var(--r-12); }
}

/* sec-5-prijs: twee stapels (naar ons, naar Google en Meta) en de som. Het anker #prijs blijft bestaan.
   De pakketten, Op maat en de rekensom staan op /prijzen */
#prijs { --grond: var(--vlak); padding-block: clamp(80px, calc(9.2308vw + 9.85px), 128px); }
#prijs .prijs__stapels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
#prijs .prijs__stapel { padding: 28px; border-radius: var(--r-20); background: var(--wit); box-shadow: var(--s-1); }
#prijs .prijs__stapel--ons { background: var(--ink); color: var(--op-ink); box-shadow: none; }
#prijs .prijs__naar { font-size: 16px; line-height: 22px; font-weight: 600; }
/* Het bedrag is het grote; "vanaf" en "advies vanaf" staan er klein voor, op dezelfde regel. Zo past het ook in de smalle stapel naast elkaar */
#prijs .prijs__bedrag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-block: 10px var(--sp-8); }
#prijs .prijs__vanaf { font-size: 18px; line-height: 24px; font-weight: 500; }
#prijs .prijs__bedrag .bedrag { font-size: var(--fs-cijfer); line-height: var(--lh-cijfer); font-weight: 600; letter-spacing: -0.03em; }
#prijs .prijs__uitleg { color: var(--zacht); font-size: 16px; line-height: 24px; }
#prijs .prijs__stapel--ons .prijs__uitleg { color: var(--op-ink-zacht); }
#prijs .prijs__btw { margin-top: var(--sp-12); color: var(--zacht); font-size: 15px; line-height: 22px; }
#prijs .link { margin-top: var(--sp-16); }
@media (max-width: 760px) {
  #prijs .prijs__stapels { grid-template-columns: minmax(0, 1fr); }
  #prijs .prijs__stapel { padding: var(--sp-24); }
}

/* sec-6-hoe: zo beginnen we. De kop links en de knop rechts, daaronder vier kolommen onder één lijn: de stappen (.stappen-kop, .stappen)
   staan sinds 13 november 2026 in basis.css, zoals op /werving. Hier alleen de ruimte; het anker #hoe blijft bestaan */
#hoe { padding-block: var(--sectie); }

/* sec-7-vragen: alleen typografie, ruimte en lijnen, op het rustige vlak. De HTML-volgorde is kop, vragen, contactblad:
   zo leest een telefoon en een schermlezer het, op desktop zet het raster het blad links */
#vragen { --grond: var(--vlak); padding-block: var(--sectie); }
#vragen .vragen__raster > * { grid-column: 1 / -1; }
#vragen h2 { margin-bottom: var(--kop-ruimte); }
#vragen .vraag summary:hover .vraag__plus { background: var(--vlak-2); }
#vragen .vraag__antwoord a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
#vragen .vragen__contact { width: min(100%, 440px); margin-top: var(--sp-48); padding: var(--sp-24); border-radius: var(--r-12); background: var(--wit); box-shadow: var(--s-1); }
#vragen .vragen__contact h3 { margin-bottom: var(--sp-8); font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
/* Het label houdt zijn breedte, het nummer of adres krijgt de rest en mag afbreken (vergrote tekst op 320, G10) */
#vragen .vragen__contact .regel { grid-template-columns: auto minmax(0, 1fr); }
#vragen .vragen__contact .regel > :last-child { overflow-wrap: anywhere; }
@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 4; grid-row: 1; margin-block: -0.18em 0; }
  #vragen .vragen__raster > .vragen { grid-column: 6 / -1; grid-row: 1 / span 2; }
  #vragen .vragen__raster > .vragen__contact { grid-column: 1 / span 4; grid-row: 2; align-self: start; }
}
@media (max-width: 760px) {
  #vragen .vragen__contact { width: 100%; margin-top: var(--sp-32); }
}
@media (max-width: 299px) {
  /* Sterk ingezoomd: het nummer en het adres onder hun label, over de volle breedte */
  #vragen .vragen__contact .regel { grid-template-columns: minmax(0, 1fr); }
  #vragen .vragen__contact .regel > :last-child { text-align: left; }
}

/* Print: de zone wordt wit, dus het stapnummer in inkt in plaats van mint (mint op wit haalt 1,7:1) */
@media print {
  #aanvraag .aanvraag__stappen li::before { color: var(--zwart); }
}

/* #mensen: het citaat van Twintos onder de zin (15 november 2026, p1 voorstel A) */
#mensen .mensen__citaat { margin: var(--sp-32) 0 0; padding-top: var(--sp-24); border-top: 1px solid var(--haarlijn); }
#mensen .mensen__citaat blockquote { margin: 0; }
#mensen .mensen__citaat p { font-size: 19px; line-height: 28px; font-weight: 500; text-wrap: pretty; }
#mensen .mensen__citaat figcaption { margin-top: var(--sp-12); color: var(--tekst-2); font-size: 15px; line-height: 22px; }
#mensen .mensen__citaat b { color: var(--tekst); font-weight: 600; }

/* De keuze uit drie voorbeelden boven de telefoon (15 november 2026). Op inkt: omlijnde knoppen, de gekozen knop wit met inkt.
   Staat ook in home.css en kijk-mee.css (zelfde regels): wijzig ze samen */
.voorbeeldkeuze { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); margin: 0 0 var(--sp-24); }
.voorbeeldkeuze button { font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--tekst); background: transparent; border: 1px solid var(--chip-rand); border-radius: var(--pil); padding: 10px 16px; min-height: 44px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.voorbeeldkeuze button:hover { border-color: var(--tekst); }
.voorbeeldkeuze button[aria-pressed="true"] { background: var(--tekst); color: var(--grond); border-color: var(--tekst); }
.voorbeeldkeuze button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .voorbeeldkeuze button { transition: none; } }
@media (max-width: 420px) { .voorbeeldkeuze { gap: 6px; } .voorbeeldkeuze button { font-size: 14px; padding: 9px 12px; } .voorbeeldkeuze__lang { display: none; } }