/* ============================================================
   DE WERKBANK — designsysteem Eikos.nl
   Warm industrieel vakmanschap. Koper = printplaatbanen.
   Afgeleid van build/design-preview/preview.html (goedgekeurd door Yke).
   Alle kleuren als CSS custom properties op één plek (DESIGN.md).
   ============================================================ */

/* --- Ontwerptokens (licht) --- */
:root {
  --papier:      #F7F6F3;
  --inkt:        #1E2A2B;
  --spar:        #24473F;
  --koper:       #A05520;
  --wit:         #FFFFFF;
  --koper-tint:  #E8D5C4;
  --hulplijn:    #C3CCC7;

  --bg:          var(--papier);
  --surface:     var(--wit);
  --surface-2:   #FBFAF8;
  --surface-3:   #ECE8E1;
  --text:        var(--inkt);
  --text-muted:  #556260;
  --accent:      var(--koper);
  --accent-ink:  #8A4718;
  --accent-on:   var(--wit);
  --hero-bg:     var(--spar);
  --hero-text:   var(--papier);
  --hero-muted:  #B9C9C2;
  --line:        var(--hulplijn);
  --line-soft:   #E4E6E2;

  --ok:      #2E6B4F;  --ok-bg:   #E7F1EB;
  --warn:    #9A6410;  --warn-bg: #F6ECD6;
  --err:     #A3352B;  --err-bg:  #F6E4E1;
  --info:    #2C5A66;  --info-bg: #E3EDEF;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --shadow-card: 0 1px 2px rgba(30,42,43,.05), 0 8px 24px rgba(30,42,43,.06);
  --shadow-lift: 0 2px 6px rgba(30,42,43,.08), 0 18px 40px rgba(30,42,43,.10);
  --maxw: 1100px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* --- Ontwerptokens (donker) — systeemvoorkeur --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14211E;
    --surface:     #1C302B;
    --surface-2:   #172723;
    --surface-3:   #223A33;
    --text:        var(--papier);
    --text-muted:  var(--hero-muted); /* 4-9-2026: één zachte tekstkleur in het donker (Yke) */
    --accent-ink:  #D08A4C;
    --accent-on:   #FFFFFF;
    --hero-bg:     #0E1A17;
    --hero-muted:  #9DB0A8;
    --line:        #35463F;
    --line-soft:   #26362F;

    --ok:  #7FC7A2; --ok-bg:  #17342A;
    --warn:#D6A24A; --warn-bg:#2A2210;
    --err: #E39189; --err-bg: #3A211E;
    --info:#8BC0CC; --info-bg:#173137;

    --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.30);
    --shadow-lift: 0 2px 8px rgba(0,0,0,.30), 0 22px 46px rgba(0,0,0,.40);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  color: var(--text);
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.015em;
}

p { margin: 0; }
a { color: var(--accent-ink); }
img { max-width: 100%; height: auto; }

/* zichtbare focusringen overal (a11y, DESIGN.md) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--koper);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* skip-link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--koper); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius-m) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Layout-hulp --- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.eyebrow {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 500; margin: 0 0 14px;
}
.mono { font-family: "DM Mono", ui-monospace, monospace; }
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   NAVIGATIE
   ============================================================ */
.site-nav {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 24px; background: var(--hero-bg); color: var(--hero-text);
}
.site-nav__inner { max-width: var(--maxw); margin-inline: auto; width: 100%; display: flex; align-items: center; gap: 20px; }
.site-nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 19px;
  letter-spacing: -.02em; color: var(--hero-text); text-decoration: none;
}
.site-nav__brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--koper); box-shadow: 0 0 0 3px rgba(160,85,32,.25); }
.site-nav__links { margin-left: auto; display: flex; gap: 22px; font-size: 15px; align-items: center; }
.site-nav__links a { color: var(--hero-muted); text-decoration: none; }
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--hero-text); }
/* Toegankelijkheid (DESIGN.md, harde eis): aanraakvlak ≥44×44px — het publiek
   is deels ouder. De tekstregel is 24px (15px × de regelhoogte 1,6 van body),
   dus 11px padding erbij boven en onder plus een even grote negatieve marge:
   de tekst blijft op zijn plek, alleen het klik-/tikvlak wordt groter. De CTA
   (.site-nav__cta) is al .btn en dus al ≥48px, die blijft hierbuiten.
   Regressietest: site/private/tests.php, "aanraakvlak voetlinks en menu". */
.site-nav__links a:not(.site-nav__cta) { display: inline-flex; align-items: center; padding-block: 11px; margin-block: -11px; }
.site-nav__cta { margin-left: 6px; }

/* De uitklap "Reparaties" in de navigatie (punt 58). <details>/<summary> en geen
   hover-menu: hover bestaat niet op een aanraakscherm, en een JavaScript-menu kan
   niet — de CSP laat geen inline script toe. Zo doet de browser het zelf, mét
   toetsenbord en schermlezer. */
.nav-uitklap { position: relative; }
.nav-uitklap > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding-block: 11px; margin-block: -11px;
  cursor: pointer; list-style: none;
  color: var(--hero-muted); font-size: 15px;
}
.nav-uitklap > summary::-webkit-details-marker { display: none; }
.nav-uitklap > summary:hover, .nav-uitklap[open] > summary { color: var(--hero-text); }
.nav-uitklap > summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-uitklap[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-uitklap > ul {
  position: absolute; z-index: 30; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 280px; margin: 0; padding: 8px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-lift);
}
.nav-uitklap > ul a {
  display: block; min-height: 44px; padding: 11px 12px; border-radius: var(--radius-s);
  color: var(--text); font-size: 15.5px; text-decoration: none;
}
.nav-uitklap > ul a:hover { background: var(--surface-2); color: var(--accent-ink); }

@media (max-width: 760px) {
  /* De uitklap gaat mee met de andere menulinks; de footer houdt de lijst. */
  .site-nav__links a:not(.site-nav__cta), .nav-uitklap { display: none; }
  .site-nav__links { gap: 12px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { background: var(--hero-bg); color: var(--hero-text); position: relative; overflow: hidden; }
.hero__grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  padding: 68px 24px 76px;
}
.hero__eyebrow {
  font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--koper-tint); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
}
.hero__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--koper); }
/* Kop in één kleur: heel beige (Yke 4-9-2026: "2 kleuren in de kop mag wel beige worden"). */
.hero h1 { color: var(--koper-tint); font-size: clamp(34px, 5vw, 54px); font-weight: 700; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--koper-tint); }
.hero__sub { margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--hero-muted); max-width: 44ch; }
.hero__cta-row { margin-top: 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* Aanmelden óf appen (punt 104, 8-9-2026): sinds er twee gelijkwaardige knoppen
   naast elkaar staan, moeten ze op een telefoon (375px) ónder elkaar komen en
   niet half naast elkaar afbreken. Zelfde aanpak als .volg-knoppen verderop.
   De klasse wordt ook gebruikt door de knoppenrij op de landings- en de
   monteurspagina, zodat die stapeling maar op één plek geregeld is. */
@media (max-width: 560px) {
  .hero__cta-row .btn { flex: 1 1 100%; }
}
/* vakmanschapsregel onder de subkop: het vertrouwenssignaal, bewust rustiger dan de subkop */
.hero__vak { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--hero-muted); max-width: 46ch; border-left: 2px solid var(--koper); padding-left: 14px; }
.hero__meta { margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 14.5px; color: var(--hero-muted); }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 16px; height: 16px; color: var(--koper); flex: 0 0 auto; }

.pcb {
  border-radius: var(--radius-l); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  aspect-ratio: 5 / 4; background: #12211C;
}
.pcb svg { width: 100%; height: 100%; display: block; }
.pcb__caption {
  margin-top: 12px; font-family: "DM Mono", monospace; font-size: 12.5px;
  color: var(--hero-muted); display: flex; align-items: center; gap: 8px;
}
.pcb__caption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--koper); box-shadow: 0 0 8px var(--koper); }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px 56px; }
  .hero__figure { order: -1; }
}

