/* DataGrip · voor IT-partners
   De pagina achter de QR-code op de partnerflyer, het zusje van mkb.html. De lezer is een IT-dienstverlener
   die bij een klant een datavraag ziet, de flyer net gelezen heeft en een telefoon vasthoudt.
   Van boven naar beneden:
   1. het eerste scherm: waar je vandaan komt, de kop en een knop
   2. "Wanneer haal je ons erbij?": de zes momenten van de flyer als keuze, met de tabel van de flyer
      waarin oplicht wat er bij dat moment speelt, en wat de klant ervan merkt
   3. "Wat je klant te zien krijgt": het venster met vier voorbeelddashboards (venster.css)
   4. op het lichte vlak vier praktische vragen
   5. het slot: wat een kennismaking is, contact op de pagina zelf, mail en WhatsApp, en doorsturen
      naar een collega
   De vier haltes van mkb.html ("Wat er gebeurt als je contact opneemt") staan hier niet: de pagina heeft al
   een onderdeel meer (de dashboards) en moet kort blijven. De stijl ervan zit wel in het blok GEDEELD.
   Wat ze deelt met de MKB-pagina staat in het blok GEDEELD en draagt het voorvoegsel qr-.
   Wat alleen hier staat, draagt het voorvoegsel partner-. */

/* ===== GEDEELD:begin =====
   Wat de twee pagina's achter de QR-codes (mkb.html en partners.html) gemeen hebben. Dit blok staat
   letterlijk gelijk in p-mkb.css en p-partners.css: wie hier iets wijzigt, wijzigt het in beide bestanden.
   1. het eerste scherm: de standaard .pagina-kop met .h1 en .lede uit pagina.css, zonder eigen maten,
      met op de plek van het kruimelpad de regel "Flyer gescand?" en vanaf 960 pixels een beeld ernaast
   2. de sectie met de keuze: de kop erboven en de regel met de knop eronder
   3. de haltes: wat er gebeurt na het eerste contact, staand of (vanaf 860 pixels) liggend
   4. de vragen op het lichte vlak: de uitklappers van de huisstijl
   5. het slot: het formulier van de homepage en de knop om de pagina door te sturen
   De korte kop van deze twee pagina's (.kop--kort: alleen het logo en de knop) staat in basis.css. */

/* --- 1 · Het eerste scherm --- */
.qr-herkomst { display: flex; align-items: flex-start; gap: 10px; margin-bottom: clamp(16px, 2vw, 24px); font-size: .9375rem; line-height: 1.4; color: var(--text); }
.qr-herkomst strong { color: var(--bright); }
.qr-herkomst-ico { flex: none; width: 18px; height: 18px; margin-top: 1.5px; color: var(--teal); }
.qr-kop-beeld { display: none; }
@media (max-width: 479px) {
  /* een volle knop: met de duim te raken */
  .qr-kop .acties .btn, .qr-na .acties .btn { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  .qr-herkomst { gap: 12px; font-size: 1.0625rem; }
  .qr-herkomst-ico { width: 20px; height: 20px; margin-top: 2px; }
}
@media (max-width: 339px) {
  /* de smalste telefoon: iets minder lucht in de kop, zodat de knop boven de cookiemelding blijft */
  .qr-kop { padding-top: 22px; }
  .qr-herkomst { margin-bottom: 12px; }
  .qr-kop .lede { margin-top: 12px; }
  .qr-kop .acties { margin-top: 16px; }
}
@media (min-width: 960px) {
  /* de tekstkolom houdt de standaardmaten, het beeld staat ernaast op de onderlijn van de knop */
  .qr-kop-rij { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); column-gap: clamp(40px, 5.6vw, 96px); align-items: end; }
  .qr-kop-beeld { display: block; }
  .qr-kop-beeld .vn-cijfer-getal { font-size: clamp(3rem, 1.2rem + 3.6vw, 4.4rem); }
}

