/* Taqqle · Kijk mee (/kijk-mee), 13 november 2026, in de stijl van de homepage: de secties, op volgorde van de pagina.
   Laadt na tokens.css, basis.css en cookies.css, alleen op /kijk-mee. Geen hexwaarden: alles uit tokens.css.
   Type, knoppen, de tweedeling (.delen), het label Rekenvoorbeeld (.vb) en het slot komen uit basis.css;
   hier staat de plaatsing en de nagebouwde stukken: de kaart, het A4, de advertenties, het browserkader, de telefoon en het maandoverzicht.
   Eén voorbeeldbedrijf, Rijschool Blinker. Mint alleen als knop en klein accent; geen verloop, geen mintvlakken, geen pictogrammen.
   De blokken wisselen af: hero tekst links · stap 1 beeld links · stap 2 beeld rechts · stap 3 volle breedte · stap 4 beeld links ·
   stap 5 beeld rechts · stap 6 beeld links · slot. Tot en met 1040 staat alles onder elkaar, eerst de tekst.
   Alleen de schermopname in het eerste scherm beweegt (js/kijk-mee.js), te pauzeren en niet bij minder beweging. */

/* Het kleine label boven een kop (Stap 1, Ook van ons). Mint-700 op wit 5,8:1 en op het vlak 5,3:1; op inkt mint (9,9:1) */
.km-oog { margin-bottom: var(--sp-12); color: var(--mint-700); font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 0.02em; }
.zone-top .km-oog { color: var(--mint); }

/* sec-1-hero: zoals op de homepage en /app. Tekst links, de telefoon rechts, eronder de stappenbalk onder een dunne lijn */
#hero { padding-top: 72px; }
#hero .hero__raster { align-items: center; row-gap: var(--sp-48); }
#hero h1 { line-height: 1.06; }
#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 .knoppen { margin-top: var(--sp-32); }
/* Vergrote tekst (G10): de knop mag afbreken in plaats van het scherm uit te lopen */
#hero .knop { max-width: 100%; padding-block: var(--sp-12); white-space: normal; text-align: center; }
#hero .hero__beeld { display: flex; justify-content: center; }
@media (max-width: 1040px) {
  #hero { padding-top: 40px; }
}
@media (max-width: 760px) {
  #hero { padding-top: var(--sp-32); }
  #hero .hero__raster { row-gap: 40px; }
}

/* De stappenbalk: zes ankers als pillen onder één dunne lijn, het cijfer in mint. Op de telefoon drie aan drie, nooit opzij scrollen */
.stappenbalk { margin-top: 72px; padding-block: var(--sp-24) var(--sp-48); border-top: 1px solid var(--haarlijn); }
.stappenbalk__lijst { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-12); }
.stappenbalk a { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 48px; padding: 0 var(--sp-12); border-radius: var(--pil); box-shadow: inset 0 0 0 1px var(--chip-rand); color: var(--tekst); font-size: 16px; line-height: 20px; font-weight: 600; text-align: center; text-decoration: none; transition: box-shadow var(--duur-kort) var(--ease); }
.stappenbalk a:hover { box-shadow: inset 0 0 0 1px var(--tekst); }
.stappenbalk__nr { color: var(--mint); font-variant-numeric: tabular-nums; }
@media (max-width: 1040px) {
  .stappenbalk { margin-top: var(--sp-48); }
  .stappenbalk__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
}
@media (max-width: 760px) {
  /* telefoon: twee aan twee, zodat Kennismaking en Landingspagina heel blijven (drie aan drie brak ze midden in het woord af) */
  .stappenbalk { padding-bottom: var(--sp-32); }
  .stappenbalk__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stappenbalk a { justify-content: flex-start; gap: var(--sp-8); padding: 0 var(--sp-16); font-size: 15px; line-height: 20px; }
}
@media (max-width: 389px) {
  /* smal (320): minder ruimte binnen de pil, zodat Landingspagina erin past */
  .stappenbalk a { gap: 6px; padding: 0 10px; font-size: 14px; }
}
@media (max-width: 299px) {
  /* 390 op 200 procent zoom (195 breed): één kolom, anders lopen Kennismaking en Landingspagina uit hun pil en scrolt de pagina opzij */
  .stappenbalk__lijst { grid-template-columns: minmax(0, 1fr); }
}

