/* ============================================================
   ExcelSpecialist — sitestijlen (productie)
   Vanilla CSS. Geen framework, geen externe fonts, geen libraries.
   Overgenomen letterlijk uit reference/design-system.html (goedgekeurd
   ontwerpsysteem, harde regel 6 in 08-aanvullende-harde-regels-v1.9.md).
   Documentatiestijlen (ds-*) horen hier bewust niet in.

   --font-sans en --font-mono worden gedefinieerd in css/fonts.css
   (als eerste stylesheet geladen, vóór dit bestand) - zie docs/beslissingen.md.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------- */
:root{
  /* Kleur */
  --ink:        #10231f;   /* tekst, bijna zwart met groene ondertoon */
  --ink-soft:   #4a5a56;   /* secundaire tekst */
  --paper:      #fbfbf9;   /* achtergrond */
  --paper-alt:  #f3f5f3;   /* secundaire vlakken */
  --rule:       #d8e0dc;   /* lijnen, celranden */
  --accent:     #0f6b4f;   /* huisaccent: diep werkbladgroen */
  --accent-dark:#0a4c38;   /* hover */
  --accent-soft:#e7f1ec;   /* accentvlak, celvulling */
  --error:      #9e2b12;   /* uitsluitend foutmeldingen */
  --focus:      #0f6b4f;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.075rem);
  --step-1:  clamp(1.15rem, 1.1rem + .25vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.28rem + .5vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.4rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);

  /* Ruimte — 4px basis */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4rem;  --s9:6rem;

  --radius: 2px;            /* bewust bijna vierkant: celranden */
  --maxw: 74rem;
  --measure: 68ch;
}

/* --- 2. Basis -------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--step-0); line-height:1.65;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ line-height:1.15; letter-spacing:-.021em; font-weight:700; margin:0 0 var(--s4); }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p,ul,ol{ margin:0 0 var(--s4); max-width:var(--measure); }
a{ color:var(--accent-dark); text-underline-offset:.18em; text-decoration-thickness:.08em; }
a:hover{ color:var(--ink); }
/* A telephone number never wraps. Seen on the Dutch thank-you page, where "+31 6 10 100 843"
   broke after "+31 6" and read as two numbers. This covers every tel: link on the site, so no
   page needs markup for it. Nothing else styles tel: links; .nav__submenu a sets white-space to
   normal at the same specificity, and there is no tel: link in the submenu. */
a[href^="tel:"]{ white-space:nowrap; }
img{ max-width:100%; height:auto; display:block; }
hr{ border:0; border-top:1px solid var(--rule); margin:var(--s7) 0; }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--radius);
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s5); }
.skiplink{
  position:absolute; left:var(--s4); top:-4rem; z-index:99;
  background:var(--ink); color:#fff; padding:var(--s3) var(--s4);
  border-radius:var(--radius); transition:top .15s ease;
}
.skiplink:focus{ top:var(--s4); color:#fff; }

/* Micro-label: monospace draagt de persoonlijkheid */
.label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 var(--s3);
  display:block;
}
.label--accent{ color:var(--accent); }

/* Markering voor nog niet geverifieerde claims (contentregister) */
.tbc{
  font-family:var(--font-mono); font-size:.7em; color:var(--error);
  border:1px solid currentColor; border-radius:var(--radius);
  padding:0 .25em; margin-inline-start:.3em; vertical-align:.15em;
  cursor:help;
}