/* ============================================================
   KNOPPEN
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--radius-m);
  font-family: "DM Sans", sans-serif; font-size: 16.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .12s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--koper); color: var(--accent-on); }
.btn--primary:hover { background: #8f4a1b; }
.btn--spar { background: transparent; color: var(--spar); border-color: var(--spar); }
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); }
.hero .btn--ghost { background: transparent; color: var(--hero-text); border-color: rgba(233,213,196,.4); }
.hero .btn--ghost:hover { border-color: var(--koper-tint); background: rgba(255,255,255,.04); }
.btn--onkoper { background: var(--wit); color: #7a3d13; }
.btn--onkoper:hover { background: var(--papier); }
/* Onomkeerbaar en met gevolgen voor de klant (afwijzen + mail). Alleen in het
   bevestigingspaneel, nooit als eerste klik. */
.btn--gevaar { background: var(--err); color: var(--wit); border-color: var(--err); }
.btn--gevaar:hover { background: #8d2d24; border-color: #8d2d24; }
.btn--groot { min-height: 54px; font-size: 17.5px; padding: 14px 26px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
@media (prefers-color-scheme: dark) {
  .btn--primary:hover { background: #b3611f; }
  .btn--spar { color: var(--papier); border-color: #4a6b62; }
  /* --err is in donkere modus juist licht; wit erop haalt geen AA (2,4:1). */
  .btn--gevaar { color: var(--bg); }
  .btn--gevaar:hover { background: #EBA9A2; border-color: #EBA9A2; }
}

/* ============================================================
   SECTIES (one-pager)
   ============================================================ */
.blok { padding: 68px 0; }
.blok--getint { background: var(--surface-2); border-block: 1px solid var(--line-soft); }
.blok .inner { max-width: 940px; margin-inline: auto; padding-inline: 24px; }
.section-head { margin-bottom: 36px; max-width: 60ch; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; }
/* De .opmaak-variant staat erbij omdat de introtekst uit /beheer komt en dus een
   blok-element moet zijn (zie "OPGEMAAKTE BEHEERTEKST" onderaan); zonder deze
   selector viel de tekst terug op de body-opmaak. */
.section-head p, .section-head .opmaak { margin-top: 12px; color: var(--text-muted); font-size: 17px; }
@media (max-width: 620px) { .blok { padding: 52px 0; } }

/* wel / niet */
.welniet { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.wn-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-l); padding: 28px 26px; box-shadow: var(--shadow-card); }
.wn-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.wn-badge { width: 34px; height: 34px; border-radius: var(--radius-m); display: grid; place-items: center; flex: 0 0 auto; }
.wn-badge svg { width: 19px; height: 19px; }
.wn--wel .wn-badge { background: var(--ok-bg); color: var(--ok); }
.wn--niet .wn-badge { background: var(--err-bg); color: var(--err); }
.wn-card h3 { font-size: 20px; }
.wn-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wn-card li { display: flex; gap: 11px; font-size: 16.5px; line-height: 1.45; }
.wn-card li svg { width: 17px; height: 17px; margin-top: 4px; flex: 0 0 auto; }
.wn--wel li svg { color: var(--ok); }
.wn--niet li svg { color: var(--err); }
/* uitnodiging onder de wél-lijst: de lijst is een greep, geen grens */
.wn-card__slot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 16px; line-height: 1.5; color: var(--text-muted); }
.wn-note {
  grid-column: 1 / -1; background: var(--koper-tint); color: #5c3413;
  border-radius: var(--radius-m); padding: 15px 20px; font-size: 15.5px;
  display: flex; gap: 11px; align-items: flex-start;
}
.wn-note svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent-ink); flex: 0 0 auto; }
/* De tekst is één flex-item naast het icoon, ook met meerdere alinea's of een
   lijstje erin (net als .prijs-note__tekst). min-width:0 laat lange woorden afbreken. */
.wn-note__tekst { min-width: 0; }
@media (prefers-color-scheme: dark) { .wn-note { background: var(--surface-3); color: var(--papier); } }
@media (max-width: 620px) { .welniet { grid-template-columns: 1fr; } }

/* werkwijze — koperbaan */
.stappen { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
.trace { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.trace--v { display: none; }
.trace svg { width: 100%; height: 100%; display: block; overflow: visible; }
.stap { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-l); padding: 24px 22px 22px; box-shadow: var(--shadow-card); }
.stap__num {
  font-family: "DM Mono", monospace; font-size: 13px; font-weight: 500; color: var(--accent-on);
  background: var(--koper); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 16px;
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--line);
}
.stap h3 { font-size: 18px; margin-bottom: 7px; }
.stap p, .stap .opmaak { font-size: 15px; color: var(--text-muted); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .stap { opacity: 0; transform: translateY(14px); }
  .stap.reveal { animation: stapIn .6s var(--ease) forwards; }
  @keyframes stapIn { to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) {
  .stappen { grid-template-columns: 1fr; gap: 16px; padding-left: 42px; }
  .trace--h { display: none; }
  .trace--v { display: block; left: 0; right: auto; width: 42px; }
}

/* prijzen */
.prijzen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* prijskaart: naam links, bedrag rechts, en daaronder over de volle breedte
   de "niet gelukt"-belofte — die verschilt per categorie */
.prijs { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 16px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: 18px 22px; }
.prijs__naam { font-size: 16.5px; font-weight: 500; }
.prijs__naam small { display: block; color: var(--text-muted); font-size: 13.5px; font-weight: 400; }
/* geen nowrap: prijs_omvormer is vrije tekst en mag afbreken i.p.v. uit de kaart lopen */
.prijs__bedrag { font-family: "DM Mono", monospace; font-size: 19px; font-weight: 500; color: var(--accent-ink); text-align: right; }
/* 16px is de ondergrens uit CLAUDE.md: juist deze zin (wat betaal ik als het
   niet lukt) moet ook voor oudere bezoekers goed leesbaar zijn. Op de homepage
   staat deze klasse sinds punt 131 (11-9-2026) niet meer in de markup — de
   landingspagina's (inc/landingspaginas.php) gebruiken hem nog wél. */
.prijs__nietgelukt { grid-column: 1 / -1; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); font-size: 16px; line-height: 1.55; color: var(--text-muted); }
/* De actieknop naar de prijsindicatie (punt 131, 11-9-2026, drempel verlagen):
   op de homepage komt hier het bedrag niet meer te staan, maar één knop —
   over de volle breedte van de kaart, boven de link naar de landingspagina.
   .btn is display:inline-flex en rekt dus niet vanzelf mee met de grid-cel. */
.prijs__actie { grid-column: 1 / -1; margin-top: 10px; }
/* De link naar de landingspagina van deze categorie (punt 58). Aanraakvlak ≥44px,
   net als de menulinks: het publiek is deels ouder. */
.prijs__meer {
  grid-column: 1 / -1; display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 2px; color: var(--accent-ink); font-size: 16px; font-weight: 600; text-decoration: none;
}
.prijs__meer:hover { text-decoration: underline; }
/* De regel met de vijf landingspagina's onder de wél/niet-kaarten. */
.welniet__meer { grid-column: 1 / -1; margin: 4px 0 0; font-size: 16px; color: var(--text-muted); line-height: 2; }
.welniet__meer a { color: var(--accent-ink); }

.prijs-note { grid-column: 1 / -1; font-size: 15px; color: var(--text-muted); display: flex; gap: 10px; align-items: flex-start; padding-top: 6px; }
.prijs-note svg { width: 17px; height: 17px; margin-top: 3px; color: var(--accent-ink); flex: 0 0 auto; }
/* De tekst is één flex-item naast het icoon, ook als er meerdere alinea's of een
   lijstje in staan. min-width:0 laat lange woorden afbreken i.p.v. uitlopen. */
.prijs-note__tekst { min-width: 0; }
/* Bij een oneven aantal categorieën blijft de laatste kaart op een halve rij
   staan met een gat ernaast. Laat hem dan de volle breedte pakken. index.php zet
   de klasse zelf, op basis van het aantal categorieën — bewust niet met
   :last-of-type/:nth-of-type, want die tellen op elementtype en gingen daardoor
   stuk zodra een buurelement in de grid van type veranderde. */
.prijzen-grid .prijs--breed { grid-column: 1 / -1; }
@media (max-width: 620px) { .prijzen-grid { grid-template-columns: 1fr; } }
.merkregel { margin-top: 22px; font-size: 15px; color: var(--text-muted); }
/* tweede tempo (zakelijk) onder de werkwijze-intro */
.tempo { margin-top: 10px; font-size: 16px; color: var(--text-muted); }

/* garantieblok — rustig, één koperaccent, geen kaart */
.garantie { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--koper); border-radius: var(--radius-m); }
.garantie svg { width: 20px; height: 20px; color: var(--accent-ink); flex: 0 0 auto; margin-top: 2px; }
.garantie p { font-size: 15.5px; color: var(--text); line-height: 1.55; }
.garantie strong { font-weight: 600; }