/* De stappen: compacter dan een gewone sectie, zodat de pagina in een minuut door te scrollen is. Op het rustige vlak: --grond vlak */
.stap { padding-block: clamp(72px, calc(6.1538vw + 25px), 112px); }
.stap--vlak { --grond: var(--vlak); }
.stap .lead { margin-top: var(--sp-16); }
.stap__jij { display: flex; align-items: baseline; gap: var(--sp-12); margin-top: var(--sp-16); color: var(--tekst-2); font-size: 16px; line-height: 24px; text-wrap: pretty; }
.stap__pil { flex: none; padding: 1px 10px; border: 1px solid var(--lijn-knop); border-radius: var(--pil); color: var(--tekst); font-size: 13px; line-height: 20px; font-weight: 600; }   /* zoals het label Jij en Wij bij de stappen op Hoe het werkt */
.stap__knoppen { margin-top: var(--sp-24); }
.stap__knoppen .knop { max-width: 100%; white-space: normal; text-align: center; padding-block: var(--sp-12); }
.stap__beeld { display: flex; justify-content: center; }
@media (min-width: 1041px) {
  /* Het stuk is meestal hoger dan de tekst: de tekst staat er midden naast, zoals op /app. Twee lege rijen vangen de rest op */
  .stap .delen { grid-template-rows: 1fr auto 1fr; align-items: center; }
  .stap .delen > .delen__kop { grid-row: 2; }
  .stap .delen > .delen__inhoud { grid-row: 1 / -1; }
}
@media (max-width: 1040px) {
  .stap .delen__inhoud { margin-top: var(--sp-48); }
}
@media (max-width: 760px) {
  .stap .delen__inhoud { margin-top: var(--sp-32); }
}
/* Kop links, zin rechts (stap 3) */
.stap__kopregel { align-items: end; row-gap: var(--sp-16); }
.stap__kopregel .lead { margin-top: 0; }

/* Een nagebouwd stuk: wit blad met een zachte schaduw. Blijft wit met inkt, ook op het vlak */
.stuk { width: 100%; max-width: 520px; padding: 28px; border-radius: var(--r-20); background: var(--wit); color: var(--ink); box-shadow: var(--s-2); }
.stuk__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-8) var(--sp-16); padding-bottom: var(--sp-16); border-bottom: 1px solid var(--lijn); }
.stuk__kop strong { min-width: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; hyphens: auto; }   /* hyphens: Maandoverzicht past niet op 200 procent zoom */
.stuk__kop span:not(.vb) { color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.stuk__kop .vb { align-self: center; }
.stuk__regels > div { padding-block: var(--sp-16); border-bottom: 1px solid var(--lijn); }
.stuk__regels > div:last-child { border-bottom: 0; padding-bottom: 0; }
.stuk__regels dt { color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 600; }
.stuk__regels dd { margin: 2px 0 0; font-size: 17px; line-height: 24px; font-weight: 500; text-wrap: pretty; }   /* 500, niet 600: de kaart leest als notitie, niet als formulier (Willem, 13 november) */
.stuk__voet { margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--lijn); color: var(--zacht); font-size: 15px; line-height: 22px; }
/* Het voorstel als A4: de verhouding van een vel, groeit mee als de tekst langer is */
.stuk--a4 { max-width: 440px; aspect-ratio: 1 / 1.414; }
@media (max-width: 760px) {
  .stuk { padding: var(--sp-24) 20px; }
  .stuk--a4 { aspect-ratio: auto; }
}