/* --- 2 · De sectie met de keuze --- */
/* de sectie sluit aan op het eerste scherm: op een telefoon staan de eerste keuzes meteen in beeld */
.qr-keuze { padding-top: clamp(4px, 1.4vw, 20px); }
.qr-sectie-kop { display: grid; gap: 10px; margin-bottom: clamp(18px, 2.6vw, 32px); }
.qr-sectie-kop p { max-width: 34em; }
@media (min-width: 960px) {
  /* de kop en de regel erbij op een lijn: de keuzes staan zo hoger in het eerste scherm */
  .qr-keuze { padding-top: 0; }
  .qr-sectie-kop { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: baseline; }
  .qr-sectie-kop p { justify-self: end; max-width: 27em; text-align: right; text-wrap: balance; }
}
/* R8:A12 de zin bij een sectiekop staat op alle breedtes links onder de kop: 12 pixels eronder, 17 pixels,
   var(--text), hooguit 38em, zoals "Dit zie je ervan" op de homepage. Vanaf 960 pixels stond hij rechts naast
   de kop, rechts uitgelijnd. Terugdraaien: dit blok weghalen. */
.qr-sectie-kop { gap: 12px; }
.qr-sectie-kop p { max-width: 38em; font-size: 1.0625rem; color: var(--text); }
@media (min-width: 960px) {
  .qr-sectie-kop { grid-template-columns: minmax(0, 1fr); }
  .qr-sectie-kop p { justify-self: start; text-align: left; text-wrap: pretty; }
}

/* de eerlijke regel en de knop onder het toneel */
.qr-na { margin-top: var(--blok-gat); padding-top: clamp(16px, 2.2vw, 22px); border-top: 1px solid var(--line-mid); }
/* staat de regel "Volgende" erboven, dan sluit dit blok daar met zijn lijn op aan */
.vn:has(.vn-verder:not([hidden])) + .qr-na { margin-top: 0; }
.qr-na p { max-width: 40em; }
.qr-na strong { color: var(--bright); }
.qr-na .acties { margin-top: clamp(14px, 2vw, 18px); }
@media (min-width: 860px) {
  .qr-na { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; }
  .qr-na .acties { flex: none; flex-direction: row-reverse; margin-top: 0; }
}

/* --- 3 · De haltes ---
   Een rechte teal lijn met genummerde haltes, het motief van de rechte lijn op de homepage. De laatste
   halte is gevuld en de lijn loopt door in een pijlpunt: wat daar begint, houdt niet op.
   --qr-vlak is de kleur van het vlak onder de lijn: daarmee zijn de open cirkels gevuld. */
.qr-stappen { --stip: 26px; --qr-vlak: var(--bg-raised); counter-reset: qr-stap; position: relative; display: grid; gap: 20px; padding: 0 0 30px calc(var(--stip) + 16px); }
.qr-stappen::before { content: ''; position: absolute; left: calc(var(--stip) / 2 - 1.5px); top: 8px; bottom: 12px; width: 3px; background: var(--teal); }
.qr-stappen::after { content: ''; position: absolute; left: calc(var(--stip) / 2 - 8px); bottom: 2px; border-style: solid; border-width: 11px 8px 0; border-color: var(--teal) transparent transparent; }
.qr-stap { counter-increment: qr-stap; position: relative; }
.qr-stap::before {
  content: counter(qr-stap); position: absolute; left: calc(-1 * (var(--stip) + 16px)); top: -1px; z-index: 1;
  display: grid; place-items: center; width: var(--stip); height: var(--stip); border-radius: 50%;
  background: var(--qr-vlak); border: 1.5px solid var(--teal);
  font-size: .8125rem; font-weight: 700; line-height: 1; color: var(--bright); font-variant-numeric: tabular-nums;
}
.qr-stap--blijft::before { background: var(--teal); color: #001620; }
.qr-stap h3 { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); font-weight: 650; letter-spacing: -0.018em; line-height: 1.28; color: var(--bright); text-wrap: balance; }
.qr-stap p { margin-top: 3px; max-width: 32em; font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.qr-stap p strong { color: var(--bright); }
@media (min-width: 860px) {
  .qr-stap p { font-size: 1rem; }
  /* liggend: vier haltes naast elkaar op een lijn die naar rechts doorloopt */
  .qr-stappen--liggend { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); padding: 0; }
  .qr-stappen--liggend::before { left: 8px; right: 12px; top: calc(var(--stip) / 2 - 1.5px); bottom: auto; width: auto; height: 3px; }
  .qr-stappen--liggend::after { left: auto; right: 0; bottom: auto; top: calc(var(--stip) / 2 - 8px); border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--teal); }
  .qr-stappen--liggend .qr-stap { padding-top: calc(var(--stip) + 16px); }
  .qr-stappen--liggend .qr-stap::before { left: 0; top: 0; }
}
@media (forced-colors: active) {
  .qr-stappen::before { forced-color-adjust: none; background: CanvasText; }
  .qr-stappen::after { forced-color-adjust: none; border-color: CanvasText transparent transparent; }
  .qr-stap--blijft::before { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}
@media (forced-colors: active) and (min-width: 860px) {
  .qr-stappen--liggend::after { border-color: transparent transparent transparent CanvasText; }
}

/* --- 4 · De vragen, op het lichte vlak ---
   De kop is de gewone .h2, de vragen zijn de uitklappers van de huisstijl (basis.css en basis.js):
   op een telefoon beginnen ze dicht, zonder script staan ze open. */
.qr-vragen-rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); }
.qr-vragen-kop { container-type: inline-size; }
.qr-vragen-kop .h2 { font-size: min(clamp(1.8rem, 1.1rem + 2.7vw, 3.2rem), 11cqi); }
/* R8:A01 de kop bij de vragen doet op de telefoon mee met de maatschaal van basis.css (sectiekop 24,2 op 390);
   daarboven houdt hij zijn eigen maat. Terugdraaien: dit blok weghalen. */