/* rekenvoorbeeld op de monteurspagina — het eerste wat een monteur moet lezen */
.rekenvoorbeeld { margin: 0 0 30px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--koper); border-radius: var(--radius-m); }
.rekenvoorbeeld__vraag { font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--text); margin-bottom: 10px; }
.rekenvoorbeeld p, .rekenvoorbeeld .opmaak { font-size: 16px; color: var(--text-muted); line-height: 1.6; }
/* Een <div> erft de onderrand van .prose p niet; die staat hier zodat de afstand
   tot de btw-regel dezelfde blijft als toen dit nog een <p> was. */
.rekenvoorbeeld .opmaak { margin: 0 0 16px; }
.rekenvoorbeeld__btw { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 15.5px; }

/* versieregel onderaan de algemene voorwaarden — bewust rustiger dan de tekst zelf */
.voorwaarden__versie { margin-top: 8px; font-size: 16px; color: var(--text-muted); font-style: italic; }

/* "In het kort" boven de juridische artikelen: gewone taal, duidelijk afgezet
   tegen de artikelen zelf, met de waarschuwing dat de artikelen leidend zijn. */
.vw-kort { padding: 24px 26px; background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--koper); border-radius: var(--radius-m); }
.vw-kort h2 { margin-top: 0; }
.vw-kort__intro { font-size: 16px; color: var(--text-muted); margin-bottom: 18px; }
.vw-kort__lijst { margin: 0; padding-left: 1.3em; }
.vw-kort__lijst li { margin-bottom: 14px; font-size: 16.5px; line-height: 1.6; }
.vw-kort__lijst li:last-child { margin-bottom: 0; }
.vw-kort__pdf { margin-top: 22px; margin-bottom: 0; }
.vw-scheiding { border: 0; border-top: 1px solid var(--line-soft); margin: 38px 0 30px; }
.vw-slot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 16px; color: var(--text-muted); }
.vw-slot p { margin: 0; }
/* KvK + btw-id: verplicht, maar niet even zwaar als de bedrijfsnaam erboven.
   14px is de ondergrens uit CLAUDE.md; --text-muted haalt 5,9:1 op --papier. */
.vw-slot .vw-slot__formeel { margin-top: 6px; font-size: 14px; color: var(--text-muted); }

/* spoedblok — zelfde rust als het garantieblok; spoed is voorrang, geen levertijdbelofte */
/* Geen koperrand hier: die staat al op het offerte- en garantieblok eronder.
   Drie identieke accenten op rij verzwakken het signatuurelement (DESIGN.md). */
.spoed { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-m); }
.spoed svg { width: 20px; height: 20px; color: var(--accent-ink); flex: 0 0 auto; margin-top: 3px; }
.spoed h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 8px; }
.spoed p, .spoed__tekst { font-size: 16px; color: var(--text-muted); line-height: 1.55; }
.spoed__prijs { margin-top: 8px; color: var(--text); font-weight: 600; }
.spoed__hoe { margin-top: 8px; }

/* offerte-nudge — rustige afsluiter bij de prijzen, spar-outline knop, subtiel koperaccent (geen kaart-op-kaart) */
.offerte { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 22px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--koper); border-radius: var(--radius-m); }
.offerte__tekst { flex: 1 1 340px; }
.offerte h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 8px; }
.offerte p { font-size: 15.5px; color: var(--text-muted); line-height: 1.55; }
.offerte .btn { flex: 0 0 auto; }

/* vertrouwen */
.vertrouwen { display: grid; grid-template-columns: 200px 1fr; gap: 34px; align-items: center; }
.foto-ph {
  aspect-ratio: 1; border-radius: var(--radius-l);
  background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(160,85,32,.06) 11px 12px), var(--surface-3);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-muted); position: relative;
}
.foto-ph__tag { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; position: absolute; bottom: 12px; left: 12px; background: var(--bg); padding: 4px 8px; border-radius: 5px; border: 1px solid var(--line); }
.foto-ph svg { width: 40px; height: 40px; opacity: .5; }
.vertrouwen h2 { font-size: 22px; margin-bottom: 12px; }
.vertrouwen p { color: var(--text-muted); font-size: 16.5px; margin-bottom: 10px; }
.vertrouwen .kvk { font-family: "DM Mono", monospace; font-size: 13.5px; color: var(--text); border: 1px dashed var(--line); display: inline-block; padding: 6px 12px; border-radius: var(--radius-s); margin-top: 6px; }
@media (max-width: 620px) { .vertrouwen { grid-template-columns: 1fr; gap: 22px; } .foto-ph { max-width: 180px; } }

/* contact + dynamisch telefoonnummer */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tel-card { border-radius: var(--radius-l); padding: 24px 26px; border: 1px solid var(--line-soft); background: var(--surface); }
.tel-card__state { display: inline-flex; align-items: center; gap: 9px; font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; }
.tel-card--aan { border-color: color-mix(in srgb, var(--ok) 40%, var(--line-soft)); }
.tel-card--aan .tel-card__state { background: var(--ok-bg); color: var(--ok); }
.tel-card--uit .tel-card__state { background: var(--warn-bg); color: var(--warn); }
.tel-card__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tel-card--aan .tel-card__dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.tel-card h3 { font-size: 15px; color: var(--text-muted); font-weight: 500; font-family: "DM Sans", sans-serif; margin-bottom: 6px; }
.tel-card .nummer { font-family: "DM Mono", monospace; font-size: 26px; font-weight: 500; color: var(--text); letter-spacing: -.01em; text-decoration: none; display: inline-block; }
.tel-card .nummer:hover { color: var(--accent-ink); }
.tel-card .melding { font-size: 16px; color: var(--text); line-height: 1.5; }
.tel-card small { display: block; margin-top: 10px; color: var(--text-muted); font-size: 13.5px; }
@media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr; } }