/* --- 3. Header en navigatie ------------------------------ */
.site-header{
  border-bottom:1px solid var(--rule); background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.site-header__inner{
  display:flex; align-items:center;
  gap:var(--s4); min-height:4.25rem;
}
.brand{
  display:flex; align-items:baseline; gap:.45rem;
  font-weight:700; font-size:var(--step-1); letter-spacing:-.03em;
  color:var(--ink); text-decoration:none;
  margin-inline-end:auto; /* duwt lang-switch/nav-toggle/nav naar rechts, ook met 3+ items */
}
.lang-switch{
  font-family:var(--font-mono); font-size:var(--step--1); font-weight:700;
  color:var(--ink-soft); text-decoration:none; border:1px solid var(--rule);
  border-radius:var(--radius); padding:.4rem .65rem; line-height:1;
}
.lang-switch:hover{ color:var(--accent); border-color:var(--accent); }
.brand__mark{
  font-family:var(--font-mono); font-weight:700; font-size:.9rem;
  color:var(--accent); border:1.5px solid var(--accent);
  border-radius:var(--radius); padding:.1rem .3rem; letter-spacing:0;
  align-self:center;
}
.brand em{ font-style:normal; color:var(--accent); }
/* Opacity, not colour: the two-tone wordmark stays intact while it reads as a link. */
.brand:hover{ opacity:.75; }

.nav-toggle{
  font:inherit; font-size:var(--step--1); display:none;
  align-items:center; gap:.5rem; background:none; border:1px solid var(--rule);
  border-radius:var(--radius); padding:.55rem .8rem; color:var(--ink); cursor:pointer;
}
/* zichtbaar gemaakt binnen de mobiele media query hieronder */
.nav__list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  /* De leesmaat uit de basisregel voor ul geldt niet voor een menubalk: 68ch is bij
     de nav-lettergrootte circa 564px, en zeven items passen daar niet in - de balk
     brak daardoor op elke laptopbreedte naar twee regels. */
  max-width:none;
  gap:var(--s5); font-size:var(--step--1);
}
/* Laptopbreedtes: krappere tussenruimte, zodat zeven items plus het bredere
   taallabel ("Nederlands") ook naast een smalle header passen. Vanaf 78rem is de
   header op zijn maximale breedte (--maxw) en is de volle var(--s5) weer ruim. */
@media (min-width:60.0625rem) and (max-width:78rem){
  .nav__list{ gap:var(--s4); }
}
.nav__list a{ color:var(--ink); text-decoration:none; padding-block:.4rem; display:inline-block; }
.nav__list a:hover{ color:var(--accent); }
.nav__list a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--accent); }

@media (max-width:60rem){
  .js .nav-toggle{ display:inline-flex; }
  .js .nav{
    position:absolute; inset-inline:0; top:100%; background:var(--paper);
    border-bottom:1px solid var(--rule); padding:var(--s4) 0 var(--s5);
    max-height:calc(100vh - 4.25rem); overflow-y:auto;
  }
  .js .nav[hidden]{ display:none; }
  .nav__list{ flex-direction:column; gap:0; padding-inline:var(--s5); }
  .nav__list li + li{ border-top:1px solid var(--rule); }
  .nav__list > li > a{ padding-block:.85rem; }
}
@media (min-width:60.0625rem){
  .nav[hidden]{ display:block !important; }
  /* Home is a mobile-menu item only; the desktop bar is full and has the logo. */
  .nav__home{ display:none; }
}

/* Telefoonbreedtes: naast het logo draagt de header drie bedieningselementen
   (taal, zoeken, menu). Nu het taallabel de volledige taalnaam toont - "Nederlands"
   is ruim tweemaal zo breed als "NL" - paste die rij op 375px niet meer binnen het
   scherm. Deze verdichting houdt alle vier de elementen op één regel, zonder
   horizontaal schuiven. */
@media (max-width:30rem){
  .site-header__inner{ padding-inline:var(--s4); gap:.45rem; }
  .brand{ font-size:var(--step--1); }
  .brand__mark{ font-size:.8rem; }
  .lang-switch{ font-size:.72rem; padding:.35rem .5rem; }
  .nav-toggle{ font-size:.75rem; padding:.5rem .6rem; }
}