@media (max-width: 759px) {
  .qr-vragen-kop .h2 { font-size: clamp(1.45rem, 6.2vw, 2rem); }
}
.qr-vragen-kop p { margin-top: 14px; max-width: 26em; }
/* de link in de zin: een raakvlak van 44 pixels hoog, zonder dat de regel verspringt */
.qr-vragen-kop .link { display: inline-block; padding-block: 12px; margin-block: -12px; }
.qr-vragen-lijst .uitklap-in strong { color: var(--bright); }
@media (min-width: 960px) {
  .qr-vragen-rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--kolom-gat); align-items: start; }
  .qr-vragen-kop { position: sticky; top: calc(var(--kop-h) + 40px); }
}

/* --- 5 · Het slot: contact op de pagina zelf ---
   Het formulier, de foutmeldingen en "Liever direct?" komen uit de huisstijl (basis.css). Eigen aan
   deze pagina's: de regel onder het bericht als de keuze is meegenomen, en het blok om door te sturen. */
.qr-contact .slot { margin-bottom: clamp(20px, 3.4vw, 44px); }
.qr-mee { margin-top: 8px; font-size: .875rem; line-height: 1.4; color: var(--text); }
.qr-deel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-mid); }
.qr-deel-vraag { font-size: .9375rem; line-height: 1.4; color: var(--text); }
.qr-deel-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 10px; }
.qr-deel-knop { min-height: 48px; padding-inline: 18px; font-size: .9375rem; }
.qr-deel-mail { padding-block: 12px; font-weight: 600; }
.qr-deel-status { margin-top: 6px; min-height: 1.4em; font-size: .875rem; line-height: 1.4; color: var(--text); }
.qr-deel-status:empty { min-height: 0; margin-top: 0; }

/* R8:A14 op een telefoon is elke primaire knop over de volle breedte, ook "Verstuur" (de knoppen in het
   eerste scherm en onder het toneel waren dat al, zie hierboven) */
@media (max-width: 479px) {
  .qr-contact .verstuur-rij .btn-primair { flex: 1 1 100%; }
}

/* R8:B11 het verzonden-moment: de melding schuift zacht omhoog en de twee teal lijnen tekenen zich van links,
   in de taal van de uitkomst van HashMatch. Foutmeldingen bij lege velden blijven direct. De lijnen waren
   een border-block (basis.css) en zijn hier twee pseudo-elementen. */
.qr-contact .melding { position: relative; border-block: 0; }
.qr-contact .melding::before, .qr-contact .melding::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--line-teal); transform-origin: 0 50%; }
.qr-contact .melding::before { top: 0; }
.qr-contact .melding::after { bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .qr-contact .melding:not([hidden]) { animation: qr-melding-in 320ms cubic-bezier(.23, 1, .32, 1) both; }
  .qr-contact .melding:not([hidden])::before, .qr-contact .melding:not([hidden])::after { animation: qr-lijn-in 450ms cubic-bezier(.23, 1, .32, 1) 80ms both; }
}
@keyframes qr-melding-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes qr-lijn-in { from { transform: scaleX(0); } to { transform: none; } }
@media (forced-colors: active) {
  .qr-contact .melding::before, .qr-contact .melding::after { forced-color-adjust: none; background: CanvasText; }
}