.cta-band { margin-top: 26px; background: var(--koper); border-radius: var(--radius-l); padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.cta-band h3 { color: var(--accent-on); font-size: 22px; max-width: 24ch; }

/* ============================================================
   SUBPAGINA'S (verzenden, monteurs, privacy)
   ============================================================ */
.pagina-hero { background: var(--hero-bg); color: var(--hero-text); }
.pagina-hero__inner { max-width: var(--maxw); margin-inline: auto; padding: 54px 24px 46px; }
.pagina-hero h1 { color: var(--hero-text); font-size: clamp(30px, 4.4vw, 44px); max-width: 20ch; }
.pagina-hero p, .pagina-hero .opmaak { margin-top: 16px; color: var(--hero-muted); font-size: 18px; max-width: 54ch; }
.prose { max-width: 760px; margin-inline: auto; padding: 56px 24px; }
.prose h2 { font-size: clamp(22px, 3vw, 28px); margin: 40px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; margin: 28px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 9px; }
/* Donker: ÁLLE lopende tekst in dezelfde zachte tint als de hero-intro — niet alleen .prose
   (Yke 4-9-2026, monteurs.php: "hier staan ook nog veel witte teksten"). Koppen blijven papier;
   blokken die hun eigen kleur zetten (.wn-note, knoppen, chips) winnen door specificiteit. */
@media (prefers-color-scheme: dark) {
  main p, main li, main dd, main blockquote, main .opmaak, main .kaart-info, main small { color: var(--hero-muted); }
  main h1, main h2, main h3, main h4 { color: var(--papier); }
}
/* Donker: broodtekst in dezelfde zachte tint als de hero-intro (Yke 4-9-2026: twee
   tekstkleuren op één pagina oogt rommelig; de groene tint wint). Licht blijft inkt op papier:
   daar is de hero-tint onleesbaar op de lichte achtergrond. */
@media (prefers-color-scheme: dark) { .prose p, .prose li { color: var(--hero-muted); } }
.prose a { color: var(--accent-ink); }
.kaart-info {
  background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--koper);
  border-radius: var(--radius-m); padding: 18px 22px; margin: 22px 0; box-shadow: var(--shadow-card);
}
.kaart-info h2, .kaart-info h3 { margin-top: 0; }
/* "Liever langsbrengen?" op verzenden.php werd van h3 h2 (koppenhiërarchie,
   SEO-doorlichting 9-8-2026); zonder deze regel pakt .prose h2 een groter
   lettertype en een andere marge dan de oude .prose h3 had. */
.kaart-info h2 { font-size: 20px; margin-bottom: 10px; }

/* ============================================================
   MELDINGEN / ALERTS
   ============================================================ */
/* 16px en niet 15.5: de harde ondergrens uit DESIGN.md (doelgroep deels ouder).
   Een alert is bovendien lang niet altijd bijzaak — op een ingetrokken offerte is
   deze regel het enige dat er op de klantpagina staat. */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-m); font-size: 16px; line-height: 1.45; border: 1px solid transparent; }
.alert svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }
.alert strong { font-weight: 600; }
.alert--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alert--warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert--err  { background: var(--err-bg);  color: var(--err);  border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.alert--info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
/* De tekst is één flex-item naast het icoon; blok-element, want er kan opgemaakte
   beheertekst in staan (zie .opmaak hieronder). */
.alert__tekst { min-width: 0; }

/* ============================================================
   OPGEMAAKTE BEHEERTEKST
   ============================================================ */
/* Plekken die tekst uit /beheer tonen via opmaak_naar_html(). Daar kan een tweede
   alinea of een lijstje in zitten, dus zo'n plek moet een blok-element zijn en
   nooit een <p> of <span>: een <p> sluit bij het eerste binnenste blok, waarna de
   <ul> en de links géén afstammeling meer zijn van het opmaakblok. Dan vervalt
   bijvoorbeeld .oh-sub a en valt de link terug op een kleur die op de donkere
   onderhoudspagina ver onder het AA-contrast zit.
   Marges hier en niet per plek, zodat alle zes plekken hetzelfde ritme houden. */
.opmaak > :first-child { margin-top: 0; }
.opmaak > :last-child  { margin-bottom: 0; }
.opmaak p  { margin: 0 0 .7em; }
.opmaak ul { margin: 0 0 .7em; padding-left: 1.3em; }
.opmaak li { margin: 0 0 .25em; }
/* Binnen de lange leespagina's houdt beheertekst het rustiger ritme van .prose aan.
   Anders zou de verzendpagina — waar hele alinea's en lijsten uit /beheer komen —
   plots dichter op elkaar staan dan de tekst eromheen. */
.prose .opmaak > :last-child { margin-bottom: 0; }
.prose .opmaak p  { margin: 0 0 16px; }
.prose .opmaak ul { margin: 0 0 18px; padding-left: 22px; }
.prose .opmaak li { margin: 0 0 9px; }

/* ============================================================
   FORMULIER (intake + beheer)
   ============================================================ */
.form-shell { padding: 44px 0 60px; background: var(--bg); }
.form-shell .inner { max-width: 760px; margin-inline: auto; padding-inline: 24px; }

.stepper { position: relative; margin: 0 0 34px; padding: 0; }
.stepper__track { position: absolute; top: 17px; left: 17px; right: 17px; height: 2px; background: var(--line); z-index: 0; }
.stepper__fill { position: absolute; top: 17px; left: 17px; height: 2px; background: var(--koper); z-index: 1; transition: width .3s var(--ease); }
.stepper ol { list-style: none; display: flex; justify-content: space-between; margin: 0; padding: 0; position: relative; z-index: 2; }
.stepper li { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; flex: 1; }
.stepper__pin { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: "DM Mono", monospace; font-size: 14px; font-weight: 500; background: var(--surface); border: 2px solid var(--line); color: var(--text-muted); }
.stepper li[aria-current="step"] .stepper__pin { background: var(--koper); border-color: var(--koper); color: var(--accent-on); box-shadow: 0 0 0 5px color-mix(in srgb, var(--koper) 18%, transparent); }
.stepper li.gedaan .stepper__pin { background: var(--surface); border-color: var(--koper); color: var(--accent-ink); }
.stepper__label { font-size: 13px; color: var(--text-muted); line-height: 1.3; max-width: 12ch; }
.stepper li[aria-current="step"] .stepper__label { color: var(--text); font-weight: 600; }
@media (max-width: 620px) { .stepper__label { display: none; } }

.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 34px 34px 32px; box-shadow: var(--shadow-card); }
@media (max-width: 560px) { .form-card { padding: 24px 20px; } }
.form-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.form-card__head h2 { font-size: 24px; }
.form-card__head .of { font-family: "DM Mono", monospace; font-size: 13px; color: var(--text-muted); }
.form-card__intro { color: var(--text-muted); font-size: 16px; margin-bottom: 26px; }

.field { margin-bottom: 22px; }
.field > label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }
.field .req { color: var(--err); }
.field .hint { display: block; font-weight: 400; color: var(--text-muted); font-size: 16px; margin-top: 2px; }
/* waarschuwing bij instellingen die letterlijk in de voorwaarden staan */
.field .hint--let-op { margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--koper); color: var(--text); }
.control {
  /* 18px: leesbaar voor de oudere doelgroep én ≥16px voorkomt iOS-zoom bij focus. */
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 18px;
  color: var(--text); background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: var(--radius-m); transition: border-color .18s, box-shadow .18s;
}
.control:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.control:focus { outline: none; border-color: var(--koper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--koper) 22%, transparent); }
textarea.control { resize: vertical; min-height: 120px; line-height: 1.5; }
/* tekstblok: de lopende tekst van een hele paginasectie, dus meteen ruim in beeld */
textarea.control--blok { min-height: 220px; }
/* de opmaakmarkeringen in de hint (**vet**, [tekst](/pad), "- ") */
.field .hint code {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 15px;
  background: var(--surface-3); border-radius: var(--radius-s); padding: 1px 5px;
  color: var(--text);
}
select.control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556260' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
.field--error .control { border-color: var(--err); background: var(--err-bg); }
.field--error .control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 22%, transparent); }
.field__error { display: flex; align-items: center; gap: 7px; color: var(--err); font-size: 16px; font-weight: 500; margin-top: 8px; }
.field__error svg { width: 16px; height: 16px; flex: 0 0 auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }

/* keuze (radio/checkbox) */
.keuze-groep { display: grid; gap: 12px; }
.keuze { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); cursor: pointer; }
.keuze:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.keuze input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--koper); flex: 0 0 auto; }
.keuze__tekst { font-size: 16px; }
.keuze__tekst small { display: block; color: var(--text-muted); font-size: 16px; line-height: 1.55; }
.keuze:has(input:checked) { border-color: var(--koper); background: color-mix(in srgb, var(--koper) 6%, var(--surface-2)); }