/* Onder 22rem past de rij niet meer op een regel, en dat is geen kwestie van een paar
   pixels bijschaven. Gemeten op een viewport van 320px: het Engelse taallabel
   ("Nederlands", 87px) is 21px breder dan het Nederlandse ("English", 66px), en daarmee
   loopt de Engelse pagina echt buiten het scherm - document scrollWidth 337 bij een
   viewport van 320, met "Menu" tegen de rand. De Nederlandse pagina at op diezelfde
   breedte de rechtermarge op (Menu tot 314px waar 304px de rand van de padding is).
   Nog verder verkleinen lost het niet op en het label verkorten mag niet: A12 besloot
   dat de knop de naam van de doeltaal draagt, in die taal zelf, met reden.
   Daarom wikkelt de rij hier: het merk op de eerste regel, de drie bedieningselementen
   rechts op de tweede. Dat past bij élke breedte en hoeft nooit per pixel te worden
   nagerekend. De prijs is een hogere header op de smalste telefoons; dat is een
   voorspelbare prijs, en een balk die past is meer waard dan een balk die net niet past. */
@media (max-width:22rem){
  .site-header__inner{
    flex-wrap:wrap; row-gap:.4rem; padding-block:.5rem; min-height:0;
  }
  .brand{ flex:0 0 100%; margin-inline-end:0; }
  /* Duwt de drie knoppen als groep naar rechts op de tweede regel. */
  .lang-switch{ margin-inline-start:auto; }
  /* Het uitklapmenu hangt onder de header (top:100%); de basisregel rekent met een
     header van 4.25rem, en die is hier hoger. */
  .js .nav{ max-height:calc(100vh - 7rem); }
}

/* --- 3b. Uitklapmenu (Diensten/Trainingen) ---------------
   <details>/<summary> in plaats van een JS-aangedreven dropdown: de
   deelpagina's blijven zo zonder JavaScript bereikbaar (Tab + Enter/spatie
   opent het menu, daarna verder tabben naar de links), met native
   toetsenbordbediening en zonder eigen aria-status nodig - hetzelfde
   uitgangspunt als .faq hierboven. */
.nav__list > li{ position:relative; }
.nav__dropdown > summary{
  cursor:pointer; list-style:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:.4rem;
}
.nav__dropdown > summary::-webkit-details-marker{ display:none; }
.nav__dropdown > summary::after{
  content:""; inline-size:.5em; block-size:.5em; flex:0 0 auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); margin-block-start:-.25em;
}
.nav__dropdown[open] > summary::after{ transform:rotate(-135deg); margin-block-start:.1em; }
.nav__dropdown > summary:hover{ color:var(--accent); }
.nav__submenu{ list-style:none; margin:0; padding:0; }
.nav__submenu a{ color:var(--ink); text-decoration:none; display:block; white-space:normal; }
.nav__submenu a:hover{ color:var(--accent); }
.nav__submenu a[aria-current="page"]{ box-shadow:inset 2px 0 0 var(--accent); }

@media (min-width:60.0625rem){
  .nav__list > li > a,.nav__dropdown > summary{ padding-block:.4rem; }
  .nav__submenu{
    position:absolute; top:100%; left:0; margin-top:.5rem; min-width:14rem;
    max-width:min(20rem, calc(100vw - 2 * var(--s5))); /* nooit breder dan de viewport - voorkomt afkappen */
    background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
    padding:var(--s2); box-shadow:0 10px 26px rgba(16,35,31,.14);
  }
  .nav__submenu a{ padding:.6rem .75rem; border-radius:var(--radius); }
}
@media (max-width:60rem){
  .nav__dropdown > summary{ padding-block:.85rem; }
  .nav__submenu{ padding-block:.3rem .6rem var(--s2); padding-inline-start:var(--s4); }
  .nav__submenu a{ padding-block:.6rem; }
}

