/* Taqqle · De TAQQLE-app (/app), 11 november 2026, in de stijl van de homepage (richting A): de secties, op volgorde van de pagina.
   Laadt na tokens.css en basis.css, alleen op /app. Geen hexwaarden: alles uit tokens.css.
   Type, knoppen, de tweedeling (.delen), de statuspillen, het label Rekenvoorbeeld (.vb), de vinkjes, de vragen en het slot komen uit basis.css;
   hier staat de plaatsing, de nagebouwde schermen van de app en wat alleen deze pagina heeft.
   De blokken wisselen af: hero tekst links en de telefoon rechts · status omgekeerd (.delen--om: het scherm links, de tekst rechts) ·
   cijfers over de volle breedte op inkt · ook gewoon (.delen: de kop links, de lijst rechts) · vragen kop links, lijst rechts.
   Tot en met 1040 staat een tweedeling onder elkaar; alleen bij status staan het scherm en de stappen op tablet nog naast elkaar.
   Geen script: de pagina heeft geen eigen JavaScript. */

/* De statussen van de app die basis.css nog niet heeft (Nieuw en Gebeld staan daar). Van inkt (hier moet je iets doen) naar mint (het doel);
   Verloren is omlijnd. Tekst op elke pil minstens 7:1 */
.status--afspraak { background: var(--mint-100); color: var(--ink); }
.status--voorstel { background: var(--mint); color: var(--ink); }
.status--klant { background: var(--mint-800); color: var(--wit); }
.status--verloren { box-shadow: inset 0 0 0 1px var(--lijn-knop); color: var(--zacht); }

/* De status als stip met het woord ernaast, zoals in de lijsten van de app. Nooit kleur alleen: het woord staat er altijd bij */
.stip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.stip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.stip--gebeld::before { background: var(--stil); }
.stip--afspraak::before { background: var(--mint-600); }
.stip--voorstel::before { background: var(--mint-700); }
.stip--klant::before { background: var(--mint-800); }

/* De nagebouwde schermen van de app: de opbouw en de woorden van taqqle.app, in de kleuren en de letter van de site.
   In een scherm staan geen koppen, knoppen of links: wat op een knop lijkt, is een alinea. Op naam van ‘Jouw bedrijf’: die naam is het label.
   Het toestel heeft geen onderkant: het staat op een lijn of op de rand van een vlak en is nooit breder dan zijn kolom */