/* R8:B15 koos de bezoeker iets en tikte hij op de knop eronder, dan licht het berichtveld even teal op zodra de
   pagina bij het formulier is (p-mkb.js en p-partners.js zetten .is-gevuld). Alleen kleur, dus ook bij minder
   beweging. Zonder "both": na afloop gelden de gewone randen weer, ook die van focus en van een fout. */
.qr-contact .veld textarea.is-gevuld { animation: qr-gevuld 1400ms ease-out; }
@keyframes qr-gevuld { 0%, 35% { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); } 100% { border-color: var(--line-strong); box-shadow: none; } }
/* ===== GEDEELD:eind ===== */

/* ===== Alleen deze pagina ===== */

/* ----- 2 · Het toneel: het signaal, de tabel en wat de klant ervan merkt -----
   Smal: onder elkaar, in die volgorde. Vanaf 960 pixels: links het signaal (met bij de drie momenten uit
   de rapportage het grijze Excel-blad) en onderaan wat de klant merkt, rechts de tabel over de volle hoogte. */
.partner-signaal { max-width: 27em; font-size: clamp(1.15rem, 1.02rem + .62vw, 1.5rem); font-weight: 600; letter-spacing: -0.018em; line-height: 1.3; text-wrap: pretty; hyphens: manual; }
.partner-blad { max-width: 400px; }
@media (min-width: 960px) {
  .partner-paneel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: var(--kolom-gat); row-gap: 20px; }
  .partner-paneel > .vn-situatie { grid-column: 1 / -1; }
  .partner-paneel > .vn-uitleg { grid-column: 1; grid-row: 1; }
  .partner-paneel > .partner-blad { grid-column: 1; grid-row: 2; }
  .partner-paneel > .partner-klant { grid-column: 1; grid-row: 3; align-self: end; }
  .partner-paneel > .partner-verdeling { grid-column: 2; grid-row: 1 / 4; }
  /* zonder script staat de kop van het paneel op de eerste rij: alles schuift een rij op */
  html:not(.js) .partner-paneel, .vn-plat .partner-paneel { grid-template-rows: auto auto auto 1fr; }
  html:not(.js) .partner-paneel > .vn-uitleg, .vn-plat .partner-paneel > .vn-uitleg { grid-row: 2; }
  html:not(.js) .partner-paneel > .partner-blad, .vn-plat .partner-paneel > .partner-blad { grid-row: 3; }
  html:not(.js) .partner-paneel > .partner-klant, .vn-plat .partner-paneel > .partner-klant { grid-row: 4; }
  html:not(.js) .partner-paneel > .partner-verdeling, .vn-plat .partner-paneel > .partner-verdeling { grid-row: 2 / 5; }
}
/* R8:A08 de linkerkolom van boven naar beneden, met 40 pixels ertussen: "Wat je klant ervan merkt" staat direct
   onder het signaal (of onder het blad), niet meer onderaan uitgelijnd met de tabel. Zonder blad schuift het een
   rij op, zodat er geen dubbele ruimte ontstaat. Terugdraaien: dit blok weghalen. */
@media (min-width: 960px) {
  .partner-paneel { row-gap: 40px; }
  .partner-paneel > .partner-klant { align-self: start; }
  .partner-paneel:not(:has(> .partner-blad)) > .partner-klant { grid-row: 2; }
  html:not(.js) .partner-paneel:not(:has(> .partner-blad)) > .partner-klant, .vn-plat .partner-paneel:not(:has(> .partner-blad)) > .partner-klant { grid-row: 3; }
}

/* de tabel "Zo vullen we elkaar aan": de acht taken van de flyer in twee kolommen, in elke rij precies
   één stip. De rollen overlappen niet. Per moment lichten een paar rijen op: een band in de kleur van
   het verhoogde vlak, een teal streep, vette letters en een ring om de stip. */
