/* DataGrip · veelgestelde vragen
   De pagina is een instrument: een zoekband tussen twee teal lijnen (het motief van het ene cijfer
   op de homepage), links de onderwerpen als een route met haltes, rechts de vragen.
   De uitklappers zelf komen uit style.css (.uitklap, .plusje, .uitklap-in) en zijn dezelfde als
   onder "Wat ondernemers ons vooraf vragen". Alles hier draagt het voorvoegsel faq-. */

:root { --faq-band: 79px; }   /* hoogte van de zoekband zodra hij vastzit (vanaf 1000 pixels) */

/* de eigen pagina in het menu */
.menu a[aria-current="page"] { color: var(--bright); }
@media (min-width: 960px) { .menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--teal); } }
@media (max-width: 959px) { .js .menu a[aria-current="page"] { color: var(--teal); } }

/* ===== Paginakop =====
   De gewone paginakop uit pagina.css: de maten van de h1, de lede en de lucht eromheen komen daarvandaan. */

html:not(.faq-aan) .faq-kop { border-bottom: 1px solid var(--line); }
@media (min-width: 1280px) {
  /* de kop links, de toelichting rechts op de onderste regel: geen leeg vlak naast de kop.
     Pas vanaf de breedte waarop de kop naast de toelichting op twee regels past; daaronder staat
     de toelichting gewoon onder de kop, zoals op de andere pagina's. */
  .faq-kop-rij { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
  .faq-kop-rij .lede { margin-top: 0; padding-bottom: .3em; }
}

/* ===== De zoekband ===== */
.faq-zoekband { display: none; background: var(--bg); border-block: 1.5px solid var(--line-teal); }
.faq-aan .faq-zoekband { display: block; }
.faq-zoek-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding-block: 16px 12px; }
.faq-zoek-label { grid-column: 1 / -1; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--bright); }
.faq-zoek-invoer { grid-column: 1 / -1; position: relative; }
.faq-zoek-invoer svg { position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.faq-zoek-invoer input {
  display: block; width: 100%; height: 52px; padding: 0 70px 0 46px;
  background: var(--bg-raised); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; color: var(--bright); -webkit-appearance: none; appearance: none;
}
.faq-zoek-invoer input::placeholder { color: var(--muted); opacity: 1; }
/* is het veld leeg, dan staat de knop Wis er niet en mag het voorbeeld de hele breedte gebruiken (op 320 pixels past het anders niet) */
.faq-zoek-invoer input:placeholder-shown { padding-right: 14px; }
.faq-zoek-invoer input::-webkit-search-cancel-button, .faq-zoek-invoer input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* R8:B02 hover alleen bij een muis */ @media (hover: hover) and (pointer: fine) { .faq-zoek-invoer input:hover { border-color: var(--muted); } }
.faq-zoek-invoer input:focus-visible { border-color: var(--teal); outline: 2px solid var(--bright); outline-offset: 2px; }
.faq-wis { position: absolute; right: 4px; top: 4px; height: 44px; padding: 0 12px; background: none; border: 0; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--bright); cursor: pointer; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .faq-wis:hover { color: var(--teal); } }

.faq-probeer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin-left: -5px; font-size: .9375rem; line-height: 1.3; color: var(--muted); }
.faq-probeer span { margin: 0 3px 0 5px; }
/* op het smalste scherm passen de vier voorbeelden alleen op één regel zonder het woord ervoor */
@media (max-width: 359px) { .faq-probeer span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.faq-probeer button, .faq-alles { min-height: 44px; padding: 0 5px; background: none; border: 0; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--bright); cursor: pointer; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .faq-probeer button:hover, .faq-alles:hover { color: var(--teal); } }
/* zonder treffers valt er niets uit te klappen: de knop staat uit en ziet er ook zo uit */
.faq-alles:disabled, .faq-alles:disabled:hover { color: var(--muted); text-decoration-color: var(--line-mid); cursor: default; }