/* --- 3c. Externe link naar PDF/download/officieel document --- */
.visually-hidden{
  position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.ext-link{ display:inline-flex; align-items:center; gap:.35em; }
.ext-link__icon{ inline-size:.85em; block-size:.85em; flex:0 0 auto; }

/* --- 4. Knoppen ------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; font-size:var(--step-0);
  padding:.75rem 1.35rem; border-radius:var(--radius); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; line-height:1.3;
}
.btn--primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.btn--secondary{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn--secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn--quiet{ padding-inline:0; border:0; color:var(--accent-dark); text-decoration:underline; }

/* The contact form while it is sending (#17). contact.js puts the wording from data-busy-label on
   the button and aria-busy on the form; the dots are drawn here, not by a timer. They are
   animated only under prefers-reduced-motion: no-preference - the site-wide reduce rule shortens
   animations rather than stopping them, which would make an endless one flicker - so anyone who
   asked for less motion sees a still ellipsis. clip-path reveals the dots without changing the
   button's width. */
.form[aria-busy="true"] .btn{ gap:0; cursor:progress; }
.form[aria-busy="true"] [data-busy-label]::after{ content:"\2026"; }
@media (prefers-reduced-motion:no-preference){
  .form[aria-busy="true"] [data-busy-label]::after{ animation:busy-dots 1.2s steps(4,jump-none) infinite; }
  @keyframes busy-dots{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
}

/* --- 5. Formulebalk: het signatuurelement ---------------- */
.formulabar{
  display:flex; align-items:stretch; border:1px solid var(--rule);
  border-radius:var(--radius); background:#fff; overflow:hidden;
  font-family:var(--font-mono); font-size:var(--step--1);
  max-width:44rem;
}
.formulabar__cell{
  flex:0 0 auto; padding:.5rem .7rem; border-right:1px solid var(--rule);
  color:var(--ink-soft); background:var(--paper-alt); min-width:3.6rem;
}
.formulabar__fx{
  flex:0 0 auto; padding:.5rem .7rem; border-right:1px solid var(--rule);
  color:var(--accent); font-style:italic; font-weight:700;
}
.formulabar__input{
  flex:1 1 auto; padding:.5rem .8rem; color:var(--ink);
  white-space:nowrap; overflow-x:auto; scrollbar-width:thin;
}
.formulabar__input b{ color:var(--accent); font-weight:700; }
@media (max-width:34rem){
  /* Op telefoons breekt de formule af op de puntkomma in plaats van
     horizontaal te scrollen; de balk oogt dan als een uitgeklapte
     formulebalk in Excel. */
  .formulabar__input{ white-space:normal; overflow-x:visible; }
  .formulabar__cell{ min-width:0; }
}

/* --- 6. Hero --------------------------------------------- */
.hero{
  position:relative; padding-block:var(--s8) var(--s7);
  border-bottom:1px solid var(--rule); overflow:hidden;
}
.hero::before{                      /* werkbladraster, zeer subtiel */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 34px);
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
          mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero > *{ position:relative; z-index:1; }
.hero h1{ margin-top:var(--s5); max-width:19ch; }
.hero__lead{ font-size:var(--step-1); color:var(--ink-soft); max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s6); }

/* --- 7. Secties ------------------------------------------ */
.section{ padding-block:var(--s8); border-bottom:1px solid var(--rule); }
.section--tint{ background:var(--paper-alt); }
.section__head{ max-width:var(--measure); margin-bottom:var(--s6); }
.section__head p{ color:var(--ink-soft); margin-bottom:0; }

/* Introtekst buiten de hero; zelfde toon als .hero__lead maar niet aan het
   hero-element gebonden. */
.lead{ font-size:var(--step-1); color:var(--ink-soft); max-width:52ch; }

/* --- 8. Kaarten (cellen) --------------------------------- */
.grid{ display:grid; gap:var(--s5); }
@media (min-width:44rem){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:60rem){ .grid--3{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:#fff; border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:var(--s5);
}
.card h3{ font-size:var(--step-1); margin-bottom:var(--s3); }
.card p{ color:var(--ink-soft); margin-bottom:var(--s4); }
.card p:last-child{ margin-bottom:0; }
.card__link{ font-weight:600; text-decoration:none; }
.card__link:hover{ text-decoration:underline; }
.card__link::after{ content:" →"; }

/* --- 9. Cijferstrook ------------------------------------- */
/* Rustgevende regel direct onder een call-to-action-knop. Geen nieuwe belofte: beide helften
   staan al vast - het kosteloze eerste gesprek (A21 punt 17, dat A4 op dat punt heropende) en
   de reactietijd (A13). Staat onder de knop en niet erboven, zodat de knop de eerste handeling
   blijft. */
.cta-note{ margin-block-start:var(--s3); font-size:var(--step--1); color:var(--ink-soft); max-width:var(--measure); }

/* The hero's first call to action, with its reassurance line directly beneath it (#16).
   The column is only as wide as the button, so the note wraps under the button instead of
   pushing the secondary button further along; each half of the note stays whole. The row
   aligns to the top so the secondary button keeps its own height beside the taller group. */
.hero__actions{ align-items:flex-start; }
.hero__cta{ display:grid; grid-template-columns:min-content; }
.hero__cta .btn{ white-space:nowrap; }
.hero__cta .cta-note{ margin-block-start:var(--s2); }
.hero__cta .cta-note span{ white-space:nowrap; }

/* Case schemas on the three case pages, both languages. Presentation attributes only inside the
   SVG (fill, stroke, font-size) - no style= attributes, so the count in part B10 of
   docs/beslissingen.md does not grow. The schema never carries information on its own: every one of
   them has a <title>, a <desc> and a paragraph beside it saying the same thing. */
.schema{ width:100%; height:auto; margin-block:var(--s5); border:1px solid var(--rule); border-radius:var(--radius); background:#fff; }

/* Onder 48rem is een schema van 720 eenheden breed niet meer te lezen. Op een viewport van
   375px rendert het op circa 343px, en dan is de kleinste tekst (font-size 11 in
   viewBox-eenheden) nog 5,2 pixels hoog - gemeten, niet geschat. Meekrimpen is daar dus geen
   optie.
   Daarom krijgt het schema onder die breedte zijn eigen maat terug (720px, waarmee 11
   eenheden ook 11 pixels zijn) en schuift het horizontaal binnen zijn eigen kader. Het kader
   is een tabstop, want een schuifbaar vlak dat niet met het toetsenbord te bedienen is, is een
   toegankelijkheidsfout (WCAG 2.1.1).
   Verticaal stapelen zou beter ontwerp zijn, maar vraagt een tweede tekening per case - zes
   extra SVG's die met de hand gelijk moeten blijven, en A20 noemt dat soort handmatige
   tweelingen al als bekende zwakte. De alinea naast elk schema zegt hetzelfde in woorden, dus
   wie niet schuift mist geen informatie. */
@media (max-width:48rem){
  .schema-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--rule); border-radius:var(--radius); background:#fff;
    margin-block:var(--s5);
  }
  .schema-scroll .schema{ width:720px; max-width:none; margin-block:0; border:0; border-radius:0; }
  .schema-scroll:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .schema-hint{ display:block; font-size:var(--step--1); color:var(--ink-soft); margin-block-start:calc(var(--s5) * -0.5); }
}
@media (min-width:48.0625rem){
  .schema-hint{ display:none; }
}

/* Portraits on /over-ons/ and /en/about/ (#19): one or two, side by side, each shown square at
   120px with the name beneath. The display size is a design decision, not something a file
   dictates: new photographs are delivered at 480x480, and Dennis's current 256x256 is still 2x
   at this size. object-fit keeps every square source on the same crop. Do not upscale a small
   original - see A21 in docs/beslissingen.md. */
.portraits{ display:flex; flex-wrap:wrap; gap:var(--s5); margin-block:var(--s5); }
.portraits__item{ margin:0; }
.portrait{ display:block; width:120px; height:120px; object-fit:cover; }
.portraits__item figcaption{ margin-block-start:var(--s2); font-size:var(--step--1); color:var(--ink-soft); }

.figures{
  display:grid; gap:0; border:1px solid var(--rule); border-radius:var(--radius);
  background:#fff; overflow:hidden;
}
@media (min-width:44rem){ .figures{ grid-template-columns:repeat(3,1fr); } }
.figure{ padding:var(--s5); border-top:1px solid var(--rule); }
.figure:first-child{ border-top:0; }
@media (min-width:44rem){
  .figure{ border-top:0; border-left:1px solid var(--rule); }
  .figure:first-child{ border-left:0; }
}
.figure__value{
  font-family:var(--font-mono); font-size:var(--step-3); font-weight:700;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; display:block;
}
.figure__label{ color:var(--ink-soft); font-size:var(--step--1); }

/* --- 10. Werkwijze: genummerd omdat het een volgorde is -- */
.steps{ list-style:none; padding:0; margin:0; counter-reset:step; max-width:none; }
.step{
  counter-increment:step; display:grid; gap:var(--s3) var(--s5);
  grid-template-columns:auto 1fr; padding-block:var(--s5);
  border-top:1px solid var(--rule);
}
.step:first-child{ border-top:0; padding-top:0; }
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--accent);
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:.15rem .45rem; height:max-content; background:#fff;
}
.step h3{ margin:0 0 var(--s2); font-size:var(--step-1); }
.step p{ margin:0; color:var(--ink-soft); }