.partner-verdeling { min-width: 0; }
.partner-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9375rem; line-height: 1.35; }
.partner-matrix caption { padding: 0 12px 12px; text-align: left; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
.partner-col-wie { width: clamp(62px, 18vw, 104px); }
.partner-matrix thead th { padding: 0 2px 10px; text-align: center; vertical-align: bottom; font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.partner-wie { display: block; font-size: .9375rem; font-weight: 650; color: var(--bright); }
.partner-matrix tbody th { padding: 8px 10px 9px 12px; text-align: left; font-weight: 500; color: var(--text); hyphens: manual; }
.partner-matrix tbody td { padding: 0; text-align: center; vertical-align: middle; border-left: 1px solid var(--line-mid); }
.partner-matrix tbody tr { border-top: 1px solid var(--line-mid); }
.partner-matrix tbody:last-child tr:last-child { border-bottom: 1px solid var(--line-mid); }
/* de grens tussen de twee rollen */
.partner-matrix-dg tr:first-child { border-top: 1.5px solid var(--line-strong); }
.partner-stip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--bright); color: var(--bright); vertical-align: middle; }
.partner-stip--dg { background: var(--teal); color: var(--teal); }
.partner-matrix tr.is-aan { background: var(--bg-raised); }
.partner-matrix tr.is-aan th { font-weight: 650; color: var(--bright); box-shadow: inset 3px 0 0 var(--teal); }
.partner-matrix tr.is-aan .partner-stip { box-shadow: 0 0 0 3px var(--bg-raised), 0 0 0 4.5px currentColor; }
.partner-legenda { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding-left: 12px; font-size: .8125rem; line-height: 1.3; color: var(--muted); }
.partner-legenda i { flex: none; width: 16px; height: 11px; background: var(--bg-raised); box-shadow: inset 3px 0 0 var(--teal); }
@media (min-width: 480px) {
  /* het zachte afbreekstreepje in de laatste taak is alleen voor de smalste telefoon */
  .partner-matrix tbody th { padding-block: 11px 12px; hyphens: none; }
}
@media (min-width: 960px) {
  .partner-matrix { font-size: 1rem; }
  .partner-col-wie { width: 104px; }
  .partner-matrix tbody th { padding-block: 13px 14px; }
}
/* R8:D10 telefoon tot 519 pixels: de kolommen Jij en Wij 52 breed, in de kop alleen "Jij" en "Wij" ("IT-partner"
   en "DataGrip" staan in de inleiding; met font-size 0 blijven ze voor een schermlezer de kolomnaam), de cellen
   lager. De taken passen dan op een regel, behalve de laatste. Terugdraaien: dit blok weghalen. */
@media (max-width: 519px) {
  .partner-col-wie { width: 52px; }
  .partner-matrix thead th { font-size: 0; }
  .partner-matrix thead th .partner-wie { font-size: .9375rem; }
  .partner-matrix tbody th { padding-block: 9px; font-size: .9375rem; }
}
@media (prefers-reduced-motion: no-preference) {
  /* de opgelichte rijen komen een voor een op zodra het paneel verschijnt */
  .js .partner-matrix tr.is-aan { animation: partner-licht .4s ease-out both; }
  .js .partner-matrix tr.is-aan ~ tr.is-aan, .js .partner-matrix-dg tr.is-aan { animation-delay: .12s; }
  .js .partner-matrix-dg tr.is-aan ~ tr.is-aan { animation-delay: .22s; }
}
@keyframes partner-licht { from { opacity: .35; } to { opacity: 1; } }
@media (forced-colors: active) {
  .partner-stip { forced-color-adjust: none; border: 1px solid CanvasText; }
  .partner-matrix tr.is-aan th { box-shadow: inset 4px 0 0 Highlight; }
  .partner-legenda i { forced-color-adjust: none; border: 1px solid CanvasText; }
}

/* wat de klant ervan merkt: tussen twee teal lijnen, zoals het ene cijfer */
.partner-klant { padding-block: 12px 16px; border-block: 1.5px solid var(--line-teal); }
.partner-klant-label { font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
.partner-klant-kop { margin-top: 8px; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); font-weight: 750; letter-spacing: -0.028em; line-height: 1.15; color: var(--bright); text-wrap: balance; }
.partner-klant-zin { margin-top: 6px; max-width: 30em; font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.partner-klant-link { margin-top: 2px; }
.partner-klant-link .link { display: inline-block; padding-block: 11px; font-weight: 600; }

/* ----- 3 · Wat je klant te zien krijgt ----- */
.partner-na { margin-top: var(--blok-gat); padding-top: clamp(16px, 2.2vw, 22px); border-top: 1px solid var(--line-mid); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.partner-krijgt-noot { max-width: 34em; }
.partner-krijgt-noot strong { color: var(--bright); }

@media (min-width: 960px) {
  .partner-na { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--kolom-gat); align-items: start; padding-top: 28px; }
}