/* Taqqle · Kennismaking (/kennismaking) en zijn bedankpagina (/kennismaking/bedankt), 11 november 2026, in de stijl van de homepage (richting A).
   Laadt na tokens.css, basis.css en paginas.css, alleen op deze twee pagina's. Geen hexwaarden: alles uit tokens.css.
   Type, knoppen, het blad, het formulier en het slot komen uit basis.css; hier staat de plaatsing en wat alleen deze twee pagina's hebben.
   Geen eigen script: het formulier, de bevestiging op de bedankpagina en de afsprakenlink zitten in js/basis.js. Het formulier is niet veranderd.
   Kennismaking: eerste scherm op inkt met het formulier als wit blad (tekst links, blad rechts) · na je aanvraag over de volle breedte · slot.
   Bedankpagina: hetzelfde eerste scherm, met op de plek van het formulier het blad met de stand · intussen over de volle breedte.
   Tot en met 760 staat alles onder elkaar; van 761 tot en met 1040 staat de kop boven en het blad rechts naast de zin. */

/* sec-1-hero (beide pagina's): het eerste scherm op inkt, zoals de hero van de homepage. Links de kop, één zin en twee feiten; rechts het blad.
   De html-volgorde is kop, zin, feiten, blad. De tekst staat boven uitgelijnd met het blad.
   --hero-boven is de ruimte onder de balk: 72, 40 of 32, zoals op de homepage */
#hero { --hero-boven: 72px; padding-block: var(--hero-boven) var(--sp-96); }
#hero .hero__raster { align-items: start; }
#hero .hero__tekst, #hero .hero__blad { grid-column: 1 / -1; min-width: 0; }
#hero h1 { line-height: 1.06; }
/* De streep onder één woord, in mint, zoals onder "jouw bedrijf" op de homepage */
#hero .hero__streep { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: .045em; text-underline-offset: .1em; }
#hero .lead { margin-top: var(--sp-24); }
#hero .hero__blad { margin-top: var(--sp-32); }
/* Het blad is het beeld van dit scherm: de hoek van de foto op de homepage. Op inkt is een schaduw niet te zien */
#hero .blad--formulier, #hero .stand { border-radius: var(--r-20); box-shadow: none; }
/* De twee feiten: korte regels onder een dunne lijn, zoals de feiten in de hero van de homepage. Ze staan er vanaf 761, naast het blad.
   Op de telefoon staat het formulier direct onder de zin: de duur staat in de zin, de vorm en het plannen in het formulier en in het blok eronder */
#hero .hero__feiten { display: none; margin-top: var(--sp-48); border-top: 1px solid var(--haarlijn); color: var(--tekst-2); font-size: 17px; line-height: 26px; }
#hero .hero__feiten li { padding-block: 20px; text-wrap: pretty; }
#hero .hero__feiten li + li { border-top: 1px solid var(--haarlijn); }
#hero .hero__feiten b { color: var(--tekst); font-weight: 600; }
@media (min-width: 761px) {
  #hero .hero__feiten { display: block; }
}
@media (min-width: 1041px) {
  #hero .hero__tekst { grid-column: 1 / span 6; }
  #hero .hero__blad { grid-column: 7 / -1; margin-top: 0; }
  /* De kapitaalhoogte van de kop staat op de bovenrand van het blad */
  #hero h1 { margin-top: -0.18em; }
}
@media (min-width: 1280px) {
  /* Breed genoeg voor een kolom lucht tussen de tekst en het blad; daaronder zouden de velden te smal worden */
  #hero .hero__blad { grid-column: 8 / -1; }
}
@media (min-width: 1041px) and (max-height: 760px) {
  /* Op een laag laptopscherm (1280 × 720) begint het blad hoger, zoals op de gratis check */
  #hero { --hero-boven: var(--sp-48); }
}
@media (min-width: 1041px) and (min-height: 700px) {
  /* Het korte deel loopt mee met het lange formulier ernaast, zolang het in het scherm past.
     Staat de cookiekaart open (linksonder, over de feiten), dan schuift de tekst gewoon mee met de pagina: zo komen de feiten onder de kaart vandaan */
  #hero .hero__tekst { position: sticky; top: calc(var(--balk) + var(--hero-boven)); }
  html.cookie-open #hero .hero__tekst { position: static; }
}
@media (max-width: 1040px) {
  #hero { --hero-boven: 40px; padding-bottom: var(--sp-64); }
}
@media (min-width: 761px) and (max-width: 1040px) {
  /* Tablet: de kop over de volle breedte, daaronder de zin en de feiten links en het blad rechts, zoals op de gratis check.
     Zo begint het formulier in het eerste scherm. De tekstgroep lost op in het raster; de vierde rij is rekbaar,
     zodat de lengte van het blad de zin en de feiten niet uit elkaar trekt */
  #hero .hero__raster { grid-template-rows: auto auto auto 1fr; }
  #hero .hero__tekst { display: contents; }
  #hero h1 { grid-column: 1 / -1; }
  #hero .lead, #hero .hero__feiten { grid-column: 1 / span 5; }
  #hero .lead { margin-top: var(--sp-32); }
  #hero .hero__feiten { margin-top: var(--sp-32); }
  #hero .hero__blad { grid-column: 6 / -1; grid-row: 2 / span 3; }
  #hero .blad--formulier, #hero .stand { padding: var(--sp-24); }
}
@media (max-width: 760px) {
  #hero { --hero-boven: var(--sp-32); padding-bottom: var(--sp-48); }
}

