:root {
    --paper: #F1F0EB;
    --surface: #FFFFFF;
    --surface-2: #E9E8E1;
    --ink: #101B2E;
    --ink-2: #33405A;
    --navy: #16233A;
    --navy-2: #22334F;
    --gold: #F0B429;
    --gold-deep: #8A5A00;
    --line: #827D70;
    --line-strong: #16233A;
    --focus: #16233A;
    --shadow: 0 2px 0 0 rgba(16,27,46,.10);
    --radius: 8px;
    --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --maxw: 1220px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #0D1320;
      --surface: #18202E;
      --surface-2: #212B3C;
      --ink: #EEF1F6;
      --ink-2: #C4CCDA;
      --navy: #060B15;
      --navy-2: #16223A;
      --gold: #F5C043;
      --gold-deep: #F5C043;
      --line: #78879F;
      --line-strong: #7C8AA2;
      --focus: #F5C043;
      --shadow: 0 2px 0 0 rgba(0,0,0,.45);
    }
  }
  :root[data-theme="dark"] {
    --paper: #0D1320;
    --surface: #18202E;
    --surface-2: #212B3C;
    --ink: #EEF1F6;
    --ink-2: #C4CCDA;
    --navy: #060B15;
    --navy-2: #16223A;
    --gold: #F5C043;
    --gold-deep: #F5C043;
    --line: #78879F;
    --line-strong: #7C8AA2;
    --focus: #F5C043;
    --shadow: 0 2px 0 0 rgba(0,0,0,.45);
  }
  :root[data-theme="light"] {
    --paper: #F1F0EB;
    --surface: #FFFFFF;
    --surface-2: #E9E8E1;
    --ink: #101B2E;
    --ink-2: #33405A;
    --navy: #16233A;
    --navy-2: #22334F;
    --gold: #F0B429;
    --gold-deep: #8A5A00;
    --line: #827D70;
    --line-strong: #16233A;
    --focus: #16233A;
    --shadow: 0 2px 0 0 rgba(16,27,46,.10);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 20px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 { line-height: 1.15; margin: 0; letter-spacing: -0.015em; }
  p { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }

  a { color: inherit; }

  a:focus-visible,
  button:focus-visible {
    outline: 4px solid var(--focus);
    outline-offset: 3px;
    border-radius: 3px;
  }

  .wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
  }

  .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--gold);
    color: #16233A;
    padding: 16px 24px;
    font-weight: 700;
    z-index: 50;
  }
  .skip:focus { left: 12px; top: 12px; }

  /* ---------- Logo ---------- */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
    border: 3px solid currentColor;
    border-radius: 10px;
    padding: 9px 14px 9px 16px;
    background: var(--surface);
  }
  .logo-word {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .logo-eu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border-left: 2px solid currentColor;
    padding-left: 12px;
  }
  .logo-eu svg { display: block; }
  .logo-eu span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
  }
  .logo--invert { color: #FFFFFF; background: transparent; }

  /* ---------- Header ---------- */
  .site-header {
    background: var(--paper);
    border-bottom: 3px solid var(--line-strong);
  }
  .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .brand-block { display: flex; flex-direction: column; gap: 6px; }
  .brand-tagline {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.01em;
  }

  .mainnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
  }
  .mainnav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 14px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 4px solid transparent;
    border-radius: 4px 4px 0 0;
  }
  .mainnav a:hover { background: var(--surface); border-bottom-color: var(--line-strong); }
  .mainnav a[aria-current="page"] { border-bottom-color: var(--gold); }

  /* ---------- Hero ---------- */
  .hero {
    background: var(--navy);
    color: #FFFFFF;
    border-bottom: 6px solid var(--gold);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 44px;
    align-items: center;
    padding: 56px 0 60px;
  }
  .hero h1 {
    font-size: clamp(38px, 5.2vw, 60px);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 22px;
  }
  .hero h1 .accent {
    display: block;
    color: var(--gold);
  }
  .hero p {
    font-size: 21px;
    color: #E7EAF0;
    max-width: 34em;
  }
  .hero p + p { margin-top: 16px; }
  .hero-jump {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    min-height: 56px;
    padding: 12px 26px;
    background: var(--gold);
    color: #16233A;
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 6px;
    border: 3px solid var(--gold);
  }
  .hero-jump:hover { background: #16233A; color: var(--gold); }
  .hero-jump svg { flex: none; }
  .hero .logo--invert:focus-visible,
  .hero-jump:focus-visible { outline-color: #FFFFFF; }

  /* ---------- Beeldvlakken ---------- */
  .beeld {
    position: relative;
    border-radius: var(--radius);
    border: 2px solid rgba(255,255,255,.28);
    background: linear-gradient(155deg, #2E4E72 0%, #4C6C85 45%, #A88C63 100%);
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    overflow: hidden;
  }
  .beeld-tag {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.02em;
    background: rgba(9,15,26,.82);
    color: #FFFFFF;
    padding: 6px 10px;
    border-radius: 4px;
  }
  .beeld--kort { min-height: 148px; border-color: var(--line); }

  /* ---------- Melding ---------- */
  .melding-band { padding: 34px 0 0; }
  .melding {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--surface);
    border: 3px solid var(--line-strong);
    border-left-width: 14px;
    border-left-color: var(--gold);
    border-radius: var(--radius);
    padding: 22px 24px;
  }
  .melding svg { flex: none; color: var(--gold-deep); margin-top: 2px; }
  .melding h2 {
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 6px;
  }
  .melding p { font-size: 19px; color: var(--ink-2); }

  /* ---------- Secties ---------- */
  .sectie { padding: 56px 0 8px; }
  .sectie-kop { margin-bottom: 30px; max-width: 46em; }
  .sectie-kop h2 {
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 800;
    padding-bottom: 14px;
    border-bottom: 5px solid var(--gold);
    display: inline-block;
  }
  .sectie-kop p {
    margin-top: 18px;
    font-size: 20px;
    color: var(--ink-2);
  }

  /* ---------- Rubriektegels ---------- */
  .tegels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 22px;
  }
  .tegel {
    background: var(--surface);
    border: 3px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .tegel-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px 16px;
  }
  .tegel-icoon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: var(--gold);
    color: #16233A;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #16233A;
  }
  .tegel h3 { font-size: 25px; font-weight: 800; }
  .tegel h3 a { text-decoration: none; }
  .tegel h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .tegel-omschrijving {
    padding: 0 22px 18px;
    font-size: 18px;
    color: var(--ink-2);
  }
  .tegel-lijst { border-top: 2px solid var(--line); margin-top: auto; }
  .tegel-lijst li + li { border-top: 2px solid var(--line); }
  .tegel-lijst a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 10px 22px;
    font-size: 19px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
  }
  .tegel-lijst a:hover { background: var(--surface-2); }
  .tegel-lijst a:hover .pijl { transform: translateX(4px); }
  .pijl { flex: none; color: var(--gold-deep); transition: transform .15s ease; }
  .tegel-enkel {
    padding: 0 22px 22px;
    margin-top: auto;
  }
  .tegel-enkel a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 20px;
    border: 3px solid var(--line-strong);
    border-radius: 6px;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    background: var(--surface-2);
  }
  .tegel-enkel a:hover { background: var(--gold); color: #16233A; border-color: #16233A; }

  /* ---------- Bestemmingen ---------- */
  .bestemmingen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
    gap: 22px;
  }
  .land {
    background: var(--surface);
    border: 3px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .land .beeld { border: 0; border-bottom: 3px solid var(--line-strong); border-radius: 0; }
  .land-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
  .land h3 { font-size: 24px; font-weight: 800; }
  .land p { font-size: 18px; color: var(--ink-2); }
  .plaatsen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
  .plaatsen a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 16px;
    border: 2px solid var(--line-strong);
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    background: var(--surface-2);
  }
  .plaatsen a:hover { background: var(--gold); color: #16233A; }

  .beeld--spanje { background: linear-gradient(160deg, #7E96B4 0%, #C9A874 100%); }
  .beeld--canaria { background: linear-gradient(160deg, #4E6B7C 0%, #B08D6C 100%); }
  .beeld--grieken { background: linear-gradient(160deg, #35688F 0%, #BFC7CC 100%); }
  .beeld--portugal { background: linear-gradient(160deg, #5A7C8C 0%, #B58461 100%); }
  .beeld--zorg { background: linear-gradient(150deg, #3A5A78 0%, #7E9AA8 100%); }

  /* ---------- Aangepaste vakanties ---------- */
  .zorg-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 34px;
    align-items: stretch;
    background: var(--surface);
    border: 3px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 26px;
  }
  .zorg-tekst { display: flex; flex-direction: column; gap: 18px; }
  .zorg-tekst p { font-size: 20px; color: var(--ink-2); }
  .zorg-lijst { display: grid; gap: 12px; }
  .zorg-lijst a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 60px;
    padding: 10px 20px;
    border: 3px solid var(--line-strong);
    border-radius: 6px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    background: var(--surface-2);
  }
  .zorg-lijst a:hover { background: var(--gold); color: #16233A; }
  .zorg-lijst a:hover .pijl { color: #16233A; }

  /* ---------- Aanmeldband ---------- */
  .aanmeldband {
    margin-top: 56px;
    background: var(--navy-2);
    border: 3px solid var(--line-strong);
    border-radius: var(--radius);
    color: #FFFFFF;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    justify-content: space-between;
  }
  .aanmeldband h2 { font-size: 27px; font-weight: 800; margin-bottom: 8px; }
  .aanmeldband p { font-size: 19px; color: #E3E8F0; max-width: 46em; }
  .aanmeldband a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 24px;
    background: var(--gold);
    color: #16233A;
    border: 3px solid var(--gold);
    border-radius: 6px;
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }
  .aanmeldband a:hover { background: transparent; color: var(--gold); }
  .aanmeldband a:focus-visible { outline-color: #FFFFFF; }


  /* ---------- Footer ---------- */
  .site-footer {
    margin-top: 64px;
    background: var(--navy);
    color: #FFFFFF;
    border-top: 6px solid var(--gold);
    padding: 48px 0 34px;
  }
  .footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(255,255,255,.28);
  }
  .footer-top p { font-size: 19px; color: #E3E8F0; max-width: 40em; }
  .footer-kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 28px 32px;
    padding: 32px 0 8px;
  }
  .footer-kolommen h2 {
    font-size: 19px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .footer-kolommen a {
    display: block;
    min-height: 48px;
    padding: 10px 0;
    font-size: 19px;
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }
  .footer-kolommen a:hover { color: var(--gold); }
  .footer-kolommen a:focus-visible { outline-color: #FFFFFF; }
  .footer-onder {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 2px solid rgba(255,255,255,.28);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    color: #E3E8F0;
  }

  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 44px; }
    .zorg-grid { grid-template-columns: 1fr; }
    .beeld { min-height: 220px; }
  }
  @media (max-width: 620px) {
    body { font-size: 19px; }
    .wrap { padding: 0 16px; }
    .header-inner { padding-top: 14px; }
    .mainnav ul { gap: 4px; }
    .mainnav a { font-size: 17px; padding: 8px 12px; }
    .logo-word { font-size: 18px; }
    .tegel-top { padding: 16px 16px 12px; }
    .tegel-omschrijving, .tegel-lijst a, .tegel-enkel { padding-left: 16px; padding-right: 16px; }
    .zorg-grid { padding: 16px; }
    .melding { border-left-width: 10px; padding: 18px; }
    .aanmeldband { padding: 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .tegel-lijst a:hover .pijl { transform: none; }
  }

  /* ==========================================================================
     Contentpagina's: kruimelpad, artikel, vervolglijst, partners en checklist.
     De artikelinhoud komt uit de oude site, dus de opmaak wordt hier gezet en
     niet in de tekst zelf.
     ========================================================================== */

  /* ---------- Kruimelpad ---------- */
  .kruimels {
    background: var(--surface);
    border-bottom: 3px solid var(--line-strong);
  }
  .kruimels ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    font-size: 18px;
  }
  .kruimels a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 2px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }
  .kruimels a:hover { color: var(--gold-deep); }
  .kruimels [aria-current="page"] { font-weight: 700; color: var(--ink-2); }
  .kruimels .scheider { color: var(--ink-2); font-weight: 700; }

  /* ---------- Paginakop ---------- */
  .paginakop {
    background: var(--navy);
    color: #FFFFFF;
    border-bottom: 6px solid var(--gold);
    padding: 40px 0 42px;
  }
  .paginakop h1 {
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.02em;
    max-width: 20em;
  }
  .paginakop p {
    margin-top: 16px;
    font-size: 20px;
    color: #E7EAF0;
    max-width: 42em;
  }

  /* ---------- Artikel ---------- */
  .artikel-indeling {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 44px;
    padding: 40px 0 8px;
    align-items: start;
  }
  .artikel {
    background: var(--surface);
    border: 3px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 32px 34px 34px;
    font-size: 20px;
    line-height: 1.7;
  }
  .artikel > *:first-child { margin-top: 0; }
  .artikel p { margin: 0 0 20px; max-width: 40em; }
  .artikel h2 {
    font-size: 30px;
    font-weight: 800;
    margin: 38px 0 16px;
    padding-bottom: 10px;
    border-bottom: 4px solid var(--gold);
    display: inline-block;
  }
  .artikel h3 { font-size: 24px; font-weight: 800; margin: 30px 0 12px; }
  .artikel h4, .artikel h5, .artikel h6 {
    font-size: 21px;
    font-weight: 800;
    margin: 24px 0 10px;
  }
  .artikel ul, .artikel ol {
    margin: 0 0 22px;
    padding-left: 0;
    list-style: none;
    max-width: 44em;
  }
  .artikel ol { counter-reset: nr; }
  .artikel li {
    position: relative;
    padding: 10px 0 10px 34px;
    border-bottom: 2px solid var(--line);
  }
  .artikel li:first-child { border-top: 2px solid var(--line); }
  .artikel ul li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 21px;
    width: 12px;
    height: 12px;
    background: var(--gold);
    border: 2px solid var(--line-strong);
    border-radius: 2px;
  }
  .artikel ol li { counter-increment: nr; }
  .artikel ol li::before {
    content: counter(nr) ".";
    position: absolute;
    left: 4px;
    top: 10px;
    font-weight: 800;
    color: var(--gold-deep);
  }
  .artikel a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 600;
  }
  .artikel a:hover { color: var(--gold-deep); text-decoration-thickness: 3px; }
  .artikel li > a { display: inline-block; min-height: 32px; }
  .artikel strong { font-weight: 800; }
  .artikel img {
    max-width: 100%;
    height: auto;
    border: 3px solid var(--line-strong);
    border-radius: 6px;
    margin: 8px 0 22px;
    background: var(--surface-2);
  }
  /* de oude foto's zijn hooguit 400 pixels breed, groter tonen maakt ze wazig */
  .artikel img { max-width: min(100%, 400px); }
  .artikel figure { margin: 0 0 22px; }
  .artikel hr {
    border: 0;
    border-top: 3px solid var(--line);
    margin: 30px 0;
  }
  .artikel blockquote {
    margin: 0 0 22px;
    padding: 16px 22px;
    background: var(--surface-2);
    border-left: 10px solid var(--gold);
    border-radius: 4px;
  }
  .tabelwikkel { overflow-x: auto; margin: 0 0 22px; }
  .artikel table {
    border-collapse: collapse;
    min-width: 100%;
    font-size: 19px;
  }
  .artikel th, .artikel td {
    border: 2px solid var(--line);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
  }
  .artikel th { background: var(--surface-2); font-weight: 800; }
  .videowikkel {
    position: relative;
    max-width: 640px;
    margin: 0 0 22px;
    border: 3px solid var(--line-strong);
    border-radius: 6px;
    overflow: hidden;
    background: #000;
  }
  .videowikkel::before { content: ""; display: block; padding-top: 56.25%; }
  .videowikkel iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ---------- Zijkolom ---------- */
  .zijkolom { display: grid; gap: 24px; position: sticky; top: 20px; }
  .zijblok {
    background: var(--surface);
    border: 3px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .zijblok h2 {
    font-size: 20px;
    font-weight: 800;
    padding: 16px 20px;
    background: var(--navy);
    color: #FFFFFF;
    border-bottom: 4px solid var(--gold);
  }
  .zijblok ul { list-style: none; margin: 0; padding: 0; }
  .zijblok li + li { border-top: 2px solid var(--line); }
  .zijblok a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 10px 20px;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }
  .zijblok a:hover { background: var(--surface-2); }
  .zijblok a[aria-current="page"] {
    background: var(--surface-2);
    border-left: 8px solid var(--gold);
  }

  /* ---------- Partnerblok met logo ---------- */
  .partnerkaarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 18px;
  }
  .partnerkaart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 20px;
    background: var(--surface);
    border: 3px solid var(--line-strong);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
  }
  .partnerkaart:hover { background: var(--surface-2); }
  .partnerkaart img {
    max-width: 100%;
    height: auto;
    align-self: flex-start;
    background: #FFFFFF;
    border: 2px solid var(--line);
    border-radius: 4px;
    padding: 6px;
  }
  .partnerkaart-naam {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 21px;
    font-weight: 800;
  }
  .partnerkaart-omschrijving { font-size: 18px; color: var(--ink-2); }

  /* ---------- Checklist ---------- */
  .checklijst { display: grid; gap: 26px; }
  .checkgroep {
    background: var(--surface);
    border: 3px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .checkgroep > h2 {
    font-size: 23px;
    font-weight: 800;
    padding: 16px 22px;
    background: var(--navy);
    color: #FFFFFF;
    border-bottom: 4px solid var(--gold);
  }
  .checkgroep ul { list-style: none; margin: 0; padding: 0; }
  .checkgroep li + li { border-top: 2px solid var(--line); }
  .checkgroep li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 22px;
    font-size: 20px;
  }
  .vakje {
    flex: none;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border: 3px solid var(--line-strong);
    border-radius: 4px;
    background: var(--surface-2);
  }
  .checkgroep li span:last-child { max-width: 46em; }
  .checkuitleg { font-size: 18px; color: var(--ink-2); display: block; margin-top: 4px; }
  .afdrukknop {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 24px;
    margin-bottom: 28px;
    background: var(--gold);
    color: #16233A;
    border: 3px solid #16233A;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
  }
  .afdrukknop:hover { background: #16233A; color: var(--gold); }

  /* ---------- 404 ---------- */
  .nietgevonden { padding: 60px 0 20px; max-width: 44em; }
  .nietgevonden h1 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; margin-bottom: 18px; }
  .nietgevonden p { font-size: 21px; color: var(--ink-2); margin-bottom: 22px; }

  @media (max-width: 980px) {
    .artikel-indeling { grid-template-columns: 1fr; gap: 30px; }
    .zijkolom { position: static; }
  }
  @media (max-width: 620px) {
    .artikel { padding: 22px 18px 24px; }
    .paginakop { padding: 30px 0 32px; }
    .kruimels ol { font-size: 17px; }
  }

  @media print {
    .site-header, .kruimels, .site-footer, .afdrukknop, .zijkolom, .melding-band { display: none; }
    body { background: #FFFFFF; color: #000000; font-size: 12pt; }
    .artikel, .checkgroep { border: 1px solid #000000; }
    .checkgroep > h2 { background: #FFFFFF; color: #000000; border-bottom: 2px solid #000000; }
    .paginakop { background: #FFFFFF; color: #000000; border-bottom: 2px solid #000000; padding: 0 0 12pt; }
    a { text-decoration: underline; }
  }

  /* ---------- Snelkoppelingen in de kop ----------
     Stond hier eerst een beeldvlak. Zolang er geen bruikbare foto's zijn, doen de
     meest gezochte ingangen meer werk dan een plaatje: de bezoeker kan meteen door. */
  .snelnaar {
    background: var(--surface);
    border: 3px solid var(--gold);
    border-radius: var(--radius);
    overflow: hidden;
    align-self: stretch;
  }
  .snelnaar h2 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 22px;
    background: var(--gold);
    color: #16233A;
  }
  .snelnaar ul { list-style: none; margin: 0; padding: 0; }
  .snelnaar li + li { border-top: 2px solid var(--line); }
  .snelnaar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 60px;
    padding: 12px 22px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
  }
  .snelnaar a:hover { background: var(--surface-2); }
  .snelnaar a:hover .pijl { transform: translateX(4px); }
  .snelnaar a:focus-visible { outline-color: var(--gold); }