/* KnoopFietser · stijl "Knooppunt" (#757): bewegwijzering op een sober raster.
   Kleuren uit de app: AccentColor (Fietspadblauw, #681), de pinkleuren uit
   MapPinStyling en de icoonachtergrond van AppIcon voor donker.
   Geen webfonts, geen externe bestanden: deze site laadt alleen zichzelf. */

/* ===== Tokens ===== */
:root {
  color-scheme: light dark;
  --plaat: #2877BE;          /* het bord: AccentColor licht, ook in donker (wit erop 4,6:1) */
  --blauw-tekst: #0064A9;    /* AccentColor hoog contrast, voor kleine blauwe tekst */
  --knoop: #347EC6; --groen: #33A64D; --paars: #8E5AC4; --amber: #E59E1C;
  --bg: #FFFFFF; --bg-2: #F2F2F7; --tekst: #1D1D1F;
  --zacht: rgba(60, 60, 67, .7); --lijn: rgba(60, 60, 67, .16); --raster: rgba(40, 119, 190, .07);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blauw-tekst: #5C9DE8; --bg: #171413; --bg-2: #2B2522; --tekst: #F5F5F7;
    --zacht: rgba(235, 235, 245, .66); --lijn: rgba(235, 235, 245, .14); --raster: rgba(74, 142, 215, .07);
  }
}

/* ===== Basis ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--tekst); overflow-x: hidden; overflow-wrap: anywhere;
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 32px 32px;
}
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; margin: 0; letter-spacing: -.025em; }
a { color: var(--blauw-tekst); }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--bg); padding: 8px 12px; }
.defs { position: absolute; width: 0; height: 0; }

/* ===== App-icoon en fietsje ===== */
.ic-s1 { stop-color: #2A74C0; } .ic-s2 { stop-color: #0D4E8E; } .ic-g { fill: #fff; }
@media (prefers-color-scheme: dark) {
  .ic-s1 { stop-color: #2B2522; } .ic-s2 { stop-color: #171413; } .ic-g { fill: #4A8ED7; }
}
.kf-icon { display: block; width: 100%; height: auto; }
.kf-bike { display: block; fill: currentColor; }

/* ===== Kop: een bordje ===== */
header.site { position: sticky; top: 0; z-index: 40; background: var(--plaat); color: #fff; }
header.site .wrap { display: flex; align-items: center; gap: 12px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; }
.brand .kf-icon { width: 30px; border-radius: 7px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); }
header.site nav { margin-left: auto; display: flex; gap: 2px; }
header.site nav a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 8px;
  color: #fff; text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
header.site nav a:hover { background: rgba(255, 255, 255, .14); }
header.site nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 #fff; border-radius: 8px 8px 0 0; }

/* ===== Winkelknop ===== */
.store {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px; margin-top: 30px;
  border-radius: 12px; background: var(--tekst); color: var(--bg); font-weight: 800; font-size: 17px; cursor: default;
}
.store .kf-bike { width: 30px; }
.store small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; font-weight: 500; }

/* ===== Hero ===== */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); align-items: center; }
.hero .mono { color: var(--blauw-tekst); }
.hero h1 { margin-top: 14px; font-size: clamp(44px, 7.2vw, 104px); line-height: .96; font-weight: 900; letter-spacing: -.045em; }
.hero h1 em { font-style: normal; color: var(--blauw-tekst); }
.hero .lead { font-size: clamp(18px, 1.8vw, 22px); color: var(--zacht); max-width: 30em; margin: 24px 0 0; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

/* Het bord: een fietspadbord dat de inhoud van de pagina wijst */
.bord { background: var(--plaat); color: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--plaat), 0 30px 60px -30px rgba(13, 78, 142, .6); }
.bord .kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 14px; border-bottom: 2px solid rgba(255, 255, 255, .35); }
.bord .kop span { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.bord .kop .kf-bike { width: 44px; flex: none; }
.bord ol { list-style: none; margin: 0; padding: 6px 0 0; }
.bord li a {
  display: grid; grid-template-columns: 34px 52px 1fr auto; align-items: center; gap: 10px; min-height: 56px; padding: 12px; border-radius: 10px;
  color: #fff; text-decoration: none; font-weight: 800; font-size: clamp(18px, 1.9vw, 22px); letter-spacing: -.01em;
}
.bord li a:hover, .bord li a:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.bord .pijl { font-size: 26px; line-height: 1; text-align: center; }
.bord .nr { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--plaat); display: grid; place-items: center; font-size: 18px; font-weight: 900; }
.bord .km { font-family: var(--mono); font-size: 12px; font-weight: 500; opacity: .8; letter-spacing: .06em; }