/* Het formulier op /kennismaking: het blad uit basis.css, wit op inkt. De velden zelf zijn niet veranderd.
   De verstuurknop breekt af bij 320 met vergrote tekst, in plaats van uit de pil te lopen (G10) */
#hero .formulier .knop { max-width: 100%; padding-block: var(--sp-8); white-space: normal; text-align: center; text-wrap: balance; }
/* Een toelichting van twee regels breekt gelijkmatig af, niet op het streepje van "e-mail".
   In de samenvatting van de fouten blijft de naam van een veld heel ("E-mailadres") */
#hero .veld__hulp { text-wrap: balance; }
#hero .formulier__fout a { white-space: nowrap; }

/* sec-2-verder (/kennismaking): wat er na de aanvraag gebeurt. Drie stappen onder één dunne lijn, zoals "Zo komt een aanvraag bij je binnen"
   op de homepage; hier op wit, dus het cijfer in mint-700 (mint op wit haalt 1,7:1). Elke stap is het cijfer en één alinea:
   losse tekst met een span erin zou in de flex- en rasterindeling in stukken vallen */
#verder { padding-block: clamp(80px, calc(9.2308vw + 9.85px), 128px); }
#verder .verder__stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--kop-ruimte); border-top: 1px solid var(--haarlijn); counter-reset: stap; }
#verder .verder__stappen li { display: flex; flex-direction: column; gap: var(--sp-8); padding: 22px 28px 0 0; font-size: 19px; line-height: 27px; text-wrap: pretty; counter-increment: stap; }
#verder .verder__stappen li::before { content: counter(stap); color: var(--mint-700); font-size: 15px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  #verder .verder__stappen { grid-template-columns: minmax(0, 1fr); }
  #verder .verder__stappen li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; gap: 0; padding: 18px 0; }
  #verder .verder__stappen li + li { border-top: 1px solid var(--haarlijn); }
  #verder .verder__stappen li:last-child { border-bottom: 1px solid var(--haarlijn); }
}

/* ---------- De bedankpagina (/kennismaking/bedankt) ---------- */

/* Het blad met de stand staat op de plek van het formulier: aangevraagd, moment kiezen, kennismaking.
   Het teken vóór elke stap is getekend: een vinkje (klaar), een dichte stip (nu) of een open ring (komt nog). De stand staat ook in de tekst */
#hero .stand { padding: var(--sp-32); }
#hero .stand__kop { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: -0.02em; }
#hero .stand__stappen { margin-top: var(--sp-8); }
#hero .stand__stap { position: relative; padding: var(--sp-16) 0 var(--sp-16) 36px; border-bottom: 1px solid var(--lijn); }
#hero .stand__stap::before { content: ""; position: absolute; left: 5px; top: 22px; width: 14px; height: 14px; border: 2px solid var(--zacht); border-radius: var(--pil); }
/* De stip is een volle rand: zo blijft hij staan in de hoge-contrastmodus, waar een achtergrond wegvalt */
#hero .stand__stap--nu::before { border-width: 7px; border-color: var(--mint-700); }
#hero .stand__stap--klaar::before { left: 8px; top: 20px; width: 8px; height: 14px; border: solid var(--mint-700); border-width: 0 2px 2px 0; border-radius: 0; transform: rotate(45deg); }
#hero .stand__stap h3 { font-size: 17px; line-height: 26px; font-weight: 600; letter-spacing: 0; }
#hero .stand__stap p { margin-top: var(--sp-4); color: var(--zacht); font-size: 16px; line-height: 24px; text-wrap: pretty; }
#hero .stand__noot { margin-top: var(--sp-16); color: var(--zacht); font-size: 15px; line-height: 22px; }
#hero .stand__noot a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
#hero .stand__noot a:hover { text-decoration-thickness: 2px; }
@media (max-width: 760px) {
  #hero .stand { padding: var(--sp-24); }
}
@media (max-width: 359px) {
  #hero .stand { padding: var(--sp-16); }
}

/* sec-2-intussen (bedankpagina): wat je intussen kunt doen. Drie wegen naast elkaar onder één dunne lijn, zoals "Opzeggen en pauzeren" op /prijzen.
   Tablet: elke weg een regel met de naam links; telefoon: onder elkaar */