/* schakelaar (aan/uit) — onderhoudsmodus in /beheer; native checkbox + duidelijke statuspil */
.keuze--schakelaar { max-width: 600px; align-items: center; }
.keuze--schakelaar .keuze__tekst { font-weight: 600; }
.keuze--schakelaar .keuze__tekst small { font-weight: 400; margin-top: 4px; }
.keuze--schakelaar::after {
  content: "Uit"; margin-left: auto; align-self: center; flex: 0 0 auto;
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted);
}
.keuze--schakelaar:has(input:checked)::after { content: "Aan"; background: var(--warn-bg); color: var(--warn); }

/* monteur-blok (visueel gescheiden) */
.monteur-blok { margin-top: 10px; padding-top: 22px; border-top: 1px dashed var(--line); }

.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.form-nav .btn--terug { order: -1; }

/* foto-upload */
.foto-veld { border: 1.5px dashed var(--line); border-radius: var(--radius-l); padding: 24px; text-align: center; background: var(--surface-2); }
.foto-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin-top: 18px; }
.foto-item { position: relative; border: 1px solid var(--line-soft); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); }
.foto-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.foto-item__naam { font-size: 12px; padding: 6px 8px; color: var(--text-muted); word-break: break-all; }
.foto-item__verwijder { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(30,42,43,.8); color: #fff; cursor: pointer; display: grid; place-items: center; }
.foto-item__verwijder svg { width: 15px; height: 15px; }
.foto-item__balk { height: 4px; background: var(--line-soft); }
.foto-item__balk span { display: block; height: 100%; background: var(--koper); width: 0; transition: width .2s; }

/* controle-overzicht (stap 4) */
.controle-lijst { list-style: none; margin: 0; padding: 0; }
.controle-lijst > div { display: grid; grid-template-columns: 200px 1fr; gap: 8px 20px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.controle-lijst dt { color: var(--text-muted); font-size: 15px; }
.controle-lijst dd { margin: 0; font-size: 16px; word-break: break-word; }
@media (max-width: 520px) { .controle-lijst > div { grid-template-columns: 1fr; gap: 2px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--spar); color: var(--papier); margin-top: 64px; }
@media (prefers-color-scheme: dark) { .site-footer { background: #0E1A17; border-top: 1px solid #26362F; } }
/* Donker: ook de voettekst in de zachte hero-tint (Yke 4-9-2026: "hier zit nog witte tekst");
   koppen (koper) en de hover naar wit blijven. */
@media (prefers-color-scheme: dark) { .site-footer p, .site-footer a, .site-footer .footer-formeel { color: var(--hero-muted); } .site-footer a:hover { color: var(--papier); } }
.site-footer__inner { max-width: var(--maxw); margin-inline: auto; padding: 46px 24px 40px; }
/* Vier kolommen sinds punt 58: de merkkolom, Site, Reparaties en Eikos. */
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 11px; font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 20px; }
.footer-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--koper); box-shadow: 0 0 0 3px rgba(160,85,32,.3); }
.site-footer p { color: #B9C9C2; font-size: 15px; margin-top: 12px; max-width: 40ch; }
.site-footer h4 { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--koper-tint); font-weight: 500; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
/* Toegankelijkheid (DESIGN.md, harde eis): aanraakvlak ≥44×44px — zelfde truc
   als het hoofdmenu hierboven. Tekstregel 24px (15px × regelhoogte 1,6) + 2×
   11px padding = 44px; de negatieve marge van gelijke grootte houdt de tekst
   op zijn plaats, zodat de footer niet merkbaar hoger wordt. De footer staat
   op élke pagina en élk schermformaat, dus dit weegt het zwaarst.
   Regressietest: site/private/tests.php, "aanraakvlak voetlinks en menu". */
.site-footer a { display: inline-flex; align-items: center; color: #CBD8D2; text-decoration: none; font-size: 15px; padding-block: 11px; margin-block: -11px; }
.site-footer a:hover { color: #fff; }
/* KvK + btw: verplichte vermelding, maar visueel ondergeschikt aan de links
   erboven. 14px is de ondergrens uit CLAUDE.md; #A6B8B1 op --spar haalt 4,9:1
   en blijft daarmee boven de AA-eis van 4,5:1. */
.site-footer .footer-formeel { margin-top: 16px; font-size: 14px; line-height: 1.5; color: #A6B8B1; }
.footer-tel { margin-top: 14px; font-size: 15px; }
.footer-tel .nummer { font-family: "DM Mono", monospace; color: var(--koper-tint); text-decoration: none; }
.footer-tel .nummer:hover { color: #fff; }
@media (max-width: 720px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-brand-col { grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer-cols { grid-template-columns: 1fr; } }

/* ============================================================
   WHATSAPP CLICK-TO-CHAT (punt 52, patroon JD Lasenhandel 2-9-2026)
   Zwevend rechtsonder, op elke pagina die layout.php gebruikt (inc.
   layout.php, pagina_eind()). Geen ander zwevend element op de site om mee
   te botsen (skip-link is z-index 100 maar alleen zichtbaar bij focus,
   linksboven). WhatsApp-groen blijft #25D366, los van de sitekleuren.
   ============================================================ */
.wa-knop {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; box-shadow: var(--shadow-lift);
  transition: transform .15s var(--ease);
}
.wa-knop:hover { transform: scale(1.08); }
.wa-knop svg { width: 34px; height: 34px; fill: #fff; }
.wa-ballon {
  display: none; position: fixed; right: 22px; bottom: 94px; z-index: 90;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-l) var(--radius-l) 4px var(--radius-l);
  padding: 16px 34px 16px 18px; max-width: 280px; font-size: 14px; line-height: 1.5;
  box-shadow: var(--shadow-lift);
}
.wa-ballon.wa-open { display: block; }
.wa-ballon strong { display: block; margin-bottom: 4px; }
.wa-ballon .wa-start {
  display: inline-block; margin-top: 10px; background: #25D366; color: #fff; font-weight: 700;
  padding: 9px 18px; border-radius: 22px; text-decoration: none; font-size: 14px;
}
.wa-ballon .wa-dicht {
  position: absolute; top: 4px; right: 6px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; line-height: 1;
}
@media (max-width: 460px) { .wa-ballon { max-width: calc(100vw - 44px); } }
/* Iets meer ruimte voor de begroeting doet op een groot scherm geen pijn.
   (De regel hierboven verwees nog naar een desktop-omzetting naar
   web.whatsapp.com; die is met punt 55 verdwenen — het is overal wa.me.) */
@media (min-width: 1024px) { .wa-ballon { max-width: 320px; font-size: 15px; } }

/* ============================================================
   BEHEER
   ============================================================ */
.beheer-body { background: var(--bg); min-height: 100vh; }
.beheer-top { background: var(--hero-bg); color: var(--hero-text); padding: 16px 0; }
.beheer-top__inner { max-width: 900px; margin-inline: auto; padding-inline: 24px; display: flex; align-items: center; gap: 16px; }
.beheer-top__brand { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.beheer-top__brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--koper); }
.beheer-top__spacer { margin-left: auto; }

/* Eén menubalk over alle beheerpagina's (punt 61, 4-9-2026). Bewust géén
   uitklapmenu: dat vraagt JavaScript, en de CSP van deze site staat geen inline
   script toe — dezelfde reden als bij de <details> van de instellingensecties.
   De tweede rij (Website → Teksten/SEO) verschijnt alleen binnen de groep waar
   je in staat, zodat het scherm op een telefoon niet onnodig hoog wordt. De
   pillen mogen omlopen in plaats van zijwaarts te schuiven: een ingang die
   buiten beeld valt is een ingang die niemand vindt. */
.beheer-menu { background: var(--surface); border-bottom: 1px solid var(--line); }
.beheer-menu__rij {
  max-width: 900px; margin-inline: auto; padding: 8px 24px;
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px;
}
.beheer-menu__rij a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 15px;
  border-radius: 999px; text-decoration: none;
  color: var(--accent-ink); font-size: 16px; font-weight: 600;
}
.beheer-menu__rij a:hover { background: var(--surface-2); text-decoration: underline; }
.beheer-menu__rij a.is-actief { background: var(--accent); color: var(--accent-on); }
.beheer-menu__rij a.is-actief:hover { background: var(--accent-ink); color: var(--accent-on); }
/* De subrij hangt onder zijn eigen groep: iets kleiner, zonder ruimte ertussen. */
.beheer-menu__rij--sub { padding-top: 0; padding-bottom: 10px; }
.beheer-menu__rij--sub a { min-height: 40px; font-size: 15.5px; padding: 3px 13px; }
@media (max-width: 560px) { .beheer-menu__rij { padding-inline: 16px; } }

.beheer-wrap { max-width: 900px; margin-inline: auto; padding: 40px 24px 60px; }
.beheer-login { max-width: 420px; margin: 8vh auto; padding: 0 24px; }
.beheer-kaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 30px; box-shadow: var(--shadow-card); }
.beheer-sectie { margin-bottom: 40px; }
.beheer-sectie > h2 { font-size: 22px; margin-bottom: 6px; }
.beheer-sectie > p { color: var(--text-muted); font-size: 15.5px; margin-bottom: 20px; }
.instel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .instel-grid { grid-template-columns: 1fr; } }

/* Instellingen in uitklapbare secties. Bewust zonder JavaScript: <details> doet
   dit zelf, werkt met toetsenbord en schermlezer, en past binnen de CSP. Dit
   scherm wordt 's avonds op een telefoon bediend — de <summary>-koppen zijn
   daar de belangrijkste knoppen van de pagina en mogen dus niet krap zijn. */
.instel-toc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 20px 22px 16px; margin-bottom: 22px; box-shadow: var(--shadow-card);
}
.instel-toc > h2 { font-size: 22px; margin-bottom: 2px; }
.instel-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.instel-toc a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 15px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--accent-ink); text-decoration: none; font-size: 16px; font-weight: 600;
}
.instel-toc a:hover { border-color: var(--accent); background: var(--surface-2); }