/* ===== Zo werkt het: drie stappen met een meerijdende fietser (uit Zondagmiddag) ===== */
.stappen { padding: 0 0 clamp(48px, 7vw, 88px); }
.stappen > .mono { display: block; color: var(--blauw-tekst); margin-bottom: 22px; }
.stappen .baan { position: relative; }
.stappen ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.stappen ol::before { content: ""; position: absolute; left: 24px; right: 0; top: 21px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--knoop) 70%, var(--groen)); }
.stap { position: relative; }
.stap .nr { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--knoop); color: #fff; font-weight: 900; font-size: 18px; box-shadow: 0 0 0 5px var(--bg); }
.stap:last-child .nr { background: var(--groen); }
.stap .mono { display: block; margin-top: 20px; color: var(--zacht); font-size: 12px; }
.stap h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; font-weight: 900; letter-spacing: -.03em; margin: 6px 0 8px; }
.stap p { margin: 0; color: var(--zacht); max-width: 22em; }
.stappen .fietser { position: absolute; z-index: 2; top: -10px; left: 64px; width: 46px; color: var(--tekst); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .stappen .fietser { animation: rij 16s linear infinite; }
  @keyframes rij { from { left: 64px; } to { left: calc(100% - 48px); } }
}
@media (max-width: 760px) {
  .stappen ol { grid-template-columns: 1fr; gap: 28px; }
  .stappen ol::before { left: 21px; right: auto; top: 24px; bottom: 24px; width: 6px; height: auto; background: linear-gradient(var(--knoop) 70%, var(--groen)); }
  .stap { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; }
  .stap .nr { grid-row: 1 / span 3; }
  .stap > :not(.nr) { grid-column: 2; }
  .stap .mono { margin-top: 0; }
  .stappen .fietser { display: none; }
}

/* ===== Route langs de pagina ===== */
.route { position: relative; }
.route::before { content: ""; position: absolute; left: 39px; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: color-mix(in srgb, var(--knoop) 22%, transparent); }
.route .draw { position: absolute; left: 39px; top: 0; width: 6px; height: 100%; border-radius: 3px; background: var(--knoop); transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .route .draw { animation: grow linear both; animation-timeline: scroll(root); }
    @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}
.stop { position: relative; padding: clamp(56px, 8vw, 110px) 0 clamp(56px, 8vw, 110px) 104px; border-top: 1px solid var(--lijn); }
.stop > .pin { position: absolute; left: 18px; top: clamp(52px, 7.6vw, 104px); width: 48px; height: 48px; border-radius: 50%; background: var(--knoop); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 17px; box-shadow: 0 0 0 4px var(--bg); }
.stop > .pin.g { background: var(--groen); }
.stop .mono { color: var(--blauw-tekst); display: block; margin: 12px 0 14px; }
.stop h2 { font-size: clamp(34px, 5.2vw, 68px); line-height: 1; font-weight: 900; letter-spacing: -.04em; max-width: 13em; }
.stop .intro { font-size: clamp(18px, 1.7vw, 21px); color: var(--zacht); max-width: 34em; margin: 20px 0 0; }
.stop .intro.klein { font-size: 16px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); margin-top: 48px; align-items: start; }
.cols .media { display: flex; justify-content: center; }
@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
  .stop { padding-left: 68px; }
  .route::before, .route .draw { left: 21px; }
  .stop > .pin { left: 0; }
}

/* Specificatietabel */
.spec { width: 100%; border-collapse: collapse; font-size: 16px; }
.spec th { width: 34%; padding: 16px 16px 16px 0; border-top: 1px solid var(--lijn); text-align: left; vertical-align: top; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--zacht); }
.spec td { padding: 14px 0; border-top: 1px solid var(--lijn); vertical-align: top; }
.spec td b { display: block; font-size: 19px; letter-spacing: -.01em; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--lijn); }
@media (max-width: 520px) {
  .spec th, .spec td { display: block; width: auto; padding: 12px 0 0; border-top: 0; }
  .spec tr { display: block; border-top: 1px solid var(--lijn); padding-bottom: 12px; }
  .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
}

