/* ==========================================================================
   Brievenhulp.nl · huisstijl
   Gedeeld design system met de portfolio-sites (HulpBijFraude.nl):
   Rijksoverheid-blauw, warm off-white, oranje CTA's, ribbon-motief.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lettertype · Source Sans Pro, vanaf onze eigen server (OFL-1.1, zie
   fonts/OFL.txt). Stond eerder bij Google: dat kostte twee extra verbindingen
   voor het tekenen van de pagina kon beginnen, en het gaf het IP-adres van
   elke bezoeker door aan Google. Nu blijft alles binnen het eigen domein.
   Latin-ext staat apart zodat gewone Nederlandse tekst de kleinere set laadt.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-pro-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-pro-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-pro-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-pro-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/source-sans-pro-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/source-sans-pro-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Breekpunten in dit bestand, in volgorde van smal naar breed:
     400   telefoon, krap (alleen de bovenbalk)
     560   telefoon staand
     600   telefoon liggend / kleine tablet
     640   grens waaronder de bovenbalk inklapt
     700   tablet
     900   kleine laptop
     940   grens waaronder de actieknoppen uit het midden gaan (941 is het paar)
   Ze zijn bewust niet hernummerd: elk getal hangt aan een component die erop
   is afgeregeld, en dat blind samenvoegen levert zichtbare sprongen op waar nu
   niets misgaat. Nieuwe regels aanhaken op een bestaand getal uit deze lijst,
   niet op een nieuw getal ertussenin. */