.faq-teller { font-size: .9375rem; line-height: 1.3; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.faq-teller strong { font-weight: 700; color: var(--bright); }
.faq-alles { padding-right: 0; white-space: nowrap; }

@media (min-width: 1000px) {
  /* de band zit vast onder de kop, zodat het zoekveld overal in de lijst bij de hand is */
  .faq-aan .faq-zoekband { position: sticky; top: var(--kop-h); z-index: 30; }
  .faq-zoek-rij { grid-template-columns: auto minmax(260px, 400px) minmax(0, 1fr) auto auto; gap: 0 20px; height: calc(var(--faq-band) - 3px); padding-block: 0; }
  .faq-zoek-label, .faq-zoek-invoer, .faq-probeer { grid-column: auto; }
  .faq-zoek-invoer input { height: 48px; }
  .faq-wis { top: 2px; }
  .faq-probeer { display: none; flex-wrap: nowrap; gap: 0 6px; margin-left: 0; white-space: nowrap; }
  .faq-teller { grid-column: 4; justify-self: end; }
  .faq-alles { grid-column: 5; }
}
@media (min-width: 1240px) { .faq-probeer { display: flex; } }

/* ===== Indeling: onderwerpen en vragen ===== */
.faq-indeling { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sec); }
html:not(.faq-aan) .faq-indeling { padding-top: clamp(24px, 4vw, 44px); }