/* --- 10b. Terug naar boven (lange artikelen, geen JavaScript) --- */
.to-top{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:var(--step--1);
  color:var(--ink-soft); text-decoration:none;
  border-top:1px solid var(--rule); padding-top:var(--s3); margin-top:var(--s5);
}
.to-top:hover{ color:var(--accent); }
.to-top::before{ content:"\2191"; }

/* Zacht scrollen naar ankers, uitgeschakeld bij bewegingsgevoeligheid */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
/* Kop niet onder de sticky header laten vallen bij een ankersprong */
:target{ scroll-margin-top:5.5rem; }

/* --- 11. Citaat ------------------------------------------ */
.quote{ border-left:3px solid var(--accent); padding-left:var(--s5); margin:0; max-width:var(--measure); }
.quote p{ font-size:var(--step-2); line-height:1.4; letter-spacing:-.015em; }
.quote footer{ font-size:var(--step--1); color:var(--ink-soft); }

/* --- 12. Logostrook -------------------------------------- */
.logos{ display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; list-style:none; padding:0; margin:0; }
.logos li{
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--ink-soft);
  border:1px dashed var(--rule); border-radius:var(--radius); padding:.7rem 1rem; background:#fff;
}

/* --- 13. Veelgestelde vragen (geen JavaScript) ----------- */
.faq{ border-top:1px solid var(--rule); max-width:var(--measure); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; padding:var(--s4) 0; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; gap:var(--s4); align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-mono); color:var(--accent); }
.faq details[open] summary::after{ content:"–"; }
.faq details > p{ margin:0 0 var(--s4); color:var(--ink-soft); }

