/* De opmaak van de tekstpagina's zonder inloggen: /privacy (spec 19) en /voorwaarden (spec 60).
   Alleen de tokens uit design-tokens.css (Midnight) en DM Sans van de site zelf. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-6); }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.kop { border-bottom: 1px solid var(--border); background: var(--surface); }
.kop .binnen { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; }
.merk img { display: block; height: 20px; width: auto; }
.streep { width: 1px; height: 20px; background: var(--border); }
.kantoornaam { overflow: hidden; color: var(--secondary); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }

.binnen { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }
.pagina { padding-top: var(--space-8); padding-bottom: var(--space-10); }
.titel { max-width: 720px; margin-bottom: var(--space-6); }
.titel h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
}
.meta { margin: var(--space-2) 0 0; color: var(--muted); font-size: 14px; }

.inhoud { margin-bottom: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.inhoud summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; }
.inhoud ul { margin: 0; padding: 0 var(--space-4) var(--space-3) var(--space-8); }
.inhoud li { margin: 2px 0; }
.inhoud a { color: var(--foreground); text-decoration: none; }
.inhoud a:hover { color: var(--accent-text); text-decoration: underline; }

.tekst { max-width: 720px; }
.tekst h2 {
  margin: var(--space-10) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--display-tracking);
}
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { margin: var(--space-6) 0 var(--space-2); font-size: 17px; font-weight: 700; }
.tekst p, .tekst ul, .tekst ol { margin: 0 0 var(--space-4); }
.tekst ul, .tekst ol { padding-left: var(--space-6); }
.tekst li { margin-bottom: var(--space-1); }
.tekst strong { font-weight: 700; }
.tekst blockquote {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-4) var(--space-1);
  border-radius: var(--radius-card);
  background: var(--primary-subtle);
  color: var(--foreground);
}
.tekst blockquote ul { padding-left: var(--space-4); }
.tekst table { width: 100%; margin: 0 0 var(--space-6); border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tekst th, .tekst td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tekst th { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.tekst td:first-child { width: 42%; font-weight: 600; }
.tekst hr { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--border); }

.melding {
  max-width: 640px;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.melding h1 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 24px; letter-spacing: var(--display-tracking); }
.melding p { margin: 0 0 var(--space-4); color: var(--secondary); }
.boekhouder {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-control);
  background: var(--warning-subtle);
  font-size: 15px;
}
.boekhouder h2 { margin: 0 0 var(--space-2); font-size: 15px; }
.boekhouder ul { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.boekhouder p { margin: 0 0 var(--space-2); color: var(--foreground); }
code { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface-muted); font-size: 14px; overflow-wrap: anywhere; }

.voet { border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.voet .binnen { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-8); }

@media (min-width: 720px) {
  .binnen { padding: 0 var(--space-10); }
  .pagina { padding-top: var(--space-10); }
  .titel h1 { font-size: 36px; }
}
/* Breed: de inhoudsopgave staat links en blijft staan. */
@media (min-width: 1080px) {
  .kolommen { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: var(--space-10); align-items: start; }
  .inhoud { position: sticky; top: var(--space-6); border: 0; background: none; }
  .inhoud summary { display: none; }
  .inhoud ul { padding: 0; list-style: none; border-left: 1px solid var(--border); }
  .inhoud li { margin: 0; }
  .inhoud a { display: block; padding: 6px 0 6px var(--space-4); color: var(--secondary); font-size: 14px; line-height: 1.4; }
  .titel { margin-left: calc(240px + var(--space-10)); }
}
@media print {
  .kop, .inhoud, .voet { display: none; }
  body { background: #fff; color: #000; }
}