:root {
  --primary:        #154273;
  --primary-light:  #2E6DAD;
  --primary-dark:   #0D2B4A;

  --accent:         #B15400;
  --accent-hover:   #8F4300;

  --bg:             #F8F4EF;
  --surface:        #FFFFFF;
  --surface-hover:  #F0EDE8;

  --text:           #1A1A2E;
  --text-muted:     #5A6475;

  --ok:             #2D6A4F;
  --ok-bg:          #ECFDF5;
  --warn:           #8F6700;
  --warn-bg:        #FFFBEB;
  --urgent:         #AE5100;
  --urgent-bg:      #FFF3E0;

  --border:         #E5E0D8;
  /* Radiusschaal. Vijf stappen met een naam, in plaats van zeven losse
     waarden door het bestand heen. De pixels zijn ongewijzigd. */
  --radius-xs:      4px;
  --radius-s:       8px;
  --radius-m:       10px;
  --radius:         12px;
  --radius-pill:    9999px;
  --shadow:         0 2px 16px rgba(21,66,115,0.10);
  --shadow-hover:   0 6px 28px rgba(21,66,115,0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Source Sans Pro', 'Open Sans', 'Noto Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img, svg { vertical-align: middle; }
a { color: var(--primary); }
a:hover { color: var(--primary-light); }
.container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.smal { max-width: 800px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

/* --------------------------------------------------------------------------
   Navigatie
   -------------------------------------------------------------------------- */
.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.nav-inner {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.8rem 0;
}
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.logo-woord { font-weight: 700; font-size: 1.3rem; color: var(--primary); letter-spacing: -0.01em; }
.logo-woord .nl { color: var(--accent); font-weight: 600; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 0.98rem; color: var(--primary); }
.nav-links a:hover { text-decoration: underline; }

/* Mobiel menu: knop wordt door nav.js ingevoegd (progressive enhancement).
   Zonder JS blijven de links zichtbaar; met JS klappen ze achter deze knop. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-s);
  color: var(--primary); cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-hover); }
.nav-toggle svg { display: block; }
@media (max-width: 640px) {
  .nav-inner { flex-wrap: wrap; }
  .nav-links { gap: 0.55rem 0.8rem; flex-wrap: wrap; justify-content: flex-end; }
  .nav-tekstlink { order: 3; flex-basis: 100%; padding: 0.6rem 0.2rem; }
  .nav-js .nav-toggle { display: inline-flex; order: 1; }
  .nav-js .nav-links .knop { order: 2; }
  .nav-js .nav-tekstlink { display: none; border-top: 1px solid var(--border); }
  .nav-js.menu-open .nav-tekstlink { display: block; }
}

.knop {
  display: inline-block;
  background: var(--accent); color: #fff !important;
  font-weight: 700; text-decoration: none; text-align: center;
  padding: 0.75rem 1.6rem; border-radius: var(--radius-pill);
  border: none; cursor: pointer; font-size: 1.02rem; font-family: inherit;
  transition: background .15s ease, transform .15s ease;
  min-height: 44px;
}
.knop:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }
.knop:disabled { background: var(--border); color: var(--text-muted) !important; cursor: not-allowed; transform: none; }
.knop-blauw { background: var(--primary); }
.knop-blauw:hover { background: var(--primary-dark); }
.knop-rustig {
  background: transparent; color: var(--primary) !important;
  border: 2px solid var(--primary);
}
.knop-rustig:hover { background: var(--surface-hover); transform: none; }
.knop-klein { padding: 0.5rem 1.1rem; font-size: 0.95rem; }

/* Grote uploadknop in de hero van de homepage, met een regel eronder
   voor wie liever zelf kiest. */
.knop-hero { font-size: 1.12rem; padding: 0.95rem 2.2rem; line-height: 1.3; }
.knop-hero .knop-hero-sub { display: block; font-size: 0.88rem; font-weight: 600; opacity: 0.93; margin-top: 0.12rem; }
.cta-onder { margin-top: 0.75rem; font-size: 0.97rem; }
.cta-onder a { color: var(--primary); font-weight: 600; }

/* Actieknoppen in de bovenbalk van zaakpagina's. De balk zelf is sticky,
   dus deze knoppen blijven tijdens het scrollen bovenaan in beeld. */
.nav-acties { display: flex; align-items: center; gap: 0.55rem; }
.nav-acties .knop { white-space: nowrap; padding: 0.55rem 1.15rem; font-size: 0.97rem; min-height: 0; }
/* Op brede schermen staat de oranje startknop (of het knoppenpaar) exact in
   het midden van de balk; logo links, tekstlinks rechts. */
@media (min-width: 941px) {
  .nav .nav-inner { position: relative; }
  .nav .nav-acties { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 940px) {
  .nav .nav-inner { flex-wrap: wrap; }
  .nav-acties { order: 4; flex: 1 1 100%; padding-bottom: 0.7rem; }
  .nav-acties .knop { flex: 1 1 0; white-space: normal; line-height: 1.25; padding: 0.55rem 0.6rem; font-size: 0.92rem; }
  /* Eén enkele knop (gewone pagina's): geen eigen rij, gewoon rechts in de balk. */
  .nav-acties:has(> .knop:only-child) { order: 0; flex: 0 0 auto; padding-bottom: 0; }
  .nav-acties:has(> .knop:only-child) .knop { flex: none; white-space: nowrap; padding: 0.5rem 1.1rem; font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: 2.1rem 0 1.5rem; text-align: center; }
.hero h1 {
  font-size: clamp(1.6rem, 3.6vw, 2.1rem);
  color: var(--primary); line-height: 1.16; letter-spacing: -0.01em;
  max-width: 34ch; margin: 0 auto;
}
.hero .sub {
  max-width: 60ch; margin: 0.7rem auto 0;
  font-size: 1.05rem; color: var(--text-muted);
}
.hero .cta-rij { margin-top: 1.1rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.zekerheden {
  margin-top: 1.1rem; display: flex; gap: 0.5rem 1.8rem; justify-content: center; flex-wrap: wrap;
  font-size: 0.9rem; color: var(--text-muted);
}
.zekerheden span { display: inline-flex; align-items: center; gap: 0.45rem; }
.zekerheden svg { color: var(--ok); flex: none; }

/* --------------------------------------------------------------------------
   Secties en koppen (ribbon-motief)
   -------------------------------------------------------------------------- */
.sectie { padding: 2.6rem 0; }
.sectie-wit { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
h2.ribbon {
  border-left: 5px solid var(--primary); padding-left: 1.25rem;
  font-size: 1.55rem; color: var(--primary); margin-bottom: 1.4rem; line-height: 1.25;
}
.sectie .intro { max-width: 68ch; color: var(--text-muted); margin: -0.6rem 0 1.6rem; padding-left: calc(1.25rem + 5px); }

/* --------------------------------------------------------------------------
   Zaak-kaarten
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.zaak-kaart {
  display: block; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.35rem 1.4rem 1.25rem; text-decoration: none; color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.zaak-kaart:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--text); }
.zaak-kaart .zk-icoon { color: var(--primary); margin-bottom: 0.7rem; }
.zaak-kaart h3 { font-size: 1.12rem; color: var(--primary); line-height: 1.35; }
.zaak-kaart p { font-size: 0.95rem; color: var(--text-muted); margin-top: 0.4rem; }
.zaak-kaart .zk-pijl { display: inline-block; margin-top: 0.7rem; font-weight: 700; color: var(--accent); }
.zaak-kaart .zk-voet { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.zaak-kaart .zk-voet .zk-pijl { margin-top: 0.7rem; }
.zaak-kaart .zk-prijs { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Hoe het werkt
   -------------------------------------------------------------------------- */
.stappen-rij { counter-reset: stap; }
.stap-blok { position: relative; padding-left: 3.4rem; margin-bottom: 1.4rem; max-width: 62ch; }
.stap-blok::before {
  counter-increment: stap; content: counter(stap);
  position: absolute; left: 0; top: 0.05rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.stap-blok h3 { font-size: 1.12rem; color: var(--primary); }
.stap-blok p { color: var(--text-muted); font-size: 0.98rem; margin-top: 0.2rem; }

/* --------------------------------------------------------------------------
   Prijsblok
   -------------------------------------------------------------------------- */
.prijsblok {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 2rem; text-align: center; max-width: 620px; margin: 0 auto;
}
.prijsblok .bedrag { font-size: 2.6rem; font-weight: 700; color: var(--primary); }
.prijsblok .bedrag small { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
/* Informatieve prijstabel: twee opties naast elkaar als vergelijking,
   geen keuze-element. De voordeligste kolom krijgt een lichte tint. */
.prijs-tabel-scroll { overflow-x: auto; margin-bottom: 0.4rem; }
.prijs-tabel { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.prijs-tabel th, .prijs-tabel td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.prijs-tabel thead th { border-bottom: 2px solid var(--primary); vertical-align: bottom; }
.prijs-tabel tbody th { text-align: left; font-weight: 600; color: var(--text); width: 44%; }
.prijs-tabel td { text-align: center; }
.prijs-tabel .pt-kop { text-align: center; font-weight: 700; color: var(--primary); line-height: 1.3; }
.prijs-tabel .pt-kop .pt-prijs { display: block; font-size: 1.45rem; margin-top: 0.15rem; }
.prijs-tabel .pt-tag { display: inline-block; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: var(--radius-pill); margin-bottom: 0.3rem; }
.prijs-tabel .pt-voordeel { background: #F2F7FC; }
.prijs-tabel .pt-vink { color: var(--ok); font-weight: 700; }
.prijs-tabel .pt-min { color: var(--text-muted); }
.prijs-tabel tfoot th, .prijs-tabel tfoot td { border-bottom: none; border-top: 2px solid var(--primary); font-weight: 700; }
.prijs-tabel tfoot small { display: block; font-weight: 400; color: var(--text-muted); }
.prijs-keuze-noot { font-size: 0.85rem; color: var(--text-muted); margin: 0.1rem 0 0.6rem; }
@media (max-width: 560px) {
  .prijs-tabel { font-size: 0.8rem; }
  .prijs-tabel th, .prijs-tabel td { padding: 0.45rem 0.35rem; }
  .prijs-tabel tbody th { width: 36%; }
  .prijs-tabel .pt-kop .pt-prijs { font-size: 1.15rem; }
  .prijsblok { padding: 1.4rem 1rem; }
}
.prijsblok ul { list-style: none; margin: 1.1rem 0 1.4rem; text-align: left; }
.prijsblok li { padding: 0.4rem 0 0.4rem 1.9rem; position: relative; font-size: 0.99rem; }
.prijsblok li::before { content: "✓"; position: absolute; left: 0.3rem; color: var(--ok); font-weight: 700; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 0.7rem; overflow: hidden;
}
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--primary);
  padding: 1rem 1.2rem; list-style: none; position: relative; padding-right: 2.6rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.2rem; top: 0.85rem; font-size: 1.4rem; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 1.2rem 1.1rem; color: var(--text-muted); font-size: 0.98rem; max-width: 75ch; }

/* --------------------------------------------------------------------------
   Generator (vragenflow)
   -------------------------------------------------------------------------- */
.flow-kop { padding: 2rem 0 0.5rem; }
.flow-kop h1 { font-size: 1.7rem; color: var(--primary); }
.flow-kop .flow-sub { color: var(--text-muted); margin-top: 0.3rem; }
.voortgang { height: 8px; background: var(--border); border-radius: var(--radius-pill); margin: 1.3rem 0 2rem; overflow: hidden; }
.voortgang > div { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .3s ease; }

.flow-paneel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.8rem; max-width: 760px; margin-bottom: 2.5rem;
}
.flow-paneel h2 { font-size: 1.25rem; color: var(--primary); margin-bottom: 1.2rem; border-left: 5px solid var(--primary); padding-left: 1rem; }

.veld { margin-bottom: 1.15rem; }
.veld label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 1rem; }
.veld .hulp { font-size: 0.88rem; color: var(--text-muted); margin-top: -0.2rem; margin-bottom: 0.4rem; }
.veld input[type=text], .veld input[type=email], .veld input[type=date], .veld input[type=number],
.veld select, .veld textarea {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit; font-size: 1rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-s); background: #fff; color: var(--text);
  min-height: 44px;
}
.veld textarea { min-height: 110px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--primary-light); outline: 2px solid rgba(46,109,173,.25); }
/* Foutmeldingen. De opmaak hangt niet aan het veld maar aan de melding zelf,
   zodat losse meldingen (pakketkeuze, akkoorden) er net zo uitzien als
   veldfouten en niet als gewone lopende tekst. */
.fout-melding {
  color: var(--urgent); font-size: 0.9rem; font-weight: 600; margin-top: 0.3rem;
  padding-left: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23AE5100'%3E%3Cpath d='M10 1.8a8.2 8.2 0 100 16.4 8.2 8.2 0 000-16.4zm0 3.6a1 1 0 011 1v4.4a1 1 0 11-2 0V6.4a1 1 0 011-1zm0 8.1a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'/%3E%3C/svg%3E") no-repeat left 0.1em / 1.1rem 1.1rem;
}
.veld .fout-melding { display: none; }
.veld.fout .fout-melding { display: block; }
/* Samenvattingsregel bovenaan een stap, voor wie de knop indrukt met iets open. */
.stap-fout {
  color: var(--urgent); font-weight: 600; font-size: 0.95rem;
  background: var(--urgent-bg); border: 1px solid #F0CFA8; border-radius: var(--radius-m);
  padding: 0.7rem 0.9rem 0.7rem 2.3rem; margin: 0 0 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23AE5100'%3E%3Cpath d='M10 1.8a8.2 8.2 0 100 16.4 8.2 8.2 0 000-16.4zm0 3.6a1 1 0 011 1v4.4a1 1 0 11-2 0V6.4a1 1 0 011-1zm0 8.1a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat;
  background-position: 0.8rem 0.78rem; background-size: 1.1rem 1.1rem;
}
.prijs-regel .kies-eerst { font-size: 0.95rem; font-weight: 400; color: var(--text-muted); }
.veld.fout input, .veld.fout select, .veld.fout textarea { border-color: var(--urgent); }
.keuze-rij { display: grid; gap: 0.6rem; }
.keuze-optie {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border: 1.5px solid var(--border); border-radius: var(--radius-m); padding: 0.8rem 0.95rem;
  cursor: pointer; background: #fff; transition: border-color .12s ease, background .12s ease;
}
.keuze-optie:hover { background: var(--surface-hover); }
.keuze-optie input { margin-top: 0.28rem; width: 1.1rem; height: 1.1rem; accent-color: var(--primary); flex: none; }
.keuze-optie.gekozen { border-color: var(--primary); background: #EEF4FA; }
.keuze-optie .ko-titel { font-weight: 600; }
.keuze-optie .ko-sub { font-size: 0.88rem; color: var(--text-muted); }

.flow-knoppen { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }

.controle-blok { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 1rem 1.2rem; margin-bottom: 1rem; background: var(--bg); }
.controle-blok h3 { font-size: 0.95rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.controle-blok dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 0.35rem 1rem; font-size: 0.95rem; }
.controle-blok dt { color: var(--text-muted); }
.controle-blok dd { font-weight: 600; overflow-wrap: anywhere; }
/* Uitklapper: standaard tonen we alleen de kernantwoorden, zodat de
   afrekenstap kort blijft. De rest blijft één klik ver weg, niet verborgen. */
.controle-meer {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.8rem;
  background: none; border: 0; padding: 0.2rem 0; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px;
}
.controle-meer:hover { color: var(--primary-light); }
.controle-meer:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-xs); }
.controle-meer .cm-pijl {
  width: 0.5rem; height: 0.5rem; flex: none; margin-top: -0.18rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.controle-meer.open .cm-pijl { transform: rotate(-135deg); margin-top: 0.12rem; }
.controle-rest { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }

.akkoord { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.9rem; font-size: 0.95rem; }
.akkoord input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: none; }

.ai-melding {
  background: var(--warn-bg); border: 1px solid #E8D9A0; border-radius: var(--radius-m);
  padding: 0.85rem 1.1rem; font-size: 0.92rem; color: var(--text); margin: 1.1rem 0;
}
.prijs-regel { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.15rem; padding: 0.9rem 0.2rem; border-top: 2px solid var(--border); margin-top: 1rem; }
.prijs-regel .btw { display: block; font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }

/* Pakketkeuze. Onder elkaar in plaats van naast elkaar: het complete pakket
   staat bovenaan als hoofdaanbod met wat erin zit, de losse brief eronder als
   rustig maar volwaardig beschreven alternatief. Geen voorselectie (art. 6:230j
   BW) en de goedkope optie wordt niet uitgekleed; de sturing zit in volgorde en
   opmaak, niet in het weglaten van informatie. */
.pakket-keuze { display: block; margin: 0.4rem 0 1rem; }
.pakket-kaart {
  position: relative; display: block; background: #fff; cursor: pointer; overflow: hidden;
  border: 2px solid var(--border); border-radius: var(--radius-m);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pakket-kaart:hover { border-color: var(--primary); }
.pakket-kaart input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pakket-kaart.gekozen { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20, 64, 110, 0.14); }
.pakket-kaart:focus-within { box-shadow: 0 0 0 3px rgba(20, 64, 110, 0.3); }

/* Keuzemarkering: leeg rondje, en zodra er gekozen is een groen bolletje met
   een wit vinkje. Het vinkje is een SVG, dus scherp op elk scherm en bij elke
   zoomstand. Op de blauwe kopbalk een lichtere groentint, anders valt hij weg. */
.pakket-kaart .pk-band-titel::before,
.pakket-kaart .pk-titel > span:first-child::before {
  content: ""; display: inline-block; vertical-align: -0.28em; margin-right: 0.55rem;
  width: 1.45em; height: 1.45em; border-radius: 50%; border: 2px solid currentColor;
  opacity: 0.45; background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.pakket-kaart.gekozen .pk-band-titel::before,
.pakket-kaart.gekozen .pk-titel > span:first-child::before {
  opacity: 1; border-color: transparent; background-color: var(--ok);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.2 12.5l3.9 3.9 7.7-8.4' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pakket-kaart.pk-top.gekozen .pk-band-titel::before {
  background-color: #34B27C; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Hoofdaanbod: gekleurde kop met de prijs, daaronder wat u krijgt. */
.pakket-kaart.pk-top { border-color: var(--primary); }
.pk-band {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  background: var(--primary); color: #fff; padding: 0.7rem 1.05rem;
}
.pk-band-titel { font-weight: 700; font-size: 1.05rem; }
.pk-band .pakket-tag { margin-right: auto; }
/* De doorgehaalde prijs is wat dezelfde twee brieven los kosten, geen eerdere
   prijs van dit pakket. Het opsommingspunt eronder zegt dat er expliciet bij,
   en schermlezers krijgen het via .vh mee, want een doorhaling wordt niet
   voorgelezen. */
.pk-band-prijzen { display: flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; }
.pk-band-oud { text-decoration: line-through; opacity: 0.72; font-weight: 600; font-size: 0.95rem; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pk-band-prijs { white-space: nowrap; font-weight: 700; font-size: 1.25rem; }
.pk-body { display: block; padding: 0.85rem 1.05rem 0.95rem; }
.pk-punt {
  position: relative; display: block; padding-left: 1.6rem; margin-bottom: 0.42rem;
  font-size: 0.92rem; line-height: 1.45;
}
.pk-punt:last-child { margin-bottom: 0; }
.pk-punt::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.32em;
  width: 0.72rem; height: 0.38rem; border-left: 2.5px solid var(--ok);
  border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg);
}

/* Alternatief eronder: zelfde informatie, rustiger opmaak. */
.pakket-kaart.pk-onder { margin-top: 0.7rem; padding: 0.85rem 1.05rem 0.9rem; }
.pakket-kaart .pk-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-weight: 700; }
.pakket-kaart .pk-prijs { white-space: nowrap; font-size: 1.05rem; color: var(--primary); }
.pakket-kaart .pk-uitleg { display: block; font-size: 0.88rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.45; }

.pakket-tag {
  background: var(--accent); color: #fff; white-space: nowrap;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.16rem 0.6rem; border-radius: var(--radius-pill);
}
@media (max-width: 600px) {
  .pk-band { gap: 0.35rem 0.5rem; padding: 0.65rem 0.9rem; }
  .pk-band-titel { font-size: 1rem; width: 100%; }
  .pk-band-prijs { font-size: 1.15rem; }
  .pk-band-oud { font-size: 0.9rem; }
  .pk-band-prijzen { gap: 0.35rem; }
  .pk-body { padding: 0.8rem 0.9rem 0.85rem; }
  .pakket-kaart.pk-onder { padding: 0.8rem 0.9rem 0.85rem; }
  .pk-punt { font-size: 0.9rem; padding-left: 1.45rem; }
}

/* --------------------------------------------------------------------------
   Doorverwijzing naar HulpBijFraude.nl
   Een brief werkt alleen tegen een aanspreekbare partij. Is die er niet, dan
   sturen we de bezoeker door in plaats van hem een onbruikbaar document te
   verkopen. Bewust in de urgent-tint: opvallend, maar geen foutmelding.
   -------------------------------------------------------------------------- */
.fraude-wijzer {
  background: var(--urgent-bg); border: 1px solid #F0CFA8; border-left: 4px solid var(--urgent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: 1rem 1.2rem; margin: 1.1rem 0;
  font-size: 0.94rem; line-height: 1.55;
}
.fraude-wijzer > * + * { margin-top: 0.55rem; }
.fraude-wijzer .fw-kop { font-weight: 700; color: var(--urgent); font-size: 0.98rem; }
.fraude-wijzer .fw-link {
  display: inline-block; font-weight: 700; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px;
}
.fraude-wijzer .fw-link:hover { color: var(--primary-light); }
.fraude-wijzer .fw-klein { font-size: 0.85rem; color: var(--text-muted); }

/* Sluitregel in de footer, op elke pagina. */
.footer-zuster {
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Briefweergave (leverpagina en voorbeelden)
   -------------------------------------------------------------------------- */
.brief-vel {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 2.6rem 2.8rem; max-width: 760px;
  font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.voorbeeld-wrap { position: relative; margin-top: 1.2rem; }
.voorbeeld-wrap .stempel {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--warn-bg); color: var(--warn); border: 1px solid #E8D9A0;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
}

.stappenplan { margin-top: 2rem; }
.stappenplan .stap-item {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius-m); padding: 1rem 1.2rem; margin-bottom: 0.7rem;
}
.stappenplan .stap-item h4 { color: var(--primary); font-size: 1.02rem; }
.stappenplan .stap-item p { font-size: 0.94rem; color: var(--text-muted); margin-top: 0.2rem; }
.badge { display: inline-block; padding: 0.14rem 0.65rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 0.5rem; }
.badge-nu { background: var(--urgent-bg); color: var(--urgent); }
.badge-snel { background: var(--warn-bg); color: var(--warn); }
.badge-later { background: var(--ok-bg); color: var(--ok); }

.status-kaart {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 2.2rem; max-width: 640px; text-align: center; margin: 3rem auto;
}
.status-kaart h1 { color: var(--primary); font-size: 1.55rem; margin-bottom: 0.6rem; }
.status-kaart p { color: var(--text-muted); max-width: 48ch; margin: 0 auto 0.4rem; }

/* --------------------------------------------------------------------------
   Zaakpagina's
   -------------------------------------------------------------------------- */
.zaak-hero { padding: 2.8rem 0 1.6rem; }
.zaak-hero h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); color: var(--primary); max-width: 26ch; line-height: 1.2; }
.zaak-hero .sub { max-width: 66ch; color: var(--text-muted); margin-top: 0.8rem; font-size: 1.1rem; }
.kruimel { font-size: 0.88rem; color: var(--text-muted); padding-top: 1.2rem; }
.kruimel a { color: var(--text-muted); }
.inhoud { max-width: 720px; }
.inhoud h2 { color: var(--primary); font-size: 1.35rem; margin: 1.8rem 0 0.6rem; border-left: 5px solid var(--primary); padding-left: 1rem; }
.inhoud p { margin-bottom: 0.8rem; }
.inhoud ul { margin: 0 0 0.9rem 1.3rem; }
.inhoud li { margin-bottom: 0.35rem; }

/* Links uitlijnen met .inhoud, dat ook 720px breed is. Met 'margin: auto'
   werd dit blok gecentreerd in de container van 1140px en stond het op
   brede schermen 210px naar rechts ten opzichte van de tekst eromheen. */
.cta-balk {
  background: var(--primary); border-radius: var(--radius); color: #fff;
  padding: 1.8rem 1.8rem 1.7rem; margin: 2.2rem 0; max-width: 720px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem;
}
.cta-balk .cb-tekst h2 { color: #fff; font-size: 1.25rem; border: none; padding: 0; margin: 0 0 0.2rem; }
.cta-balk .cb-tekst p { color: #CDDCEC; margin: 0; font-size: 0.97rem; }
/* Knoppenpaar gecentreerd in de cta-balk, in dezelfde maat als het paar in de
   bovenbalk, zodat de oranje knoppen boven en onder exact uitlijnen. */
.cta-balk .cta-knoppen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.55rem; }
.cta-balk .cta-knoppen .knop { white-space: nowrap; padding: 0.55rem 1.15rem; font-size: 0.97rem; min-height: 0; }
@media (max-width: 640px) {
  .cta-balk .cta-knoppen { width: 100%; }
  .cta-balk .cta-knoppen .knop { flex: 1 1 100%; white-space: normal; }
}
/* Secundaire knop op de blauwe balk: rustige omlijning, wit */
.knop-op-blauw { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,0.55); font-weight: 700; }
.knop-op-blauw:hover { background: rgba(255,255,255,0.14); border-color: #fff; transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Interactieve rekenhulp op de zaakpagina's (gratis check)
   -------------------------------------------------------------------------- */
.rekenhulp { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.rekenhulp h3 { font-size: 1.15rem; color: var(--primary); margin: 0 0 0.2rem; border: none; padding: 0; }
.rekenhulp .rh-intro { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 0.4rem; }
.rekenhulp .cveld { margin: 0.9rem 0; }
.rekenhulp .cveld label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }
.rekenhulp .cveld .hint { font-weight: 400; color: var(--text-muted); font-size: 0.85rem; }
.rekenhulp .euro-inp { position: relative; max-width: 220px; }
.rekenhulp .euro-inp span { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.rekenhulp .euro-inp input { width: 100%; padding: 0.6rem 0.8rem 0.6rem 1.6rem; border: 1.5px solid var(--border); border-radius: var(--radius-s); font-family: inherit; font-size: 1rem; }
.rekenhulp input[type="date"] { max-width: 240px; padding: 0.6rem 0.8rem; border: 1.5px solid var(--border); border-radius: var(--radius-s); font-family: inherit; font-size: 1rem; }
.rekenhulp input[type="text"], .rekenhulp input[type="number"] { max-width: 240px; padding: 0.6rem 0.8rem; border: 1.5px solid var(--border); border-radius: var(--radius-s); font-family: inherit; font-size: 1rem; }
.rekenhulp input[type="text"]:focus, .rekenhulp input[type="number"]:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(46,109,173,0.15); }
.rekenhulp .rh-tweekolom { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.rekenhulp .rh-tweekolom input { flex: 1 1 200px; max-width: none; }
.rekenhulp .euro-inp input:focus, .rekenhulp input[type="date"]:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(46,109,173,0.15); }
.rekenhulp .keuzerij { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.rekenhulp .chip { border: 1.5px solid var(--border); background: #fff; border-radius: var(--radius-pill); padding: 0.4rem 0.95rem; cursor: pointer; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.rekenhulp .chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: #fff; }
.rekenhulp .verdict { border-radius: var(--radius-m); padding: 1.1rem 1.2rem; margin-top: 1.1rem; border: 1px solid; }
.rekenhulp .verdict.ok { background: var(--ok-bg); border-color: #BEE3CF; }
.rekenhulp .verdict.warn { background: var(--urgent-bg); border-color: #F3C89B; }
.rekenhulp .verdict .vkop { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; margin-bottom: 0.3rem; }
.rekenhulp .verdict.ok .vkop { color: var(--ok); }
.rekenhulp .verdict.warn .vkop { color: var(--urgent); }
.rekenhulp .verdict table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.95rem; }
.rekenhulp .verdict td { padding: 0.25rem 0; border-bottom: 1px dashed rgba(0,0,0,0.12); }
.rekenhulp .verdict td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rekenhulp .verdict p { margin: 0; font-size: 0.95rem; }
.rekenhulp .rh-caveat { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.7rem; }

.lees-ook { max-width: 720px; margin: 0 auto 1rem; font-size: 0.95rem; font-weight: 600; }
.lees-ook a { color: var(--primary); }
.usp-terug { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.usp-terug a { color: var(--primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer.site-footer { background: var(--primary-dark); color: #C9D6E4; margin-top: 3.5rem; padding: 2.4rem 0 2rem; font-size: 0.93rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 1.6rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
@media (min-width: 700px) { .footer-grid:has(> div:nth-child(4)) { grid-template-columns: 1.7fr 1fr 1.3fr 1fr; } }
.site-footer h4 { color: #fff; font-size: 0.98rem; margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.3rem; }
.footer-onder { border-top: 1px solid rgba(255,255,255,0.18); margin-top: 1.8rem; padding-top: 1.1rem; font-size: 0.86rem; color: #9FB3C8; max-width: 90ch; }

/* --------------------------------------------------------------------------
   Print: alleen de brief, als net document
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; font-size: 12pt; }
  .nav, .site-footer, .stappenplan, .niet-printen, .voortgang, .flow-kop { display: none !important; }
  .brief-vel { border: none; box-shadow: none; padding: 0; max-width: 100%; border-radius: 0; }
  .container { max-width: 100%; padding: 0; }
}

@media (max-width: 600px) {
  .flow-paneel { padding: 1.2rem; }
  .brief-vel { padding: 1.4rem 1.2rem; }
  .cta-balk { padding: 1.2rem; }
}

/* --------------------------------------------------------------------------
   Bewerkbare brief op de leverpagina
   -------------------------------------------------------------------------- */
.brief-vel.bewerkbaar { cursor: text; }
.brief-vel.bewerkbaar:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-light); }
.bewerk-hint { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.5rem; max-width: 760px; }
.brief-acties {
  max-width: 760px; margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.brief-acties .knop { flex: 0 1 auto; padding: 0.62rem 1.05rem; font-size: 0.95rem; text-align: center; }
.brief-acties .knop-rustig:disabled { background: transparent; border-color: var(--border); color: var(--text-muted) !important; cursor: not-allowed; }
.brief-acties .knop-rustig:disabled:hover { background: transparent; transform: none; border-color: var(--border); }
.mini-melding { display: block; max-width: 760px; margin-top: 0.6rem; font-weight: 600; font-size: 0.9rem; }
.aanpas-blok {
  max-width: 760px; margin-top: 1.4rem; padding: 0.9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.94rem; color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Feiten en onderbouwing met externe cijfers (WODC)
   -------------------------------------------------------------------------- */
.feit-kaart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.feit-getal { display: block; font-size: 2.3rem; font-weight: 700; color: var(--accent); line-height: 1; }
.feit-kaart p { margin: 0.5rem 0 0; font-size: 0.96rem; color: var(--text-muted); }
.bron-regel { margin-top: 1.1rem; font-size: 0.84rem; color: var(--text-muted); }

/* Compacte, gebronde feitnoot binnen de prose van een zaakpagina */
.feitnoot {
  background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--primary);
  border-radius: var(--radius-m); padding: 0.9rem 1.1rem; margin: 0.2rem 0 1.6rem; font-size: 0.98rem;
}
.feitnoot p { margin: 0; }
.feitnoot strong { color: var(--accent); }
.feitnoot .bron { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); }

/* ==========================================================================
   Blok 2 · mobiel en eerste indruk (28 september 2026)
   Aanvullingen op het bovenstaande; bewust onderaan zodat ze de bestaande
   regels overschrijven zonder dat daar iets aan veranderd hoeft te worden.
   ========================================================================== */

/* M2 · De plakkende balk was op mobiel 124 tot 140 px hoog, omdat de knoppen
   naar een tweede regel vielen. Nu één regel: logo, hoofdknop, menuknop. De
   tweede knop en de tekstlinks verhuizen naar het uitklapmenu. */
@media (max-width: 640px) {
  .nav .nav-inner { flex-wrap: nowrap; gap: 0.5rem; padding: 0.5rem 0; align-items: center; }
  .nav .logo-woord { font-size: 1.05rem; }
  .nav .logo img { width: 26px; height: 26px; }
  .nav .nav-links { gap: 0.4rem; margin-left: auto; }
  /* De actieknoppen blijven op dezelfde regel staan in plaats van een eigen
     rij te krijgen. De tweede, rustige knop verdwijnt uit de balk: die staat
     verderop op de pagina in het blauwe blok, waar hij beter tot zijn recht
     komt dan geknepen naast de hoofdknop. */
  /* Menuknop helemaal rechts, zoals gebruikelijk; de actieknop ervoor. */
  .nav .nav-links { order: 3; }
  .nav .nav-acties { order: 2; flex: 0 0 auto; padding-bottom: 0; }
  .nav .nav-acties .knop {
    flex: none; white-space: nowrap; line-height: 1.4;
    padding: 0.5rem 0.85rem; font-size: 0.9rem; min-height: 40px;
  }
  .nav .nav-acties .knop-rustig { display: none; }
  .nav-js.menu-open .nav-inner { align-items: flex-start; }
  .nav-js.menu-open .logo { padding-top: 0.35rem; }
}
/* Onder 400 px is de ruimte echt op: dan alleen het beeldmerk naast de knop. */
@media (max-width: 400px) {
  .nav .logo-woord { font-size: 0.98rem; }
  .nav .nav-acties .knop { padding: 0.5rem 0.7rem; font-size: 0.86rem; }
}

/* M3 · De antwoordsamenvatting op de afrekenstap bleef tweekoloms, waardoor
   een vraag van zes woorden zich in 38% van 390 px moest persen. */
@media (max-width: 600px) {
  .controle-blok dl { grid-template-columns: 1fr; gap: 0 0; }
  .controle-blok dt { font-size: 0.86rem; margin-top: 0.55rem; }
  .controle-blok dt:first-of-type { margin-top: 0; }
  .controle-blok dd { margin-left: 0; }
}

/* C7 · De tweede route uit de hero was een link van 14 px met een
   aanraakhoogte van 20 px, terwijl de zakenlijst de best begrepen ingang is. */
.cta-rij { display: flex; flex-wrap: wrap; gap: 0.7rem 0.9rem; align-items: stretch; }
.knop-hero-alt {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; padding: 0.95rem 1.5rem; line-height: 1.3;
}
@media (max-width: 560px) {
  .cta-rij { flex-direction: column; }
  .cta-rij .knop { width: 100%; }
}

/* C6 · Op de zaakpagina's stond de eerste echte keuze pas na 2850 px. Dit
   blok staat halverwege, direct na de uitleg over uw rechten. */
.tussen-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem;
  justify-content: space-between;
  background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius);
  padding: 1.1rem 1.4rem; margin: 2rem 0;
}
.tussen-cta p { margin: 0; font-weight: 600; color: var(--primary); font-size: 1.02rem; max-width: 40ch; }
.tussen-cta p small { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.88rem; margin-top: 0.15rem; }
.tussen-cta .knop { flex: none; }
@media (max-width: 560px) {
  .tussen-cta { padding: 1rem 1.1rem; }
  .tussen-cta .knop { width: 100%; }
}

/* M4 · De voorbeeldbrief is op mobiel ruim 900 px hoog. Ingeklapt tonen we de
   eerste regels met een vervaging eronder; de knop vouwt hem helemaal open.
   Zonder JS blijft de brief gewoon volledig zichtbaar. */
.voorbeeld-wrap.inklapbaar .brief-vel { max-height: 22rem; overflow: hidden; }
.voorbeeld-wrap.inklapbaar.open .brief-vel { max-height: none; }
.voorbeeld-wrap.inklapbaar::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 3.4rem; height: 5rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  border-radius: 0 0 var(--radius) var(--radius); pointer-events: none;
}
.voorbeeld-wrap.inklapbaar.open::after { display: none; }
.brief-meer {
  display: block; width: 100%; margin-top: 0.7rem;
  background: none; border: 1.5px solid var(--primary); border-radius: var(--radius-pill);
  padding: 0.65rem 1rem; font: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--primary); cursor: pointer; min-height: 44px;
}
.brief-meer:hover { background: var(--surface-hover); }

/* M1 · De zakenlijst was op mobiel 4345 px lang: zestien kaarten die er
   allemaal hetzelfde uitzien. Nu vier groepen met een kop, een zoekveld
   erboven, en op mobiel compacte regels in plaats van kaarten. */
.zoek-rij { margin: 0 0 1.6rem; position: relative; }
.zoek-label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.zoek-rij input {
  width: 100%; max-width: 30rem; padding: 0.8rem 1rem 0.8rem 2.6rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  font: inherit; font-size: 1rem; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6475' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 0.85rem center / 1.1rem 1.1rem;
}
.zoek-rij input:focus { border-color: var(--primary-light); outline: 2px solid rgba(46,109,173,.25); }
.zoek-uitslag { font-size: 0.92rem; color: var(--text-muted); margin: 0.6rem 0 0; }
.zaak-groep { margin-top: 2rem; }
.zaak-groep:first-of-type { margin-top: 0; }
.zaak-groep > h3 {
  font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); font-weight: 700; margin-bottom: 0.9rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.zaak-groep[hidden] { display: none; }

@media (max-width: 700px) {
  .zaak-groep .grid { display: block; }
  .zaak-kaart {
    display: grid; grid-template-columns: 2rem 1fr auto; align-items: start;
    gap: 0.2rem 0.85rem; padding: 0.85rem 1rem; margin-bottom: 0.55rem;
  }
  .zaak-kaart .zk-icoon { grid-row: 1 / span 2; margin: 0.1rem 0 0; }
  .zaak-kaart .zk-icoon svg { width: 22px; height: 22px; }
  .zaak-kaart h3 { grid-column: 2; font-size: 1rem; }
  .zaak-kaart p {
    grid-column: 2; margin-top: 0.15rem; font-size: 0.88rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .zaak-kaart .zk-voet { grid-column: 3; grid-row: 1; display: block; text-align: right; }
  .zaak-kaart .zk-voet .zk-pijl { margin: 0; font-size: 1.2rem; }
  .zaak-kaart .zk-voet .zk-pijl .pijl-woorden { display: none; }
  .zaak-kaart .zk-prijs { display: none; }
}

/* C1 · Optionele velden achter een uitklapregel, en postcode en woonplaats
   als twee invoervelden in plaats van één. */
.veld .veld-kop { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 1rem; }
.pc-rij { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.pc-deel { display: flex; flex-direction: column; flex: 0 0 8.5rem; }
.pc-deel.pc-plaats { flex: 1 1 11rem; }
.pc-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 400; margin-bottom: 0.2rem; }
.pc-deel input { width: 100%; }
#in_eigen_pcplaats_pc { text-transform: uppercase; }

.extra-velden { margin: 0 0 1.15rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.extra-velden > summary {
  cursor: pointer; font-weight: 600; color: var(--primary); font-size: 0.98rem;
  list-style: none; padding: 0.35rem 0; min-height: 30px;
}
.extra-velden > summary::-webkit-details-marker { display: none; }
.extra-velden > summary::before {
  content: "+"; display: inline-block; width: 1.2rem; font-weight: 700; font-size: 1.1rem;
}
.extra-velden[open] > summary::before { content: "\2212"; }
.extra-velden > summary span { font-weight: 400; color: var(--text-muted); font-size: 0.9rem; }
.extra-velden > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.extra-velden > .hulp { margin: 0.2rem 0 0.9rem 1.2rem; }
.extra-velden[open] > summary { margin-bottom: 0.2rem; }

/* ==========================================================================
   Blok 3 · leesbaarheid, opruimen en rust (28 september 2026)
   ========================================================================== */

/* T3 · Ondergrens van 14 px voor alles wat een zin is. Korte labels en
   badges mogen kleiner blijven: die lees je niet, die herken je. */
.bron, .bron-regel, .privacynoot, .usp-eyebrow, .usp-disclaimer, .fw-klein,
.prijs-keuze-noot, .mini, .hint, .zoek-uitslag, .pc-label,
.extra-velden > summary span, .veld .hulp, .controle-blok dt {
  font-size: 0.875rem;
}
.prijs-tabel tfoot small, .prijs-tabel small { font-size: 0.95em; }
@media (max-width: 560px) {
  .prijs-tabel { font-size: 0.875rem; }
  .prijs-tabel th, .prijs-tabel td { padding: 0.45rem 0.3rem; }
}
/* De doorgestreepte prijs is een verkoopargument en stond op 10,7 px, het
   kleinste element van de pagina. Nu naast de nieuwe prijs leesbaar. */
.prijs-tabel .pt-voordeel small { display: inline; font-size: 0.95em; font-weight: 600; text-decoration: line-through; opacity: 0.75; }
.pk-band-oud { font-size: 1rem; }
@media (max-width: 560px) { .pk-band-oud { font-size: 0.95rem; } }
.zaak-groep > h3 { font-size: 0.9rem; }

/* T4 · Wie in zijn systeem heeft staan dat beweging hem hindert, krijgt geen
   beweging. Alles blijft werken, het gaat alleen in één keer. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .knop:hover, .zaak-kaart:hover { transform: none; }
}

/* C5 · De prijs stond zestien keer op de homepage, één keer per kaart, lang
   voordat iemand het complete aanbod had gezien. Nu één regel onder de lijst. */
.prijs-noot {
  margin: 1.6rem 0 0; font-size: 0.95rem; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 1rem;
}
.prijs-noot b { color: var(--text); font-weight: 600; }

/* C4 · Sociaal bewijs in de hero. Verschijnt alleen als de server een getal
   teruggeeft dat groot genoeg is om iets te betekenen. */
.sociale-proof {
  margin: 1rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--primary);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.sociale-proof::before {
  content: ""; width: 1.1rem; height: 1.1rem; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D6A4F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5l5 5L21 5.5'/%3E%3C/svg%3E") no-repeat center / contain;
}