.toestel { display: flex; flex-direction: column; width: min(100%, 340px); padding: 8px 8px 0; border: 1.5px solid var(--tel-ring); border-bottom: 0; border-radius: 42px 42px 0 0; background: var(--zwart); }
/* Het scherm is een blad (.zone-midden): wit met inkt, ook op donker. De grond is het rustige vlak, de kaarten zijn wit */
.scherm { --grond: var(--vlak); display: flex; flex-direction: column; flex: 1; overflow: hidden; border-radius: 33px 33px 0 0; font-size: 14px; line-height: 20px; }
.scherm strong { font-weight: 600; }
.scherm__icoon { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* de balk bovenaan: de naam van het bedrijf klein boven de titel van het scherm */
.scherm__balk { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 64px; padding: 14px 18px 10px 20px; border-bottom: 1px solid var(--lijn); background: var(--wit); }
.scherm__balk--terug { justify-content: flex-start; padding-left: var(--sp-16); }
.scherm__titel { display: flex; flex-direction: column; min-width: 0; }
.scherm__titel strong { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; }
.scherm__bedrijf { color: var(--stil); font-size: 12px; line-height: 16px; font-weight: 600; }
.scherm__inhoud { display: flex; flex-direction: column; flex: 1; gap: 18px; padding: var(--sp-16) var(--sp-16) 28px; }
/* kleine kop boven een groep, in hoofdletters zoals in de app; het tweede woord is de teller */
.scherm__label { display: flex; justify-content: space-between; gap: var(--sp-12); color: var(--stil); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.scherm__groep { display: flex; flex-direction: column; gap: var(--sp-8); }
.scherm__groep > .scherm__label { padding-inline: var(--sp-4); }
/* kaarten: wit met een haarlijn. De kaart met de volgende stap heeft de inktrand en de harde schaduw van de app */
.scherm__kaart { padding: var(--sp-16); border-radius: var(--r-12); background: var(--wit); box-shadow: var(--s-1); }
.scherm__kaart--stap { display: flex; flex-direction: column; gap: 14px; border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.scherm__kaartkop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); }
.scherm__kaartkop strong { font-size: 18px; line-height: 24px; }
.scherm__kaartkop span, .scherm__tijd { color: var(--stil); font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* naam en werk links, de status rechts; het signaal eronder over de volle breedte, zodat het ook op een smal scherm op één regel past */
.scherm__bel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-4) var(--sp-12); }
.scherm__wie { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scherm__wie strong { font-size: 16px; line-height: 22px; }
.scherm__wie span { color: var(--zacht); }
/* Te lang wachten is geen status maar een signaal: de klok met de tijd, in inkt (de app gebruikt hier rood) */
.scherm__urgent { display: flex; align-items: center; grid-column: 1 / -1; gap: var(--sp-4); font-size: 13px; line-height: 18px; font-weight: 600; }
.scherm__urgent .scherm__icoon { width: 14px; height: 14px; stroke-width: 2; }
/* wat in de app een knop is: 44 hoog, inktrand; de eerste actie in mint */
.scherm__knop { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 44px; padding: 6px var(--sp-12); border: 1.5px solid var(--ink); border-radius: var(--r-8); background: var(--wit); font-size: 14px; line-height: 18px; font-weight: 600; text-align: center; }
.scherm__knop--mint { background: var(--mint); }
.scherm__knop .scherm__icoon { width: 18px; height: 18px; stroke-width: 2; }
.scherm__twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.scherm__twee .scherm__knop { padding-inline: 6px; }   /* "Zet op Afspraak" past zo op één regel; past het niet, dan breekt het af zoals in de app */
/* een rij in de lijst met wat loopt: naam en werk links, de dag en de status rechts. Bij vergrote tekst (G10) schuift de status onder de naam */
.scherm__rij { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-8) var(--sp-12); padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16); border-radius: var(--r-12); background: var(--wit); box-shadow: var(--s-1); }
.scherm__rij .scherm__wie { flex: 1 1 8em; }
.scherm__zij { display: flex; flex-direction: column; flex: none; align-items: flex-end; gap: 6px; padding-top: 2px; }
.scherm__pijl { align-self: center; width: 18px; height: 18px; color: var(--stil); stroke-width: 2; }
/* het scherm van één aanvraag: naam met de status, de volgende stap, de rij met statussen en de tijdlijn */
.scherm__kop { display: flex; flex-direction: column; gap: var(--sp-4); color: var(--zacht); }
.scherm__koprij { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); color: var(--ink); }
.scherm__koprij strong { min-width: 0; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
.scherm__stap { display: flex; flex-direction: column; gap: 2px; color: var(--zacht); }
.scherm__stap strong { color: var(--ink); font-size: 18px; line-height: 24px; }
.scherm__statusrij { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.scherm__statusrij .stip { min-height: 40px; padding: 0 var(--sp-12); border-radius: var(--pil); background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn-knop); font-size: 14px; line-height: 20px; }
/* de status van nu: een inktrand van 2, zoals de ingedrukte knop in de app */
.scherm__statusrij [aria-current] { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.scherm__verloren { display: flex; align-items: center; min-height: 36px; padding-inline: var(--sp-4); font-weight: 600; }
.scherm__notitie { display: flex; align-items: flex-start; gap: var(--sp-12); }
.scherm__knoop { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 6px; background: var(--wit); box-shadow: inset 0 0 0 1.5px var(--lijn-knop); color: var(--zacht); }
.scherm__knoop .scherm__icoon { width: 16px; height: 16px; stroke-width: 2; }
.scherm__notitie p { display: flex; flex-direction: column; flex: 1; gap: 6px; min-width: 0; }
.scherm__notitie strong { padding-top: 3px; font-size: 15px; line-height: 22px; }
.scherm__notitie p span { padding: var(--sp-12); border-radius: var(--r-8); background: var(--wit); box-shadow: var(--s-1); }
@media (max-width: 359px) {
  /* Smal: iets minder ruimte in het scherm, zodat de woorden op hun regel blijven */
  .toestel { padding: 6px 6px 0; border-radius: 36px 36px 0 0; }
  .scherm { border-radius: 29px 29px 0 0; }
  .scherm__inhoud { padding-inline: var(--sp-12); }
  .scherm__kaart { padding: 14px; }
  .scherm__rij { padding-left: 14px; }
  .scherm__pijl { display: none; }   /* het pijltje maakt plaats voor het werk en de plaats */
}

/* sec-1-hero: zoals op de homepage. Tekst links, de telefoon rechts, eronder drie feiten op één lijn.
   De telefoon staat op die lijn: tussen het raster en de feiten zit geen ruimte. 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__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. Het slot regelt dat zelf (basis.css) */
#hero .knop { max-width: 100%; padding-block: var(--sp-12); white-space: normal; text-align: center; }
#hero .hero__beeld { display: flex; justify-content: center; align-self: end; }
#hero .hero__feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); 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); }
@media (max-width: 1040px) {
  #hero { padding-top: 40px; }
}
@media (max-width: 760px) {
  #hero { padding-top: var(--sp-32); }
  #hero .hero__raster { row-gap: 40px; }
  #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); }
}

/* sec-2-status: één tik per stap. Omgekeerde tweedeling: links het scherm van één aanvraag op het rustige vlak, rechts de kop, de zin,
   de vijf stappen en de regel over Verloren. De telefoon staat op de onderrand van het vlak; is de tekst ernaast hoger, dan groeit het scherm mee.
   Op de telefoon staat hij zonder vlak op de bovenste lijn van de stappen */
#status { padding-block: var(--sectie); }
#status .lead { margin-top: var(--sp-16); }
#status .status__beeld { display: flex; justify-content: center; padding: var(--sp-48) var(--sp-24) 0; border-radius: var(--r-20); background: var(--vlak); }
/* Elke stap een regel: de pil van de app, daarnaast de zin. De kolom van de pil is in em: bij vergrote tekst groeit hij mee (G10) */
#status .status__stappen li { display: grid; grid-template-columns: minmax(0, 4.8em) minmax(0, 1fr); column-gap: var(--sp-12); align-items: center; padding-block: 14px; border-top: 1px solid var(--haarlijn); }
#status .status__stappen li:last-child { border-bottom: 1px solid var(--haarlijn); }
#status .status__stappen .status { justify-self: start; }
#status .status__stappen li > span:last-child { color: var(--tekst-2); }
#status .status__uit { margin-top: var(--sp-24); }
@media (min-width: 1041px) {
  /* Het vlak met de telefoon is hoger dan de tekst: de kop en de stappen staan er samen midden naast, zoals de tekst in de hero.
     Twee lege rijen boven en onder vangen de rest van de hoogte op */
  #status .delen { grid-template-rows: 1fr auto auto 1fr; }
  #status .delen > .delen__kop { grid-row: 2; }
  #status .delen > .delen__na { grid-row: 3; }
  #status .delen > .delen__inhoud { grid-row: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 1040px) {
  /* tablet: de kop boven, daaronder het scherm links en de stappen rechts ernaast. Zo staat de telefoon niet alleen in een breed vlak */
  #status .delen > .delen__inhoud { grid-column: 1 / span 6; }
  #status .delen > .delen__na { grid-column: 7 / -1; align-self: center; margin-top: var(--kop-ruimte); }
  #status .status__beeld { padding: var(--sp-32) var(--sp-16) 0; }
}
@media (max-width: 760px) {
  /* telefoon: geen vlak om het scherm. De telefoon is zo breed als in de hero en staat op de bovenste lijn van de stappen */
  #status .status__beeld { padding: 0; border-radius: 0; background: none; }
  #status .delen__na { margin-top: 0; }
}

/* sec-3-cijfers: je ziet wat het oplevert. Op inkt, in de vorm van "Zo komt een aanvraag bij je binnen" op de homepage:
   vier cijfers onder één dunne lijn, het cijfer in mint. Geen verloop (Willem, 11 november 2026). Eén label Rekenvoorbeeld boven de lijn.
   In de html staat het woord vóór het cijfer; op het scherm staat het cijfer erboven */
#cijfers { padding-block: clamp(80px, calc(9.2308vw + 9.85px), 128px); }
#cijfers h2 { max-width: 14em; }
#cijfers .lead { max-width: 32em; margin-top: var(--sp-16); }
#cijfers .cijfers__beeld { margin-top: max(var(--sp-32), calc(var(--kop-ruimte) - var(--sp-32))); }   /* het label staat boven de lijn: samen met de lijn is dit de ruimte onder de kop */
#cijfers .cijfers__vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--goot); margin-top: var(--sp-16); border-top: 1px solid var(--haarlijn); }
#cijfers .cijfers__vier div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: 22px; }
#cijfers .cijfers__vier dd { color: var(--mint); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#cijfers .cijfers__vier dt { margin-top: var(--sp-4); font-size: 19px; line-height: 27px; }
/* Eronder, zoals de zin en de melding op de homepage: links de vraag, rechts per campagne het aantal */
#cijfers .cijfers__onder { align-items: start; row-gap: var(--sp-16); margin-top: var(--sp-64); }
#cijfers .cijfers__vraag { padding-top: 15px; color: var(--tekst-2); font-size: 19px; line-height: 27px; }   /* op de regel van de eerste campagne */
#cijfers .cijfers__campagnes div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-16); padding-block: 14px; border-top: 1px solid var(--haarlijn); font-size: 19px; line-height: 27px; }
#cijfers .cijfers__campagnes div:last-child { border-bottom: 1px solid var(--haarlijn); }
#cijfers .cijfers__campagnes dt { min-width: 0; }
#cijfers .cijfers__campagnes dd { color: var(--mint); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  /* telefoon: twee aan twee, met een lijn tussen de twee rijen */
  #cijfers .cijfers__vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cijfers .cijfers__vier div { padding-block: 18px; }
  #cijfers .cijfers__vier div:nth-child(n+3) { border-top: 1px solid var(--haarlijn); }
  #cijfers .cijfers__onder { row-gap: var(--sp-12); margin-top: var(--sp-32); }
  #cijfers .cijfers__vraag { padding-top: 0; }
}

/* sec-4-ook: ook in de app. Gewone tweedeling: de kop links, zes regels rechts met het getekende vinkje, twee aan twee.
   Elke regel is een hele zin; de regels breken gelijkmatig af */
#ook { padding-block: var(--sectie); }
#ook .ook__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--goot); font-size: 20px; line-height: 30px; }
#ook .ook__lijst li { padding-left: 34px; text-wrap: balance; }
#ook .ook__lijst li::before { left: 2px; }
@media (max-width: 760px) {
  #ook .ook__lijst { grid-template-columns: minmax(0, 1fr); gap: 20px; font-size: 19px; line-height: 28px; }
}

/* sec-5-vragen: zoals op de homepage. 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. In het blad staat ook de weg naar taqqle.app */
#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 .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 zones worden wit, dus de cijfers in inkt in plaats van mint (mint op wit haalt 1,7:1). De schermen en de pillen houden hun
   achtergrond (basis.css drukt achtergronden af); een scherm breekt niet over twee bladen */
@media print {
  #cijfers .cijfers__vier dd, #cijfers .cijfers__campagnes dd { color: var(--zwart); }
  .toestel { break-inside: avoid; }
}