/* --- 14. Tabel ------------------------------------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius); background:#fff; }
table{ border-collapse:collapse; width:100%; font-size:var(--step--1); }
caption{ text-align:left; padding:var(--s4); color:var(--ink-soft); }
th,td{ text-align:left; padding:.7rem var(--s4); border-top:1px solid var(--rule); }
thead th{
  border-top:0; background:var(--paper-alt); font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
td.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }

/* --- 15. Formulier --------------------------------------- */
.form{ max-width:38rem; display:grid; gap:var(--s5); }
.field{ display:grid; gap:var(--s2); }
.field > label{ font-weight:600; }
.field .hint{ font-size:var(--step--1); color:var(--ink-soft); margin:0; }
input[type=text],input[type=email],input[type=tel],input[type=search],textarea,select{
  font:inherit; font-size:var(--step-0); color:var(--ink); background:#fff;
  border:1px solid var(--rule); border-radius:var(--radius); padding:.7rem .8rem; width:100%;
}
input:hover,textarea:hover,select:hover{ border-color:var(--ink-soft); }
textarea{ min-height:8rem; resize:vertical; }
.field--error input,.field--error textarea{ border-color:var(--error); border-width:2px; }
.field__error{
  color:var(--error); font-size:var(--step--1); font-weight:600; margin:0;
  display:flex; gap:.4rem; align-items:baseline;
}
.field__error::before{ content:"!"; font-family:var(--font-mono); border:1px solid currentColor;
  border-radius:50%; width:1.2em; height:1.2em; display:inline-grid; place-items:center; font-size:.8em; }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.notice{ border:1px solid var(--rule); border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:var(--radius); padding:var(--s4) var(--s5); }