.instel-sectie {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  margin-bottom: 12px; box-shadow: var(--shadow-card); scroll-margin-top: 16px;
}
.instel-sectie > summary {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 20px;
  cursor: pointer; list-style: none; border-radius: var(--radius-l);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 19px; color: var(--text);
}
.instel-sectie > summary::-webkit-details-marker { display: none; }
.instel-sectie > summary:hover { background: var(--surface-2); }
/* Chevron van twee randen i.p.v. een afbeelding: neemt zo de accentkleur van
   het thema over, ook in donkere modus. */
.instel-sectie > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2.5px solid var(--accent-ink); border-bottom: 2.5px solid var(--accent-ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .18s var(--ease);
}
.instel-sectie[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.instel-sectie[open] > summary { border-radius: var(--radius-l) var(--radius-l) 0 0; border-bottom: 1px solid var(--line-soft); }
/* Dit is een <form> (één per sectie), vandaar de margin-reset. */
.instel-sectie__inhoud { margin: 0; padding: 22px 20px 20px; }
.instel-sectie__voet {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.instel-sectie__voet .btn { flex: 1 1 210px; }
@media (prefers-reduced-motion: reduce) { .instel-sectie > summary::after { transition: none; } }
@media (max-width: 560px) {
  .instel-sectie > summary { padding: 14px 16px; font-size: 18px; }
  .instel-sectie__inhoud { padding: 18px 16px 16px; }
  .instel-toc { padding: 18px 16px 14px; }
}

/* Geschiedenis onder een veld: dicht tenzij je hem opent, zodat het scherm er
   niet voller van wordt. De Herstellen-knop hoort bij een formulier dat ná het
   sectieformulier staat (form="herstel-<id>"); dat is niet te zien, maar het is
   wel de reden dat deze knop hier mag staan zonder genest formulier. */
.historie { margin-top: 8px; }
.historie > summary {
  display: inline-flex; align-items: center; min-height: 44px;
  cursor: pointer; list-style: none;
  color: var(--accent-ink); font-size: 16px; font-weight: 600;
}
.historie > summary::-webkit-details-marker { display: none; }
.historie > summary::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}
.historie[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.historie > summary:hover { text-decoration: underline; }
.historie__lijst { list-style: none; margin: 4px 0 0; padding: 0; }
.historie__regel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
}
.historie__datum { font-family: "DM Mono", monospace; font-size: 15px; color: var(--text-muted); white-space: nowrap; }
.historie__fragment { flex: 1 1 220px; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.historie__knop { flex: 0 0 auto; min-height: 44px; padding: 8px 18px; font-size: 16px; }
/* De formulieren achter de knoppen hebben geen inhoud om te tonen. */
.historie__form { display: none; }
.tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabel th, .tabel td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.tabel th { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.tabel-schuif { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-m); }
.badge { display: inline-block; font-family: "DM Mono", monospace; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text); }
.badge--aangemeld { background: var(--info-bg); color: var(--info); }
/* De balie-beslissing, naast de status. Geaccepteerd springt eruit: dat is de
   aanmelding waarvan de klant al bericht heeft dat de reparatie doorgaat. */
.badge--beslissing-geaccepteerd { background: var(--ok-bg); color: var(--ok); }
.badge--beslissing-afgewezen { background: var(--err-bg); color: var(--err); }

/* De "Terug naar beheer"-link boven elke subpagina is bij punt 61 vervangen door
   de menubalk hierboven: die brengt je overal naartoe in plaats van alleen één
   stap terug. */

/* Balie-kaart: de ingang naar het avond-ja/nee-scherm. Opvallend zolang er
   aanmeldingen wachten, rustig zodra de stapel leeg is. */
.balie-kaart {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 16px; margin-bottom: 40px; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  color: var(--text); text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.balie-kaart:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.balie-kaart__titel { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 22px; }
.balie-kaart__regel { grid-column: 1; color: var(--text-muted); font-size: 16px; }
.balie-kaart__pijl { grid-row: 1 / span 2; grid-column: 2; width: 26px; height: 26px; color: var(--accent-ink); }
.balie-kaart--wacht { border-color: var(--koper); border-left-color: var(--koper); background: var(--warn-bg); }
.balie-kaart--wacht .balie-kaart__titel { color: var(--warn); }
/* --warn op --warn-bg is 4,25:1 — genoeg voor de titel (22px/700), maar niet voor
   deze regel van 16px, en juist die zin telt ("3 aanmeldingen wachten op je ja of
   nee"). --accent-ink haalt 5,97:1 in de lichte modus en 5,56:1 in de donkere.
   --warn zelf blijft ongemoeid; die wordt elders al gebruikt. */
.balie-kaart--wacht .balie-kaart__regel { color: var(--accent-ink); }
/* Een kaart die (nog) nergens heen wijst: zelfde vorm, geen pijl, geen hover.
   Zo blijft het overzicht één rij kaarten, ook als er één nog niet klikbaar is. */
.balie-kaart--stil { cursor: default; }
.balie-kaart--stil:hover { border-color: var(--line); box-shadow: var(--shadow-card); }

/* Bezoekerscijfers (/beheer/bezoekers.php). De grafiek is inline SVG en krijgt
   zijn kleuren uit dezelfde tokens als de rest — geen grafiekbibliotheek, want
   de CSP laat geen externe scripts toe. */
.periode-balk { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 28px; }
.periode-keuze {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--accent-ink); text-decoration: none; font-size: 16px; font-weight: 600;
}
.periode-keuze:hover { border-color: var(--accent); background: var(--surface-2); }
.periode-keuze.is-actief { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.bezoek-grafiek { width: 100%; height: auto; display: block; margin-bottom: 10px; }
.bezoek-grafiek__lijn { stroke: var(--line-soft); stroke-width: 1; }
.bezoek-grafiek__as { fill: var(--text-muted); font-family: "DM Mono", monospace; font-size: 12px; }
.bezoek-staaf--bezoekers { fill: var(--accent); }
.bezoek-staaf--weergaven { fill: var(--koper-tint); }
.bezoek-staaf--bots      { fill: var(--hulplijn); }
@media (prefers-color-scheme: dark) {
  /* --koper-tint is een lichte zandkleur en houdt op donker prima stand, maar de
     hulplijnkleur is dan bijna wit en trekt alle aandacht naar juist de reeks die
     er het minst toe doet. Staaf én legendavlek gaan samen: een legenda met een
     andere kleur dan de grafiek is erger dan geen legenda. */
  .bezoek-staaf--bots,
  .bezoek-vlek--bots { fill: #4A5B54; background: #4A5B54; }
}
.bezoek-legenda {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: var(--text-muted);
}
.bezoek-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.bezoek-vlek { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.bezoek-vlek--bezoekers { background: var(--accent); }
.bezoek-vlek--weergaven { background: var(--koper-tint); }
.bezoek-vlek--bots { background: var(--hulplijn); }

/* Eén binnengekomen aanmelding op /beheer/aanmeldingen.php */
.aanmelding {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 22px 24px; margin-bottom: 28px; box-shadow: var(--shadow-card);
}
.aanmelding__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
/* Niet kleiner: dit scherm wordt 's avonds op een telefoon gelezen. */
.aanmelding__datum { font-size: 15.5px; color: var(--text-muted); }
.aanmelding__titel { font-size: 20px; margin: 0 0 14px; }
.aanmelding__fotos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
/* Klantfoto's hebben geen vaste afmetingen (uiteenlopende formaten van
   telefoons/camera's), dus geen verzonnen width/height in de HTML
   (reparatie.php:562) — dan zou de verhouding vaak niet kloppen en de pagina
   alsnog verspringen. In plaats daarvan reserveert de container een vaste
   verhouding en toont object-fit: contain de hele foto (geen bijsnijden —
   een klantfoto laat soms juist een foutcode of aansluiting zien die je niet
   wilt afsnijden), met de zachte oppervlaktekleur als opvulling eromheen.
   Zelfde klasse wordt ook door beheer/aanmeldingen.php gebruikt; profiteert
   daar op dezelfde manier mee. Regressietest: site/private/tests.php,
   "afbeeldingsruimte offertefoto". */
.aanmelding__fotos img {
  max-width: 100%; width: 200px; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--surface-2); border-radius: var(--radius-m);
  border: 1px solid var(--line-soft); display: block;
}
.aanmelding__beslis { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.aanmelding__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.aanmelding__knoppen .btn { flex: 1 1 160px; }
.aanmelding__meer { margin: 0 0 28px; color: var(--text-muted); font-size: 16px; }

/* Bevestigingspaneel bij afwijzen: de tweede stap. Moet er duidelijk anders
   uitzien dan de gewone kaart, want hier gaat er een mail de deur uit. */
.aanmelding__bevestig {
  margin-top: 22px; padding: 20px 22px; border-radius: var(--radius-m);
  background: var(--err-bg); border: 1px solid color-mix(in srgb, var(--err) 35%, transparent);
}
.aanmelding__bevestig h3 { font-size: 19px; margin: 0 0 8px; }
.aanmelding__bevestig p { font-size: 16px; line-height: 1.55; margin: 0 0 16px; color: var(--text); }
@media (max-width: 560px) {
  .aanmelding { padding: 18px 16px; }
  .aanmelding__bevestig { padding: 18px 16px; }
  .aanmelding__knoppen .btn { flex: 1 1 100%; }
}

/* ============================================================
   KLANTEN (/beheer/klanten.php)
   Zelfde uitklap-idioom als de instellingensecties: <details> zonder
   JavaScript, want de CSP laat geen inline scripts toe.
   ============================================================ */
.klant-zoek { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 28px; }
.klant-zoek .field { flex: 1 1 260px; }
.klant-zoek .btn { flex: 0 0 auto; }

.klant {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  margin-bottom: 14px; box-shadow: var(--shadow-card);
}
.klant > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  list-style: none; cursor: pointer; padding: 16px 46px 16px 20px; position: relative;
  border-radius: var(--radius-l); font-size: 17px;
}
.klant > summary::-webkit-details-marker { display: none; }
.klant > summary:hover { background: var(--surface-2); }
.klant[open] > summary { border-radius: var(--radius-l) var(--radius-l) 0 0; border-bottom: 1px solid var(--line-soft); }
/* Zelfde pijltje als .instel-sectie, zodat de twee schermen hetzelfde aanvoelen. */
.klant > summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s var(--ease);
}
.klant[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .klant > summary::after { transition: none; } }
.klant__naam { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 19px; }
.klant__email { color: var(--text-muted); font-size: 16px; overflow-wrap: anywhere; }
.klant__inhoud { padding: 4px 20px 20px; }
.klant__kop { font-size: 18px; margin: 22px 0 10px; }

/* De aanmeldingen van deze klant: de plek waar "verwijder die eerst" naar wijst. */
.klant-aanmeldingen { list-style: none; margin: 0; padding: 0; }
.klant-aanmelding { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.klant-aanmelding__regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.klant-aanmelding__datum { font-size: 15.5px; color: var(--text-muted); white-space: nowrap; }
.klant-aanmelding__wat { flex: 1 1 200px; font-size: 16px; overflow-wrap: anywhere; }
.klant-aanmelding__actie { flex: 0 0 auto; margin-left: auto; }
/* Trefvlak blijft ≥44px; dit scherm wordt op de telefoon bediend. */
.klant__knop { min-height: 44px; padding: 8px 18px; font-size: 16px; }

.klant__bewerk { margin-top: 4px; }
/* Eén knop, dus niet uitrekken: .instel-sectie__voet laat knoppen groeien omdat
   daar twee naast elkaar staan. Op de telefoon wél de volle breedte. */
.klant__bewerk .instel-sectie__voet { margin-top: 4px; }
.klant__bewerk .instel-sectie__voet .btn { flex: 0 0 auto; min-width: 170px; }

/* Verwijderen staat apart en ziet er anders uit dan de rest: het is de enige
   knop op dit scherm die iets definitief weghaalt. */
.klant__gevaar {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
}
/* Deze regel zegt óf de klant weg mag ("heeft nog 3 aanmeldingen, verwijder die
   eerst"). Dat is de zin die het gewicht draagt, dus geen fluistertekst: volle
   basisgrootte en de gewone tekstkleur. */
.klant__gevaar p { color: var(--text); font-size: 16px; margin: 0 0 12px; }
.klant__waarschuwing {
  padding-left: 12px; border-left: 3px solid var(--err);
}
@media (max-width: 560px) {
  .klant > summary { padding: 14px 40px 14px 16px; }
  .klant__inhoud { padding: 4px 16px 16px; }
  .klant-aanmelding__actie { margin-left: 0; }
  .klant-aanmelding__actie .btn { width: 100%; }
  .klant__gevaar .btn { width: 100%; }
  .klant__bewerk .instel-sectie__voet .btn { flex: 1 1 100%; }
}

/* ============================================================
   VOLGPAGINA — /reparatie.php, de drie stappen achter een klantlink.

   Bewust een eigen component en niet .stappen van de homepage: die is een
   grid van vier kolommen en zijn blokjes staan op opacity:0 tot JS er
   .reveal bij zet. Op een pagina die een klant uit een mail opent mag de
   inhoud nooit van JavaScript afhangen. Verder alleen de bestaande tokens.
   ============================================================ */
.volg-stappen {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.volg-stap {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-l); padding: 18px 18px 16px; box-shadow: var(--shadow-card);
}
.volg-stap__num {
  font-family: "DM Mono", monospace; font-size: 13px; font-weight: 500;
  color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--line-soft);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 12px;
}
.volg-stap__titel { display: block; font-weight: 600; font-size: 17px; margin-bottom: 4px; }
/* 16px, niet de 15px van .stap p: hier is deze zin de hoofdinhoud van de
   pagina (CLAUDE.md: basistekst ≥16px, doelgroep deels ouder). */
.volg-stap p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-muted); }
/* De actieve stap: koperen rand én een gevulde bol. Niet alléén kleur —
   dat is de WCAG-eis dat betekenis nooit uitsluitend uit kleur mag komen.
   De <li> draagt aria-current="step", dus een schermlezer hoort het ook. */