/* Wat de stem zegt, als bordjes */
.zeg { margin-top: 44px; display: grid; gap: 12px; max-width: 760px; }
.zeg div { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: var(--plaat); color: #fff; font-weight: 800; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -.015em; }
.zeg .nr { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--plaat); display: grid; place-items: center; font-size: 18px; font-weight: 900; }
.zeg div.amber { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 3px var(--amber); }
.zeg div.amber .nr { background: var(--amber); color: #1D1D1F; }
@media (max-width: 520px) { .zeg small { display: none; } }
.zeg small { flex: none; align-self: flex-start; white-space: nowrap; margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; opacity: .8; text-transform: uppercase; }

/* Etappebalk: de tocht als lijnkaart */
.lijnkaart { margin-top: 44px; padding: 28px 0 8px; overflow-x: auto; }
.lijnkaart svg { display: block; min-width: 640px; width: 100%; height: auto; }
.lijnkaart text { font-family: -apple-system, system-ui, sans-serif; fill: var(--tekst); }
.lijnkaart .m { font-family: var(--mono); font-size: 12px; fill: var(--zacht); letter-spacing: .06em; }
.lijnkaart .wit { fill: #fff; }
.lijnkaart .lijn { stroke: var(--knoop); }
.lijnkaart .ring { fill: var(--bg); stroke: var(--knoop); }

/* Watch */
.watchrow { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; margin-top: 44px; }
.watchrow .watch { width: clamp(160px, 22vw, 240px); }
.bignum { font-size: clamp(80px, 14vw, 200px); font-weight: 900; letter-spacing: -.06em; line-height: .85; color: var(--groen); }
@media (max-width: 620px) { .watchrow { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* Samen en toestellen */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.card { display: grid; gap: 20px; align-content: start; padding: 24px; border: 1px solid var(--lijn); border-radius: 20px; background: var(--bg); }
.card .phone { max-width: 240px; justify-self: center; }
.card h3 { font-size: 24px; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--zacht); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
.devices { position: relative; margin-top: 44px; padding-bottom: 30px; }
.devices .tablet { width: 84%; }
.devices .phone { position: absolute; right: 0; bottom: 0; width: 25%; max-width: none; }

/* Privacy: afvinklijst */
.check { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.check li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--lijn); }
.check li::before {
  content: ""; width: 28px; height: 28px; margin-top: 2px; border-radius: 8px;
  background: var(--plaat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.check b { display: block; font-size: 19px; letter-spacing: -.01em; }
.check span { color: var(--zacht); }
@media (max-width: 760px) { .check { grid-template-columns: 1fr; } }

/* Eindpunt */
.eind { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; margin: 0 0 80px; padding: clamp(32px, 6vw, 72px); border-radius: 28px; background: var(--plaat); color: #fff; }
.eind .kf-icon { width: clamp(88px, 12vw, 140px); border-radius: 24%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.eind .mono { opacity: .8; }
.eind h2 { margin-top: 8px; font-size: clamp(34px, 5vw, 64px); line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.eind p { margin: 10px 0 0; opacity: .85; font-size: 19px; }
.eind .store { background: #fff; color: #0D4E8E; }
@media (max-width: 620px) { .eind { grid-template-columns: 1fr; } }

/* Invliegen bij het scrollen, alleen waar de browser het kan en beweging mag */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .in { animation: in linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    @keyframes in { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ===== Nagemaakte schermen en toestelframes ===== */
.scr { display: block; width: 100%; height: auto; }
.scr text { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
.s-map { fill: #EEF0E8; } .s-field { fill: #DDE7D2; } .s-water { fill: #BFD8EE; } .s-road { stroke: #fff; } .s-tree { fill: #C5D6B8; }
.s-route { stroke: #347EC6; } .s-node { fill: #347EC6; } .s-nodetxt { fill: #fff; font-size: 13px; font-weight: 800; }
.s-active { fill: #33A64D; } .s-activehalo { fill: #33A64D; opacity: .25; } .s-lodge { fill: #8E5AC4; } .s-via { fill: #009487; }
.s-accf { fill: #2877BE; } .s-accs { stroke: #2877BE; } .s-tint { fill: #2877BE; fill-opacity: .14; }
.s-card { fill: #fff; } .s-grp { fill: #F2F2F7; } .s-fill { fill: #767680; fill-opacity: .12; }
.s-glass { fill: #fff; fill-opacity: .86; }
.s-t1, .s-t1f { fill: #000; } .s-t1s { stroke: #000; } .s-t2 { fill: #3C3C43; fill-opacity: .62; } .s-t2s { stroke: #3C3C43; stroke-opacity: .5; }
.s-sepf { fill: #3C3C43; fill-opacity: .2; } .s-seps { stroke: #3C3C43; stroke-opacity: .2; }
.s-halo { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
g.s-t1f { color: #000; }
@media (prefers-color-scheme: dark) {
  .s-map { fill: #1C1F22; } .s-field { fill: #20291F; } .s-water { fill: #15283A; } .s-road { stroke: #3A3D42; } .s-tree { fill: #2A3A28; }
  .s-accf { fill: #4A8ED7; } .s-accs { stroke: #4A8ED7; } .s-tint { fill: #4A8ED7; fill-opacity: .2; }
  .s-card { fill: #1C1C1E; } .s-grp { fill: #000; } .s-glass { fill: #1C1C1E; fill-opacity: .86; }
  .s-t1, .s-t1f { fill: #fff; } .s-t1s { stroke: #fff; } .s-t2 { fill: #EBEBF5; fill-opacity: .6; } .s-t2s { stroke: #EBEBF5; stroke-opacity: .5; }
  .s-sepf { fill: #545458; fill-opacity: .6; } .s-seps { stroke: #545458; }
  .s-halo { stroke: #000; }
  g.s-t1f { color: #fff; }
}
.phone { position: relative; width: 100%; max-width: 300px; padding: .1px; border-radius: 15% / 7%; background: linear-gradient(145deg, #3a3a3c, #1d1d1f 40%, #2c2c2e); box-shadow: 0 0 0 1.5px #0b0b0c inset, 0 40px 80px -30px rgba(0, 0, 0, .45), 0 16px 30px -18px rgba(0, 0, 0, .35); }
.phone-in { margin: 3.4%; aspect-ratio: 393 / 852; border-radius: 12.2% / 5.6%; overflow: hidden; background: #000; }
.tablet { width: 100%; padding: .1px; border-radius: 4.2% / 6%; background: linear-gradient(145deg, #3a3a3c, #1d1d1f 40%, #2c2c2e); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .45); }
.tablet-in { margin: 2.2%; aspect-ratio: 1180 / 820; border-radius: 2.6% / 3.8%; overflow: hidden; }
.watch { display: block; width: 100%; max-width: 220px; height: auto; }
.watch text { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif; }
.w-band { fill: #2877BE; }
@media (prefers-color-scheme: dark) { .w-band { fill: #4A8ED7; } }

/* ===== Documentpagina's: privacy en support, als een route met haltes ===== */
.doc { max-width: 860px; padding-top: clamp(40px, 7vw, 88px); padding-bottom: 24px; }
.doc > * { position: relative; }
.doc h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1; font-weight: 900; letter-spacing: -.045em; }
.doc h1::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 20px; border-radius: 3px; background: var(--plaat); }
.doc .lead { font-size: clamp(18px, 1.8vw, 21px); color: var(--zacht); max-width: 34em; margin-top: 20px; }
.doc .meta { margin-top: 20px; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.doc .muted { color: var(--zacht); }
.doc h2 {
  margin-top: 64px; padding: 28px 0 0 64px; border-top: 1px solid var(--lijn);
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; font-weight: 900; letter-spacing: -.03em; scroll-margin-top: 72px;
}
.doc h2::before {
  content: ""; position: absolute; left: 0; top: 24px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--knoop); box-shadow: 0 0 0 4px var(--bg);
}
.doc h2::after { content: ""; position: absolute; left: 13px; top: 37px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.doc h3 { margin-top: 36px; font-size: 21px; letter-spacing: -.015em; scroll-margin-top: 72px; }
.doc p, .doc ul, .doc ol { max-width: 40em; }
.doc li { margin: .35em 0; }
.doc code { padding: .1em .35em; border-radius: 5px; background: color-mix(in srgb, var(--tekst) 9%, var(--bg)); font-size: .9em; }
.doc .callout { max-width: none; margin: 32px 0; padding: 20px 24px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--lijn), inset 6px 0 0 var(--plaat); }
.doc .callout strong:first-child { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blauw-tekst); }

/* De inhoudsopgave is het bord met de richtingen */
.toc { margin: 32px 0; padding: 18px 12px 12px; border-radius: 18px; background: var(--plaat); color: #fff; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--plaat); }
.toc > strong { display: block; padding: 0 10px 12px; border-bottom: 2px solid rgba(255, 255, 255, .35); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.toc ol { max-width: none; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: toc; columns: 2 300px; column-gap: 8px; }
.toc li { margin: 0; break-inside: avoid; counter-increment: toc; }
.toc li ol { display: none; }
.toc a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.toc a::before { content: counter(toc); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--plaat); font-size: 14px; font-weight: 900; }
.toc a:hover, .toc a:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }

/* Tabellen */
.table-wrap { overflow-x: auto; margin: 24px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { padding: 14px 16px 14px 0; border-top: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.doc th { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.doc tr:last-child td { border-bottom: 1px solid var(--lijn); }
/* Op een telefoon wordt de tabel een lijst van kaarten: geen horizontaal scrollen. */
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 12px 0; border-top: 1px solid var(--lijn); }
  table.stack tr:last-child { border-bottom: 1px solid var(--lijn); }
  table.stack td, table.stack tr:last-child td { border: 0; padding: 4px 0; }
  table.stack td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
}

/* ===== Voet ===== */
footer.site { margin-top: 64px; border-top: 1px solid var(--lijn); background: var(--bg); }
.home footer.site { margin-top: 0; }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding-top: 22px; padding-bottom: 40px; color: var(--zacht); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
footer.site a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
footer.site nav.volg a { gap: 6px; }
footer.site nav.volg svg { width: 18px; height: 18px; fill: currentColor; }