/* smal: een rij die je kunt schuiven en die onder de kop blijft staan */
.faq-nav { position: sticky; top: var(--kop-h); z-index: 20; margin-inline: calc(-1 * var(--marge)); background: var(--bg); border-bottom: 1px solid var(--line-mid); }
.faq-nav-kop { display: none; }
.faq-nav ol { position: relative; display: flex; gap: 6px; padding: 9px var(--marge); overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--marge); scrollbar-width: none; }
.faq-nav ol::-webkit-scrollbar { display: none; }
.faq-nav li { flex: none; }
.faq-nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 11px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: .875rem; font-weight: 600; line-height: 1.2; color: var(--bright); text-decoration: none; white-space: nowrap; }
.faq-nav-aantal { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Elk onderwerp heeft één naam: dezelfde als de kop boven de vragen. In de rij op een smal scherm staan
   van een lange naam alleen de eerste of de laatste woorden ("Wat het kost"), zodat er drie onderwerpen
   in beeld passen. Een schermlezer leest de hele naam. */
.faq-nav-kort { display: none; }
@media (max-width: 999px) {
  .faq-nav-lang { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .faq-nav-kort { display: inline; }
}
/* op een telefoon staat het aantal vragen alleen in de rij tijdens het zoeken: dan zegt het waar de treffers zitten */
@media (max-width: 599px) {
  html:not(.faq-zoekt) .faq-nav-aantal { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.faq-nav a[aria-current="true"] { border-color: var(--teal); box-shadow: inset 0 -3px 0 var(--teal); }
.faq-nav a[aria-disabled="true"] { border-color: var(--line-mid); color: var(--muted); cursor: default; }

.faq-lijst { min-width: 0; padding-top: clamp(28px, 5vw, 44px); }
/* de sprong naar een onderwerp of een vraag: vrij onder de kop (var(--anker), zie basis.css) en onder de rij onderwerpen (62) */
.faq-groep { scroll-margin-top: calc(var(--anker) + 62px); }
/* ruimte alleen tussen groepen die er staan: bij filteren begint de eerste zichtbare groep bovenaan */
.faq-groep:not([hidden]) ~ .faq-groep:not([hidden]) { margin-top: clamp(44px, 6.4vw, 88px); }
.faq-groep-kop { display: grid; gap: 6px; padding-bottom: clamp(14px, 1.8vw, 22px); }
/* de naam van een onderwerp is een tussenkop van de derde trede: 32 pixels op 1440 (zie pagina.css) */
.faq-groep-titel { font-size: var(--kop-3); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--bright); text-wrap: balance; }
.faq-groep-meta { font-size: .9375rem; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 1280px) {
  /* de titel links, de naam van het onderwerp en het aantal rechts op dezelfde grondlijn.
     Past dat niet naast elkaar (een lange titel, of de langere telregel tijdens het zoeken),
     dan valt de regel onder de titel in plaats van de titel in stukken te breken. */
  .faq-groep-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
}

/* de vragen: de uitklappers van de homepage, met de onderlijn op de groep zodat hij bij filteren blijft kloppen */
.faq-vragen { border-bottom: 1px solid var(--line-mid); }
.faq-vraag.uitklap:last-child { border-bottom: 0; }
.faq-vraag, .faq-vraag button { scroll-margin-top: calc(var(--anker) + 62px); }   /* focus verdwijnt niet achter de rij onderwerpen */
/* de rij (smal) en de zijkolom (breed) zitten zelf vast: krijgt een onderwerp de focus, dan hoeft de pagina niet te schuiven */
.faq-nav a { scroll-margin-top: 0; }
/* R8:B02 hover alleen bij een muis: op een telefoon bleef een geopende vraag teal */
@media (hover: hover) and (pointer: fine) { 
  .faq-vraag button:hover { color: var(--teal); }
  .faq-vraag button:hover .plusje::before, .faq-vraag button:hover .plusje::after { background: var(--bright); }
}
.faq-vraag .uitklap-in { padding-right: clamp(0px, 6vw, 44px); line-height: 1.6; }
.faq-vraag .uitklap-in > * + * { margin-top: .8em; }
.faq-vraag .uitklap-in ul { display: grid; gap: .35em; padding-left: 1.4em; }
.faq-vraag .uitklap-in li { position: relative; }
.faq-vraag .uitklap-in li::before { content: ''; position: absolute; left: -1.15em; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
/* het zoekwoord staat alleen in het antwoord: de zin eromheen onder de dichte vraag */
.faq-fragment { margin: -6px 44px 18px 0; max-width: 40em; font-size: .9375rem; line-height: 1.5; color: var(--text); }
.faq-vraag:has(> h3 > button[aria-expanded="true"]) > .faq-fragment { display: none; }
.faq-lijst mark { margin: 0 -2px; padding: 0 2px; border-radius: 2px; background: #0f4a4c; color: #f0ede6; }

/* het baken aan het eind van de lijst: daaraan ziet het script dat je bij het laatste onderwerp bent */
.faq-einde { height: 1px; margin-top: -1px; pointer-events: none; }

/* smal, tijdens het zoeken: de voorbeelden maken plaats en de lijst schuift op, zodat de eerste treffer
   ook met een toetsenbord in beeld past */
@media (max-width: 999px) {
  .faq-zoekt .faq-probeer { display: none; }
  .faq-zoekt .faq-lijst { padding-top: 18px; }
  .faq-zoekt .faq-groep-kop { gap: 2px; padding-bottom: 8px; }
}

/* zonder script staan alle antwoorden open en is het plusje geen belofte */
html:not(.js) .faq-vraag .plusje { display: none; }
html:not(.js) .faq-vraag button { cursor: default; }
html:not(.js) .faq-vraag button:hover { color: var(--bright); }

/* niets gevonden: het grijze Excel-blad, hier als een zoekfunctie zonder uitkomst */
.faq-leeg { display: grid; gap: 24px; padding-block: clamp(8px, 2vw, 24px) clamp(24px, 4vw, 48px); }
.faq-leeg-tekst p { margin-top: 8px; max-width: 30em; }
.faq-leeg .acties { margin-top: 22px; }
.faq-leeg .acties .link, .faq-meer .acties .link { display: inline-block; padding-block: 10px; font-weight: 600; text-underline-offset: 5px; }
.faq-leeg .h3 { overflow-wrap: anywhere; }
.faq-leeg-tekst { order: -1; }
.faq-blad { width: 100%; max-width: 380px; background: #c3c8c5; color: #35414a; font: 400 12px/1.25 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em; }
.faq-blad-balk { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #abb1ae; color: #27323a; white-space: nowrap; }
.faq-blad-rooster { display: grid; grid-template-columns: 24px minmax(0, 1fr) 72px; }
.faq-blad-rooster > span { padding: 7px 8px; border-top: 1px solid #a4aaa7; border-left: 1px solid #a4aaa7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faq-blad-rooster > span:nth-child(3n + 1) { border-left: 0; }
.faq-blad-rooster .hk { padding-inline: 0; background: #b5bab7; color: #313c43; text-align: center; }
.faq-blad-rooster .g { text-align: right; }
.faq-blad-rooster .is-fout { background: #b5bab7; color: #222d35; font-weight: 600; }
@media (min-width: 760px) {
  .faq-leeg { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
  .faq-leeg-tekst { order: 0; }
}

@media (min-width: 1000px) {
  /* breed: links de onderwerpen als een route met haltes, rechts de vragen */
  /* Het raster van elke pagina met een zijkolom (pagina.css): 320 en 48 vanaf 1280 breed, de vragen
     beginnen op 1440 op x 448. Elk onderwerp heet zoals de kop boven zijn vragen. Vanaf 1280 past elke
     naam, ook de langste en ook vet, op een regel: zo staan de haltes op gelijke afstand. */
  .faq-indeling { grid-template-columns: var(--zij) minmax(0, 1fr); column-gap: var(--zij-gat); align-items: start; padding-top: clamp(40px, 4.6vw, 64px); }
  .faq-nav { top: calc(var(--kop-h) + 36px); margin: 0; background: none; border: 0; }
  .faq-aan .faq-nav { top: calc(var(--kop-h) + var(--faq-band) + 36px); }
  .faq-nav-kop { display: block; margin-bottom: 8px; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
  .faq-nav ol { display: block; padding: 0; overflow: visible; }
  .faq-nav ol::before { content: ''; position: absolute; left: 6.25px; top: 22px; bottom: 22px; border-left: 1.5px solid var(--line-mid); }
  /* loopt een naam toch over twee regels (grotere letter), dan houdt hij lucht tot de halte erboven en eronder */
  .faq-nav a { position: relative; display: flex; justify-content: space-between; gap: 14px; min-height: 44px; padding: 7px 0 7px 32px; border: 0; border-radius: 0; font-size: .9375rem; font-weight: 500; line-height: 1.25; color: var(--text); white-space: normal; }
  .faq-nav a::before { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line-strong); }
  /* R8:B02 */
  @media (hover: hover) and (pointer: fine) { .faq-nav a:hover { color: var(--bright); } .faq-nav a:hover::before { border-color: var(--bright); } }
  .faq-nav a[aria-current="true"] { box-shadow: none; color: var(--bright); font-weight: 600; }
  .faq-nav a[aria-current="true"]::before { background: var(--teal); border-color: var(--teal); }
  .faq-nav a[aria-disabled="true"], .faq-nav a[aria-disabled="true"]:hover { color: var(--muted); }
  .faq-nav a[aria-disabled="true"]::before, .faq-nav a[aria-disabled="true"]:hover::before { border-color: var(--line-mid); }

  .faq-lijst { padding-top: 0; }
  .faq-groep, .faq-vraag, .faq-vraag button { scroll-margin-top: calc(var(--anker) + 12px); }
  .faq-aan .faq-groep, .faq-aan .faq-vraag, .faq-aan .faq-vraag button { scroll-margin-top: calc(var(--anker) + var(--faq-band) + 12px); }
  /* de zoekband zit vast onder de kop: het veld en de knoppen erin laten de pagina staan waar ze staat */
  .faq-aan .faq-zoekband :is(input, button) { scroll-margin-top: 0; }
}

/* ===== Slot op het lichte vlak: staat je vraag er niet bij ===== */
.faq-meer-rij { display: grid; gap: clamp(28px, 5vw, 44px); }
.faq-meer-tekst p { margin-top: clamp(14px, 1.8vw, 20px); max-width: 33em; }
.faq-meer-tekst .acties { margin-top: clamp(22px, 2.6vw, 32px); }
.faq-direct-kop { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--bright); }
.faq-direct ul { margin-top: 12px; border-bottom: 1px solid var(--line-mid); }
.faq-direct li { padding: 12px 0 8px; border-top: 1px solid var(--line-mid); }
.faq-direct-label { display: block; font-size: .875rem; color: var(--muted); }
.faq-direct-waarde { display: inline-block; padding-block: 7px 9px; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 600; letter-spacing: -0.012em; color: var(--bright); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.faq-direct-waarde:hover { text-decoration-color: var(--teal); }
.faq-direct .klein { margin-top: 12px; }
@media (min-width: 960px) {
  /* op de lijnen van de voet eronder: "Liever direct?" begint waar "Meer" begint (x 672 op 1440),
     WhatsApp staat boven "Contact" (x 1036) */
  .faq-meer-rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 116px); align-items: end; }
  .faq-direct ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .faq-direct ul { border-bottom: 0; }
  .faq-direct li { border-bottom: 1px solid var(--line-mid); }
}

/* "Liever direct?": de tegels komen uit basis.css (na ronde 3). Hier alleen wat eigen is aan deze pagina. */
.faq-meer .contact-direct .faq-direct-kop { margin: 0; }
.faq-meer .contact-direct .klein { margin-top: 14px; }
@media (min-width: 960px) {
  .faq-meer-rij { align-items: start; }
  /* basis.css zet .contact-direct voor de QR-pagina's in kolom 1, rij 2: hier staat het blok rechts naast de tekst */
  .faq-meer .contact-direct { grid-column: 2; grid-row: 1; max-width: 30.5rem; margin-top: 0; }   /* zo breed als het blok op de homepage (491 op 1440) */
}

/* R8:B04 drukfeedback bij aanraken: een onderwerp krijgt een vlak zodra de vinger landt, loslaten in 160 ms.
   Geen schaal (een knop over de volle breedte zou dan verspringen). Terugdraaien: dit blok weg.
   Het vlak is var(--druk) uit basis.css (team 4), met de verhoogde kleur als terugval. */
.faq-nav a { transition: background-color var(--t-druk, 160ms) ease; }
.faq-nav a:active { background-color: var(--druk, var(--bg-raised)); transition-duration: 0ms; }

/* R8:B05 tijdens het zoeken gaan antwoorden bij elke toets open en dicht: daar geen overgang. De overgang zelf
   (opacity en 4 px verschuiving bij het openklappen, onder html.beweegt) staat in basis.css (team 4), en team 4
   heeft deze uitzondering daar ook gezet; dubbel is onschadelijk. Terugdraaien: deze regel weg (en die in basis.css). */
@media (prefers-reduced-motion: no-preference) {
  .faq-zoekt .uitklap-in { transition: none; }
}

/* R8:E04 de pagina verspringt niet meer na het laden (CLS was 0,143 op een telefoon).
   Oorzaak: de antwoorden stonden bij de eerste tekening open (basis.js klapt ze pas dicht na het lezen van de pagina)
   en de zoekband verscheen pas als p-faq.js draaide. Nu regelt de stijl die begintoestand zodra de klasse js er staat:
   - de antwoorden staan dicht, op breed (vanaf 700) alleen het eerste open, net zoals basis.js het straks zet;
   - de zoekband staat er al, met de maten van de stand "faq-aan".
   De begintoestand geldt zolang p-faq.js nog niet klaar is (faq-klaar) en basis.js nog geen antwoord dicht heeft gezet
   (geen .uitklap-in[hidden]). Valt een script weg, dan vervalt de regel vanzelf: niets blijft verborgen.
   Terugdraaien: dit blok weg en in p-faq.js de regel met faq-klaar weg. */
html.js:not(.faq-klaar):not(:has(.faq-lijst .uitklap-in[hidden])) .faq-vraag .uitklap-in { display: none; }
@media (min-width: 700px) {
  html.js:not(.faq-klaar):not(:has(.faq-lijst .uitklap-in[hidden])) #antwoord-01 { display: block; }
}
html.js:not(.faq-aan):not(.faq-klaar):not(:has(.faq-lijst .uitklap-in[hidden])) .faq-zoekband { display: block; }
html.js:not(.faq-aan):not(.faq-klaar):not(:has(.faq-lijst .uitklap-in[hidden])) .faq-kop { border-bottom: 0; }
html.js:not(.faq-aan):not(.faq-klaar):not(:has(.faq-lijst .uitklap-in[hidden])) .faq-indeling { padding-top: 0; }
@media (min-width: 1000px) {
  html.js:not(.faq-aan):not(.faq-klaar):not(:has(.faq-lijst .uitklap-in[hidden])) .faq-zoekband { position: sticky; top: var(--kop-h); z-index: 30; }
  html.js:not(.faq-aan):not(.faq-klaar):not(:has(.faq-lijst .uitklap-in[hidden])) .faq-indeling { padding-top: clamp(40px, 4.6vw, 64px); }
  html.js:not(.faq-aan):not(.faq-klaar):not(:has(.faq-lijst .uitklap-in[hidden])) .faq-nav { top: calc(var(--kop-h) + var(--faq-band) + 36px); }
}