.volg-stap[aria-current="step"] { border-color: var(--koper); box-shadow: 0 0 0 1px var(--koper), var(--shadow-card); }
.volg-stap[aria-current="step"] .volg-stap__num {
  background: var(--koper); border-color: var(--koper); color: var(--accent-on);
}
/* --accent-ink, niet --koper: koperen TEKST gaat in dit bestand overal via
   --accent-ink (die een donkere-modusvariant heeft); --koper als tekstkleur
   haalt in donkere modus maar 2,53:1. */
.volg-stap[aria-current="step"] .volg-stap__titel { color: var(--accent-ink); }
.volg-stap[aria-current="step"] p { color: var(--text); }
/* Afgeronde stappen vragen geen aandacht, maar blijven écht leesbaar:
   onder .88 zakt de stapzin (text-muted) onder de 4,5:1 van WCAG AA. */
.volg-stap--gehad { opacity: .88; }

/* De gegevens boven de stappen: label/waarde, geen tabel. */
.volg-gegevens { margin: 0 0 26px; display: grid; gap: 10px 18px; }
.volg-gegevens > div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.volg-gegevens dt { font-size: 14px; color: var(--text-muted); min-width: 9rem; }
.volg-gegevens dd { margin: 0; font-size: 16px; }
.volg-nummer { font-family: "DM Mono", monospace; }

