/* ============================================================
   Ladelab — stijlblad
   Eén accent (kobalt), koele neutralen met blauwzweem, en monospace
   als drager van het karakter. Zie de merkidentiteit voor de rationale.
   ============================================================ */

/* Het hidden-attribuut moet altijd winnen. Zonder deze regel overschrijft een
   eigen display-waarde het: de afrekenpagina zette display:grid op het
   bestelformulier, waardoor dat zichtbaar bleef ook als het verborgen hoorde
   te zijn. Met een lege winkelwagen stond er dan "je hebt nog geen ontwerp"
   met daaronder een volledig invulbaar formulier. */
[hidden] { display: none !important; }


:root {
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --paper: #EEF1F4;
  --surface: #FFFFFF;
  --surface-2: #F7F9FB;
  --ink: #0E1418;
  --ink-2: #46535F;
  --muted: #646F79;
  --line: #D3DBE2;
  --line-strong: #AEBAC5;
  --accent: #1B44D8;
  --accent-soft: #E3E9FD;
  --accent-ink: #FFFFFF;
  --signal: #8A5100;
  --signal-soft: #FAF0DE;
  --ok: #14663F;
  --ok-soft: #E2F1E9;
  --danger: #A8231C;
  --grid: #CBD5DE;
  --shadow: 0 1px 2px rgba(14,20,24,.05), 0 10px 30px -16px rgba(14,20,24,.22);
  --r: 6px;
  --maxw: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B0E11; --surface: #151A1F; --surface-2: #1B2127;
    --ink: #E7ECF1; --ink-2: #AAB7C3; --muted: #7B8996;
    --line: #262F38; --line-strong: #3B4753;
    --accent: #7397FF; --accent-soft: #18233D; --accent-ink: #0B0E11;
    --signal: #E9A93A; --signal-soft: #2A2010;
    --ok: #4FBE8B; --ok-soft: #12261D;
    --danger: #E86A62; --grid: #212B34;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"] {
  --paper: #0B0E11; --surface: #151A1F; --surface-2: #1B2127;
  --ink: #E7ECF1; --ink-2: #AAB7C3; --muted: #7B8996;
  --line: #262F38; --line-strong: #3B4753;
  --accent: #7397FF; --accent-soft: #18233D; --accent-ink: #0B0E11;
  --signal: #E9A93A; --signal-soft: #2A2010;
  --ok: #4FBE8B; --ok-soft: #12261D;
  --danger: #E86A62; --grid: #212B34;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.75);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

img, svg { max-width: 100%; }

/* ---------- kop ---------- */

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.bar {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 22px;
}
.brand { color: var(--ink); text-decoration: none; display: flex; flex: none; }
.brand svg { display: block; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14.5px;
  padding: 8px 12px; border-radius: var(--r);
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a.cta {
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
  margin-left: 6px; padding: 9px 16px;
}
.nav a.cta:hover { background: var(--accent); filter: brightness(1.1); }

.menu-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: var(--r); width: 42px; height: 38px; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 860px) {
  .menu-toggle { display: flex; }
  .nav {
    display: none; width: 100%; margin: 0; order: 3;
    flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 12px; }
  .nav a.cta { margin: 6px 0 0; text-align: center; }
  .bar { flex-wrap: wrap; }
}

/* ---------- bouwstenen ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }

section { padding: 64px 0; }
section.tight { padding: 40px 0; }
section.alt { background: var(--surface); border-block: 1px solid var(--line); }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  display: block; margin-bottom: 10px;
}

h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
h2 { font-size: clamp(23px, 3.2vw, 31px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 8px; }
p { margin: 0 0 16px; }
.lede { font-size: clamp(17px, 2vw, 19px); color: var(--ink-2); max-width: 62ch; }
.small { font-size: 13.5px; color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-underline-offset: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 15.5px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  padding: 12px 20px; border-radius: var(--r); cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, filter .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.1); background: var(--accent); }
.btn.big { padding: 15px 26px; font-size: 17px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 22px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
/* Een rasterkind staat standaard op min-width:auto en kan dus niet smaller
   worden dan zijn breedste inhoud. Een tabel van 480 px duwde de kolom
   daardoor buiten het raster en liet de hele pagina op een telefoon
   horizontaal schuiven. Met min-width:0 krimpt de kolom wel, en schuift
   alleen de tabel binnen zijn eigen kader. */
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- specifieke onderdelen ---------- */

.hero { padding: 72px 0 56px; }
.hero .lede { margin-bottom: 26px; }

.usp-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.usp-row div { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.usp-row .tick { color: var(--ok); font-weight: 700; flex: none; }

.steps { counter-reset: stap; display: grid; gap: 18px; }
.step { display: flex; gap: 16px; }
.step .n {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 14px;
}
.step .bd { flex: 1; min-width: 0; }
.step h3 { margin-bottom: 4px; }
.step p { margin-bottom: 0; color: var(--ink-2); font-size: 15px; }

.pricetable { width: 100%; border-collapse: collapse; font-size: 15px; }
.pricetable th, .pricetable td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); }
.pricetable th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pricetable td:last-child, .pricetable th:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pricetable tr:last-child td { border-bottom: 0; }

details.faq {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); margin-bottom: 8px; overflow: hidden;
}
details.faq summary {
  cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: 16px;
  list-style: none; display: flex; align-items: center; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--muted); font-size: 19px; line-height: 1; }
details.faq[open] summary::after { content: "\2212"; }
details.faq .body { padding: 0 18px 16px; color: var(--ink-2); font-size: 15px; }
details.faq .body p:last-child { margin-bottom: 0; }

.note { padding: 14px 16px; border-radius: var(--r); font-size: 14.5px; line-height: 1.5; }
.note.info { background: var(--accent-soft); color: var(--ink-2); }
.note.warn { background: var(--signal-soft); color: var(--signal); }
.note.ok { background: var(--ok-soft); color: var(--ok); }

.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 26px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 18px; }

/* Een brede tabel mag nooit de hele pagina laten meeschuiven: op een
   telefoon van 375 px verdwijnt dan de linkerkant van elke alinea uit
   beeld. Hij schuift binnen zijn eigen kader. Dat kader is met tabindex
   bereikbaar, want een gebied dat je alleen met de muis kan verschuiven
   is voor een toetsenbordgebruiker onbereikbaar. */
.tabelwrap { overflow-x: auto; max-width: 100%; margin-bottom: 18px; -webkit-overflow-scrolling: touch; }
.tabelwrap > table { margin-bottom: 0; }
/* Alleen tabellen in lopende tekst krijgen een ondergrens. Zonder die grens
   worden de kolommen op een telefoon zo smal dat elk woord op een eigen
   regel valt. Een tabel in een kaart heeft die grens niet nodig en zou er
   juist door uit zijn kader groeien. */
.prose .tabelwrap > table { min-width: 28rem; }
.tabelwrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.prose th, .prose td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.prose .toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.prose .toc ol { margin-bottom: 0; }

/* ---------- voet ---------- */

.site-foot { background: var(--surface); border-top: 1px solid var(--line); padding: 46px 0 26px; margin-top: 40px; }
.foot-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 22px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px;
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid .foot-kop { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.foot-grid a { display: block; color: var(--ink-2); text-decoration: none; font-size: 14.5px; padding: 3px 0; }
.foot-grid a:hover { color: var(--accent); }
.foot-logo { color: var(--ink); display: block; margin-bottom: 10px; }
.foot-note { font-size: 14px; color: var(--muted); max-width: 34ch; margin: 0; }
.foot-bottom {
  max-width: var(--maxw); margin: 30px auto 0; padding: 18px 22px 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}