.notice--error{ border-left-color:var(--error); background:#fdf1ee; }
.notice p{ margin:0; }
.notice strong{ display:block; margin-bottom:var(--s1); }

/* --- 16. Footer ------------------------------------------ */
.site-footer{ background:var(--ink); color:#cdd8d4; padding-block:var(--s8) var(--s6); }
.site-footer a{ color:#fff; }
.site-footer h2{
  font-family:var(--font-mono); font-size:.72rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:#8fa8a1;
  margin-bottom:var(--s3);
}
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s2); }
.site-footer address{ font-style:normal; }
.footer-bottom{
  border-top:1px solid #24403a; margin-top:var(--s7); padding-top:var(--s5);
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s5); justify-content:space-between;
  font-size:var(--step--1);
}

/* --- 17. Zoeken (reviewronde 5) --------------------------- */
.search-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; padding:0; flex:0 0 auto;
  background:none; border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--ink); cursor:pointer;
}
.search-toggle:hover{ color:var(--accent); border-color:var(--accent); }
.search-toggle svg{ width:1.1rem; height:1.1rem; }

.search-overlay{
  position:fixed; inset:0; z-index:50; background:rgba(16,35,31,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:10vh var(--s5) var(--s5); overflow-y:auto;
}
.search-overlay[hidden]{ display:none; }
.search-overlay__panel{
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  width:100%; max-width:36rem; padding:var(--s5);
  box-shadow:0 20px 60px rgba(16,35,31,.25);
}
.search-overlay__form{ display:flex; gap:var(--s3); align-items:center; }
.search-overlay__form input[type=search]{ flex:1 1 auto; }
.search-overlay__submit,.search-overlay__close{
  flex:0 0 auto; width:2.5rem; height:2.5rem; display:inline-flex; align-items:center;
  justify-content:center; background:none; border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer;
}
.search-overlay__submit svg{ width:1.1rem; height:1.1rem; }
.search-overlay__submit:hover,.search-overlay__close:hover{ color:var(--accent); border-color:var(--accent); }
.search-overlay__results{ margin-top:var(--s5); max-height:55vh; overflow-y:auto; }

.search-page__form{ display:flex; gap:var(--s3); max-width:34rem; margin-bottom:var(--s6); }
.search-page__form input[type=search]{ flex:1 1 auto; }

.search-results__list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s5); max-width:none; }
.search-results__item a{ font-weight:600; text-decoration:none; }
.search-results__item a:hover{ text-decoration:underline; }
.search-results__url{
  display:block; font-family:var(--font-mono); font-size:var(--step--1);
  color:var(--ink-soft); margin-top:.1em;
}
.search-results__snippet{ margin:.4em 0 0; color:var(--ink-soft); max-width:none; }
.search-results__snippet mark{ background:var(--accent-soft); color:var(--ink); padding:0 .1em; }
.search-results__empty{ color:var(--ink-soft); }
.search-results__sitemap{ margin-top:var(--s4); columns:2; column-gap:var(--s6); max-width:none; }
.search-results__sitemap li{ break-inside:avoid; }
@media (max-width:34rem){
  .search-results__sitemap{ columns:1; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* A failed submit without JavaScript (#19). contact.php sends it to
   /contact/?error=<code>#error-<code>, and :target shows the one block with that id. With
   JavaScript the notice box shows the message instead, so the blocks stay hidden under .js -
   that rule comes last, because it has the same specificity as :target. The blocks cannot use
   the hidden attribute: the reset makes [hidden] display:none !important, which :target could
   never override. */
.error-fallback{ display:none; }
.error-fallback:target{ display:block; }
.js .error-fallback{ display:none; }
.error-fallback__code{ display:block; margin-block-start:var(--s2); font-size:var(--step--1); }