/* De offerte op de klantpagina. */
.volg-offerte {
  margin: 34px 0 0; padding: 24px 22px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
}
.volg-offerte h2 { margin: 0 0 12px; font-size: clamp(20px, 2.6vw, 24px); }
.volg-offerte h3 { margin: 26px 0 10px; font-size: 18px; }
.volg-offerte p { font-size: 16px; line-height: 1.55; }

.volg-regels { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15.5px; }
.volg-regels th, .volg-regels td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.volg-regels th { font-size: 14px; color: var(--text-muted); font-weight: 600; }
/* Aantal en prijs rechts uitgelijnd: bedragen onder elkaar lezen sneller. */
.volg-regels th:nth-child(n+2), .volg-regels td:nth-child(n+2) { text-align: right; white-space: nowrap; }

.volg-bedragen { margin: 18px 0 0; display: grid; gap: 6px; }
.volg-bedragen > div { display: flex; justify-content: space-between; gap: 18px; font-size: 16px; }
.volg-bedragen dt { color: var(--text-muted); }
.volg-bedragen dd { margin: 0; font-variant-numeric: tabular-nums; }
.volg-bedragen__totaal { border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 4px; font-weight: 600; }
.volg-bedragen__totaal dt { color: var(--text); }

.volg-geldig { margin: 16px 0 0; font-size: 15px; color: var(--text-muted); }
.volg-voorwaarden { margin: 12px 0 0; font-size: 15px; color: var(--text-muted); }

.volg-reactie { margin-top: 22px; }
/* De twee knoppen naast elkaar op een breed scherm, onder elkaar op een telefoon.
   btn--groot levert de touch target van ≥44px die DESIGN.md eist. */
.volg-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.volg-knoppen .btn { min-height: 48px; }

@media (max-width: 760px) {
  .volg-stappen { grid-template-columns: 1fr; gap: 10px; }
  .volg-gegevens dt { min-width: 0; width: 100%; }
  .volg-offerte { padding: 20px 16px; }
  .volg-knoppen .btn { flex: 1 1 100%; }
}

/* ============================================================
   BLUEPRINT-BIBLIOTHEEK (/bibliotheek.php) — de publieke etalage.
   De previews zijn met opzet klein: hier staat nooit een volledig
   scherp bord (besluit Yke 13-8-2026). De maten hieronder zijn dus
   geen smaakkwestie maar dezelfde eis, een laag lager.
   ============================================================ */
.bib-wrap { padding-block: 48px 68px; }

.bib-filters {
  display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0 18px;
  align-items: end; margin-bottom: 28px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-l); padding: 20px 22px 4px;
}
.bib-filters .field { margin-bottom: 16px; }
.bib-filters__knoppen { display: flex; gap: 10px; margin-bottom: 16px; }
.bib-filters__knoppen .btn { min-height: 48px; }
@media (max-width: 820px) {
  .bib-filters { grid-template-columns: 1fr; }
  .bib-filters__knoppen .btn { flex: 1 1 auto; }
}

.bib-telling { color: var(--text-muted); font-size: 16px; margin-bottom: 14px; }

.bib-lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.bib-kaart { display: flex; }
.bib-kaart__link {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-l); padding: 14px; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-card); transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.bib-kaart__link:hover { box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.bib-kaart__preview {
  display: block; background: var(--surface-3); border-radius: var(--radius-m);
  overflow: hidden; margin-bottom: 8px;
}
/* Vaste hoogte met object-fit: contain — zo blijft het raster rustig, ongeacht
   de verhouding van de aangeleverde preview, en wordt er niets bijgesneden. */
.bib-kaart__preview img { display: block; width: 100%; height: 170px; object-fit: contain; }
.bib-kaart__titel { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 18px; font-weight: 600; }
.bib-kaart__meta { color: var(--text-muted); font-size: 16px; }
.bib-kaart .badge { align-self: flex-start; margin-top: 4px; }

.bib-leeg {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-l); padding: 32px 26px; text-align: center;
}
.bib-leeg h2 { font-size: 22px; margin-bottom: 10px; }
.bib-leeg p { color: var(--text-muted); font-size: 17px; max-width: 52ch; margin-inline: auto; }

/* De detailweergave toont de preview groter, maar nog altijd begrensd. */
.bib-detail__preview { margin: 0 0 28px; }
.bib-detail__preview img {
  display: block; max-width: min(100%, 520px); border-radius: var(--radius-m);
  background: var(--surface-3); border: 1px solid var(--line-soft);
}
.bib-detail__preview figcaption { margin-top: 10px; color: var(--text-muted); font-size: 16px; }

.bib-interesse { margin-top: 34px; }

/* ============================================================
   PRINT — vooral voor de PDF van de algemene voorwaarden.
   De PDF is een juridisch document dat klanten meekrijgen; navigatie,
   knoppen en het telefoonvenster horen daar niet in.
   ============================================================ */
@media print {
  .site-nav, .site-footer, .skip-link, .btn, .vw-kort__pdf { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .pagina-hero { background: #fff !important; color: #000 !important; padding: 0 0 12pt; border-bottom: 1pt solid #999; }
  .pagina-hero__inner { padding: 0; }
  .pagina-hero h1 { color: #000 !important; font-size: 20pt; }
  .pagina-hero p { color: #333 !important; }
  .prose { max-width: none; padding: 0; }
  .prose h2 { font-size: 12.5pt; margin-top: 14pt; page-break-after: avoid; }
  .prose p, .prose li { color: #000; }
  .vw-kort { border: 1pt solid #999; border-left-width: 3pt; padding: 10pt 12pt; page-break-inside: avoid; }
  .vw-slot { border-top: 1pt solid #999; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}