#intussen { padding-block: clamp(80px, calc(9.2308vw + 9.85px), 128px); }
#intussen .intussen__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--goot); margin-top: var(--kop-ruimte); border-top: 1px solid var(--haarlijn); }
/* Naast elkaar staan de drie links op één lijn, ook als de zin erboven een regel meer heeft */
#intussen .intussen__lijst li { display: flex; flex-direction: column; align-items: flex-start; padding: 28px var(--sp-32) 0 0; }
#intussen h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.012em; }
#intussen .intussen__lijst p { max-width: 34em; margin-block: var(--sp-8); color: var(--tekst-2); text-wrap: pretty; }
#intussen .link { margin-top: auto; }
@media (max-width: 1040px) {
  #intussen .intussen__lijst { display: block; }
  #intussen .intussen__lijst li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--goot); align-items: baseline; padding: var(--sp-24) 0; }
  #intussen .intussen__lijst li + li { border-top: 1px solid var(--haarlijn); }
  #intussen .intussen__lijst li:last-child { padding-bottom: 0; }
  #intussen .intussen__lijst li > :not(h3) { grid-column: 2; }
  #intussen .intussen__lijst p { margin-top: 0; }
  #intussen .link { justify-self: start; }
}
@media (max-width: 760px) {
  #intussen .intussen__lijst li { display: block; padding-block: 20px; }
  #intussen .intussen__lijst p { margin-top: var(--sp-4); }
}

/* Print: de zone wordt wit; het eerste scherm verliest zijn ruimte en de kop krijgt de maat van een paginakop op papier (basis.css) */
@media print {
  #hero { padding: 0; }
  #hero .hero__tekst { position: static; }
  #hero h1 { margin-top: 0; font-size: 20pt; line-height: 1.15; letter-spacing: -0.032em; }
  #hero .blad--formulier, #hero .stand { box-shadow: var(--s-1); }
}

/* ---------- Wervingsadvies (/werving/advies en /werving/advies/bedankt, 12 november 2026) ----------
   Dezelfde bouwstenen als /kennismaking: het eerste scherm met het formulier als wit blad, "Zo gaat het" als #verder, het slot en de bedankpagina.
   Eigen is alleen "Wat je krijgt" in het eerste scherm: vier vinkjes onder een dunne lijn, zoals de feiten hierboven, maar ook op de telefoon,
   want dat is de belofte van de pagina. Op inkt staat het vinkje in mint (basis.css: mint-700, voor op wit) */
#hero .advies__krijg { margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid var(--haarlijn); }
#hero .advies__krijg-kop { color: var(--tekst-2); font-size: 17px; line-height: 26px; font-weight: 500; letter-spacing: 0; }
#hero .advies__krijg .vinken { margin-top: var(--sp-12); gap: 10px; font-size: 17px; line-height: 26px; }
#hero .advies__krijg .vinken li::before { border-color: var(--mint); }
@media (min-width: 761px) and (max-width: 1040px) {
  /* Tablet: de tekstgroep lost op in het raster (zie boven); "Wat je krijgt" staat links onder de zin, naast het blad */
  #hero .advies__krijg { grid-column: 1 / span 5; }
}

/* ---------- Foto's en video uploaden op /werving/advies (12 november 2026; js/upload.js) ----------
   Een rustig vlak in de stijl van de velden: de knop "Bestanden kiezen" als omlijnde knop, daaronder per bestand de naam, de grootte,
   de voortgang en Verwijder. Het echte bestandsveld ligt onder de knop (onzichtbaar, wel te bedienen met toetsenbord en schermlezer) */
.upload { margin-top: var(--sp-24); }
.upload[hidden] { display: none; }
.upload__kies { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--sp-8); padding: 0 var(--sp-24); border-radius: var(--pil); box-shadow: inset 0 0 0 1px var(--lijn-sterk); color: var(--ink); font-weight: 600; cursor: pointer; }
.upload__kies:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.upload__kies:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.upload__invoer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload__invoer:disabled + span { opacity: .5; }
.upload__lijst { display: grid; gap: var(--sp-8); margin-top: var(--sp-12); }
.upload__lijst:empty { display: none; }
.upload__bestand { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--sp-12); row-gap: 4px; padding: 10px 12px; border-radius: var(--r-12); background: var(--vlak); font-size: 15px; line-height: 22px; }
.upload__naam { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); font-weight: 500; }
.upload__maat, .upload__stand { color: var(--zacht); font-variant-numeric: tabular-nums; }
.upload__voortgang { grid-column: 1 / -1; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--vlak-2); accent-color: var(--mint-700); }
.upload__voortgang::-webkit-progress-bar { background: var(--vlak-2); border-radius: 2px; }
.upload__voortgang::-webkit-progress-value { background: var(--mint-700); border-radius: 2px; }
.upload__voortgang::-moz-progress-bar { background: var(--mint-700); border-radius: 2px; }
.upload__voortgang[hidden] { display: none; }
.upload__bestand[data-stand="klaar"] .upload__stand { color: var(--mint-700); font-weight: 600; }
.upload__bestand[data-stand="fout"] .upload__stand { color: var(--fout, var(--ink)); font-weight: 600; }
.upload__weg { grid-column: 3; grid-row: 1; min-height: 32px; padding: 0 4px; border-radius: var(--r-8); color: var(--ink); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.upload__stand { grid-column: 2; grid-row: 1; }
.upload__maat { display: none; }
@media (min-width: 420px) {
  .upload__bestand { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .upload__maat { display: block; grid-column: 2; grid-row: 1; }
  .upload__stand { grid-column: 3; }
  .upload__weg { grid-column: 4; }
}