/* Stap 3: drie advertenties naast elkaar, bovenaan uitgelijnd. Op tablet twee en de derde eronder, op de telefoon onder elkaar */
.advertenties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--goot); align-items: start; margin-top: var(--kop-ruimte); }
.advertentie { min-width: 0; }
.advertentie__kanaal { margin-bottom: 10px; color: var(--zacht); font-size: 15px; line-height: 22px; font-weight: 600; }
@media (max-width: 1040px) {
  .advertenties { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-48); }
}
@media (max-width: 760px) {
  .advertenties { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}
/* Facebook: kop, tekst, foto, regel met de knop */
.fb { overflow: hidden; border-radius: var(--r-20); background: var(--wit); box-shadow: var(--s-2); }
.fb__kop { display: flex; flex-direction: column; padding: var(--sp-16) var(--sp-16) 0; }
.fb__kop strong { font-size: 16px; line-height: 22px; font-weight: 600; }
.fb__kop span { color: var(--zacht); font-size: 13px; line-height: 18px; }
.fb__tekst { padding: var(--sp-12) var(--sp-16) var(--sp-16); font-size: 16px; line-height: 23px; }
.fb__beeld { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 55% 50%; }
.fb__onder { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); padding: 14px var(--sp-16) var(--sp-16); background: var(--vlak); }
.fb__onder strong { min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.fb__knop { flex: none; padding: 7px 12px; border-radius: var(--r-8); box-shadow: inset 0 0 0 1px var(--lijn-knop); font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
/* Instagram: een story op inkt. De foto vult het midden, de kop en de knop eronder */
.story { display: flex; flex-direction: column; gap: var(--sp-12); width: 100%; max-width: 340px; padding: var(--sp-16); border-radius: var(--r-20); background: var(--ink-2); color: var(--op-ink); }
.story__van { color: var(--op-ink-zacht); font-size: 13px; line-height: 18px; }
.story__beeld { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-12); object-fit: cover; object-position: 60% 50%; }
.story__kop { font-size: 26px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.story__knop { align-self: center; margin-top: var(--sp-4); padding: 12px 22px; border-radius: var(--pil); background: var(--op-ink); color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; text-align: center; }
@media (max-width: 760px) {
  .story { margin-inline: auto; max-width: 320px; }
}
/* Google: alleen tekst, zoals in de zoekresultaten */
.google { padding: 20px; border-radius: var(--r-20); background: var(--wit); box-shadow: var(--s-2); }
.google__van { margin-bottom: 6px; color: var(--zacht); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.google__kop { color: var(--ink); font-size: 19px; line-height: 26px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-wrap: pretty; }
.google__tekst { margin-top: var(--sp-8); color: var(--zacht); font-size: 15px; line-height: 22px; }

/* Stap 4: het schermbeeld in een browserkader. Hetzelfde kader staat in home.css (#voorbeeld) */
.browserkader { width: 100%; overflow: hidden; border-radius: var(--r-12); background: var(--wit); box-shadow: var(--s-2); }
.browserkader__balk { display: flex; align-items: center; gap: var(--sp-12); padding: 10px 14px; border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.browserkader__stippen { display: flex; flex: none; gap: 6px; }
.browserkader__stippen i { width: 10px; height: 10px; border-radius: 50%; background: var(--lijn-sterk); }
.browserkader__adres { flex: 1; min-width: 0; padding: 3px 10px; border-radius: var(--r-8); background: var(--wit); color: var(--zacht); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browserkader img { display: block; width: 100%; height: auto; }

/* Stap 5 (en de rand om de schermopname in het eerste scherm): een telefoon met de bevestiging en de melding. Zwart toestel met een lichte rand (zoals op /app), het scherm op het vlak.
   Wit op inkt en op wit even duidelijk: de rand --tel-ring is op inkt te zien, de schaduw op wit */
.telefoon { width: min(100%, 320px); padding: 10px; border: 1.5px solid var(--tel-ring); border-radius: 44px; background: var(--zwart); box-shadow: var(--s-3); }
.telefoon__scherm { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 36px 14px 56px; border-radius: 34px; background: var(--vlak); color: var(--ink); }
.telefoon__wanneer { margin-top: var(--sp-4); color: var(--zacht); font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; }
.telefoon__wanneer:first-child { margin-top: 0; }
.bericht { padding: 14px var(--sp-16); border-radius: 18px; background: var(--wit); box-shadow: var(--s-1); }
.bericht__van { color: var(--zacht); font-size: 13px; line-height: 18px; font-weight: 600; }
.bericht__onderwerp { margin-top: 4px; font-size: 15px; line-height: 20px; font-weight: 600; }
.bericht__tekst { margin-top: 4px; color: var(--zacht); font-size: 14px; line-height: 20px; }
.bericht__tekst--ink { color: var(--ink); font-size: 15px; font-weight: 600; }
.stap__beeld--telefoon { margin-inline: 0; }
/* Het eerste scherm: dezelfde telefoon met de schermopname (390×844, staand). Vaste verhouding, zodat er bij het laden niets verspringt.
   De poster staat er tot de video speelt, of blijft staan als hij niet laadt */
.telefoon--video { position: relative; width: min(100%, 300px); }
.telefoon__video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 34px; background: var(--vlak); object-fit: cover; }
/* De eigen knop: rechtsonder op het scherm, 44 bij 44, inkt met een witte rand, zodat hij op de lichte en de donkere delen van de opname te zien is */
.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; }
.route__knop[hidden] { display: none; }
.route__knop:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.route__knop[data-staat="speelt"] .route__speel, .route__knop[data-staat="pauze"] .route__pauze { display: none; }
@media (max-width: 389px) {
  .telefoon--video { width: min(100%, 260px); }
}

/* Stap 6: het maandoverzicht. Drie cijfers in inkt naast elkaar, daaronder wat we aanpassen */
.maandcijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); padding-block: var(--sp-24); border-bottom: 1px solid var(--lijn); }
.maandcijfers > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.maandcijfers dd { margin: 0; font-size: var(--fs-cijfer); line-height: var(--lh-cijfer); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.maandcijfers dt { margin-top: 6px; color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.stuk__tussenkop { margin-top: 20px; font-size: 15px; line-height: 22px; font-weight: 600; }
.stuk__lijst li { padding-block: 10px; border-bottom: 1px solid var(--lijn); font-size: 16px; line-height: 22px; }
.stuk__lijst li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Print: de zones worden wit; het cijfer in de stappenbalk in inkt in plaats van mint. De telefoon en de story breken niet over twee bladen */
@media print {
  .stappenbalk__nr, .zone-top .km-oog { color: var(--zwart); }
  .telefoon, .story, .stuk { break-inside: avoid; }
}